onbloc · jinoosss · Jan 29, 2024 · Jan 13, 2024 · Jan 12, 2024 · Jan 15, 2024
@@ -21,6 +21,7 @@
     "@babel/core": "7.21.0",
     "@babel/runtime": "7.21.0",
     "@storybook/react": "^7.0.4",
+    "@types/react-lottie": "^1.2.10",
     "@yarnpkg/sdks": "3.0.0-rc.40",
     "babel-loader": "9.1.2",
     "eslint": "8.0.1",
@@ -40,5 +41,8 @@
       "prettier --write",
       "git add"
     ]
+  },
+  "dependencies": {
+    "react-lottie": "^1.2.4"
   }
 }
@@ -24,7 +24,8 @@
     "@typescript-eslint/no-namespace": "off",
     "@typescript-eslint/explicit-function-return-type": "error",
     "@typescript-eslint/no-empty-interface": "off",
-    "@typescript-eslint/no-unused-vars": "error"
+    "@typescript-eslint/no-unused-vars": "error",
+    "react/react-in-jsx-scope": "off"
   },
   "settings": {
     "import/resolver": {

@@ -2,33 +2,33 @@ import React from 'react';
 import { ThemeProvider } from 'styled-components';
 import { RecoilRoot } from 'recoil';
 import type { Decorator, Parameters } from '@storybook/react';
-import { GlobalStyle } from '../src/styles/global-style';
+import { GlobalPopupStyle } from '../src/styles/global-style';
 import theme from '../src/styles/theme';
 import '../index.css';
 
 const extensionViewport = {
   name: 'Adena Extension',
   styles: {
     width: '360px',
-    height: '540px'
-  }
-}
+    height: '540px',
+  },
+};
 
 export const parameters: Parameters = {
   viewport: {
     viewports: {
-      adenaExtension: extensionViewport
+      adenaExtension: extensionViewport,
     },
-    defaultViewport: 'adenaExtension'
+    defaultViewport: 'adenaExtension',
   },
   backgrounds: {
     default: 'adenaExtension',
     values: [
       {
         name: 'adenaExtension',
-        value: '#212128'
-      }
-    ]
+        value: '#212128',
+      },
+    ],
   },
   layout: 'fullscreen',
   actions: { argTypesRegex: '^on[A-Z].*' },
@@ -44,7 +44,7 @@ export const decorators: Decorator[] = [
   (Story, context) => {
     return (
       <>
-        <GlobalStyle />
+        <GlobalPopupStyle />
         <RecoilRoot>
           <ThemeProvider theme={theme}>
             <div id='portal-popup'></div>

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>Adena</title>
+  <meta charset="utf-8" />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap"
+    rel="stylesheet" />
+</head>
+
+<body>
+  <div id="web"></div>
+</body>
+
+</html>
@@ -3,7 +3,6 @@ import { HashRouter } from 'react-router-dom';
 
 import { ThemeProvider } from 'styled-components';
 import theme from '@styles/theme';
-import { GlobalStyle } from '@styles/global-style';
 import { RecoilRoot } from 'recoil';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { AdenaProvider, WalletProvider } from '@common/provider';
@@ -13,7 +12,6 @@ const queryClient = new QueryClient();
 const AppProvider = ({ children }: { children: ReactNode }): ReactElement => {
   return (
     <>
-      <GlobalStyle />
       <RecoilRoot>
         <QueryClientProvider client={queryClient}>
           <AdenaProvider>

@@ -0,0 +1,22 @@
+import React, { ReactElement } from 'react';
+import { PopupRouter } from '@router/popup/index';
+
+import AppProvider from './app-provider';
+import useApp from './use-app';
+import { GlobalPopupStyle } from '@styles/global-style';
+
+const RunApp = (): ReactElement => {
+  useApp();
+  return <PopupRouter />;
+};
+
+const App = (): ReactElement => {
+  return (
+    <AppProvider>
+      <GlobalPopupStyle />
+      <RunApp />
+    </AppProvider>
+  );
+};
+
+export default App;
@@ -9,7 +9,7 @@ import { useTokenBalance } from '@hooks/use-token-balance';
 import { useWalletContext } from '@hooks/use-context';
 import { useAccountName } from '@hooks/use-account-name';
 import useScrollHistory from '@hooks/use-scroll-history';
-import { fetchHealth } from '@common/utils/client-utils';
+import { fetchHealth } from '@common/utils/fetch-utils';
 
 import { CommonState } from '@states';
 import { NetworkMetainfo } from '@types';

@@ -1,17 +1,19 @@
 import React, { ReactElement } from 'react';
-import { CustomRouter } from '@router/custom-router';
+import { WebRouter } from '@router/web/index';
 
 import AppProvider from './app-provider';
 import useApp from './use-app';
+import { GlobalWebStyle } from '@styles/global-style';
 
 const RunApp = (): ReactElement => {
   useApp();
-  return <CustomRouter />;
+  return <WebRouter />;
 };
 
 const App = (): ReactElement => {
   return (
     <AppProvider>
+      <GlobalWebStyle />
       <RunApp />
     </AppProvider>
   );