update chain id, and fantom icon

.storybook/main.js

@@ -0,0 +1,14 @@
+module.exports = {
+  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: [
+    {
+      name: "@storybook/addon-essentials",
+      options: {
+        backgrounds: false,
+      },
+    },
+    "@storybook/addon-links",
+    "@storybook/addon-a11y",
+    "themeprovider-storybook/register",
+  ],
+};

.storybook/preview-head.html

@@ -0,0 +1 @@
+<link href="https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;600&display=swap" rel="stylesheet">

.storybook/preview.js

@@ -0,0 +1,33 @@
+import React from "react";
+import { withThemesProvider } from "themeprovider-storybook";
+import light from "../src/theme/light";
+import dark from "../src/theme/dark";
+import ResetCSS from "../src/ResetCSS";
+import { ModalProvider } from "../src/widgets/Modal";
+
+const globalDecorator = (StoryFn) => (
+  <ModalProvider>
+    <ResetCSS />
+    <StoryFn />
+  </ModalProvider>
+);
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  layout: "fullscreen",
+};
+
+const themes = [
+  {
+    name: "Light",
+    backgroundColor: light.colors.background,
+    ...light,
+  },
+  {
+    name: "Dark",
+    backgroundColor: dark.colors.background,
+    ...dark,
+  },
+];
+
+export const decorators = [globalDecorator, withThemesProvider(themes)];