change package

auxo-zk · Aug 4, 2024 · 6833dd4 · 6833dd4
1 parent 814809d
commit 6833dd4
Show file tree

Hide file tree

Showing 7 changed files with 127 additions and 72 deletions.
diff --git a/README.md b/README.md
@@ -13,3 +13,25 @@ yarn add @auxo-dev/frontend-common
 /images/LOGO_ICON_2D.png
 /images/logo-sidebar
 ```
+
+package
+
+```
+    "@emotion/react": "^11.13.0",
+    "@emotion/styled": "^11.13.0",
+    "@mui/icons-material": "^5.16.5",
+    "@mui/material": "^5.16.5",
+    "@mui/utils": "^5.16.5",
+    "@tanstack/react-query": "^5.51.15",
+    "axios": "^1.7.3",
+    "bignumber.js": "^9.1.2",
+    "crypto-token-icon": "^0.0.12",
+    "date-fns": "^3.6.0",
+    "jotai": "^2.9.1",
+    "jwt-decode": "^4.0.0",
+    "react-quill": "^2.0.0",
+    "react-router-dom": "^6.25.1",
+    "react-toastify": "^10.0.5",
+    "viem": "2.x",
+    "wagmi": "^2.12.1"
+```
diff --git a/lib/components/ButtonConnectWallet/ButtonConnectWallet.tsx b/lib/components/ButtonConnectWallet/ButtonConnectWallet.tsx
@@ -1,15 +1,13 @@
 import { Box, Button, ClickAwayListener, Divider, MenuItem, Typography } from '@mui/material';
 import { useModalFunction } from '../../states/modal';
-import React, { useEffect, useLayoutEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useAccount, useChainId, useConnections, useDisconnect } from 'wagmi';
 import ModalListWalletConnect from './ModalListWalletConnect/ModalListWalletConnect';
 import { IconWallet } from '../../icons';
-import { Check, CheckCircleOutlineRounded, CheckCircleRounded, CopyAll, ExpandMore, Help, HourglassEmpty, LoginRounded, LogoutOutlined, LogoutRounded } from '@mui/icons-material';
+import { Check, CheckCircleOutlineRounded, CopyAll, Help, HourglassEmpty, LoginRounded, LogoutOutlined } from '@mui/icons-material';
 import { rotateInfinity } from '../../animations';
 import { infoChain, infoWallet } from '../../states/wallet';
 import { copyTextToClipboard, formatAddress } from '../../utils';
-import { checkValidAccessToken } from '../../states/user';
-import { verifyJwt } from 'lib/services';
 import { useCheckLogin, useSetAddressWallet } from 'lib/states/user/state';
 
 export function ButtonConnectWallet({ requiedLogin }: { requiedLogin: boolean }) {
@@ -86,7 +84,7 @@ function ConnectedButton({ address, requiedLogin }: { address: string; requiedLo
         window.location.reload();
     }
 
-    useLayoutEffect(() => {
+    useEffect(() => {
         setAddress(address);
         // setAddress('B62qmRKcdXqHe1SxukHQtWUHyMX3NMGCkvHnHao3VsdoBMNRDkQq6na');
     }, [address]);

diff --git a/lib/components/Layout/Layout.tsx b/lib/components/Layout/Layout.tsx
@@ -5,42 +5,40 @@ import Sidebar from './Sidebar/Sidebar';
 import Header from './Header/Header';
 import { AppStateProvider } from '../AppStateProvider';
 import { MenuSidebar } from '../../types';
-import { WalletProvider } from '../WalletProvider';
 import { ModalCustom } from '../ModalCustom';
 import { ToastNotifier } from '../ToastNotifier';
+import { walletConfig } from 'lib/states';
 
-export function Layout({ children, menu, requiedLogin, walletConnectId }: { menu: MenuSidebar; children: ReactNode; requiedLogin: boolean; walletConnectId: string }) {
+export function Layout({ children, menu, requiedLogin }: { menu: MenuSidebar; children: ReactNode; requiedLogin: boolean }) {
     const sidebarWidth = '202px';
     const headerHeight = '64px';
     return (
-        <WalletProvider walletConnectId={walletConnectId}>
-            <AppStateProvider>
-                <Box sx={{ position: 'relative' }}>
-                    <Sidebar sidebarWidth={sidebarWidth} headerHeight={headerHeight} menu={menu} />
+        <AppStateProvider>
+            <Box sx={{ position: 'relative' }}>
+                <Sidebar sidebarWidth={sidebarWidth} headerHeight={headerHeight} menu={menu} />
+                <Box
+                    sx={{
+                        position: 'relative',
+                        zIndex: 1,
+                        ml: { xs: 0, md: sidebarWidth },
+                        backgroundImage: `url(/images/bgheader1.png)`,
+                        backgroundRepeat: 'no-repeat',
+                        backgroundPosition: 'top center',
+                        backgroundSize: '975px auto',
+                    }}
+                >
+                    <Header headerHeight={headerHeight} requiedLogin={requiedLogin}></Header>
                     <Box
                         sx={{
-                            position: 'relative',
-                            zIndex: 1,
-                            ml: { xs: 0, md: sidebarWidth },
-                            backgroundImage: `url(/images/bgheader1.png)`,
-                            backgroundRepeat: 'no-repeat',
-                            backgroundPosition: 'top center',
-                            backgroundSize: '975px auto',
+                            minHeight: `calc(100svh - ${headerHeight})`,
                         }}
                     >
-                        <Header headerHeight={headerHeight} requiedLogin={requiedLogin}></Header>
-                        <Box
-                            sx={{
-                                minHeight: `calc(100svh - ${headerHeight})`,
-                            }}
-                        >
-                            {children}
-                        </Box>
+                        {children}
                     </Box>
                 </Box>
-                <ModalCustom />
-                <ToastNotifier />
-            </AppStateProvider>
-        </WalletProvider>
+            </Box>
+            <ModalCustom />
+            <ToastNotifier />
+        </AppStateProvider>
     );
 }
diff --git a/lib/components/WalletProvider/WalletProvider.tsx b/lib/components/WalletProvider/WalletProvider.tsx
@@ -2,11 +2,11 @@ import { WagmiProvider } from 'wagmi';
 import { BaseProviderProps } from '../../types';
 import { walletConfig } from '../../states/wallet/config';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { useMemo } from 'react';
 
-const queryClient = new QueryClient();
-export function WalletProvider({ children, walletConnectId }: BaseProviderProps & { walletConnectId: string }) {
+export function WalletProvider({ children, wagmiConfig, queryClient }: BaseProviderProps & { wagmiConfig: ReturnType<typeof walletConfig>; queryClient: QueryClient }) {
     return (
-        <WagmiProvider config={walletConfig(walletConnectId)}>
+        <WagmiProvider config={wagmiConfig}>
             <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
         </WagmiProvider>
     );

diff --git a/package.json b/package.json
@@ -40,7 +40,25 @@
     "@types/node": "^20.14.9",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "vite-plugin-dts": "^3.9.1"
+    "vite-plugin-dts": "^3.9.1",
+
+    "@emotion/react": "^11.13.0",
+    "@emotion/styled": "^11.13.0",
+    "@mui/icons-material": "^5.16.5",
+    "@mui/material": "^5.16.5",
+    "@mui/utils": "^5.16.5",
+    "@tanstack/react-query": "^5.51.15",
+    "axios": "^1.7.3",
+    "bignumber.js": "^9.1.2",
+    "crypto-token-icon": "^0.0.12",
+    "date-fns": "^3.6.0",
+    "jotai": "^2.9.1",
+    "jwt-decode": "^4.0.0",
+    "react-quill": "^2.0.0",
+    "react-router-dom": "^6.25.1",
+    "react-toastify": "^10.0.5",
+    "viem": "2.x",
+    "wagmi": "^2.12.1"
   },
   "devDependencies": {
     "@types/node": "^20.14.9",
@@ -56,9 +74,8 @@
     "react-dom": "^18.3.1",
     "typescript": "^5.2.2",
     "vite": "^5.3.1",
-    "vite-plugin-dts": "^3.9.1"
-  },
-  "dependencies": {
+    "vite-plugin-dts": "^3.9.1",
+
     "@emotion/react": "^11.13.0",
     "@emotion/styled": "^11.13.0",
     "@mui/icons-material": "^5.16.5",
@@ -77,4 +94,5 @@
     "viem": "2.x",
     "wagmi": "^2.12.1"
   }
+
 }
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,41 +1,42 @@
 import { Dashboard } from '@mui/icons-material';
-import { Box, Button, Typography } from '@mui/material';
-import { checkValidAccessToken, IconMenuExplorer, IconUser, Layout } from 'lib/main';
-import { useThemeMode } from 'lib/main';
-import React from 'react';
+import { QueryClient } from '@tanstack/react-query';
+import { IconMenuExplorer, IconUser, Layout, walletConfig, WalletProvider } from 'lib/main';
 import { Outlet } from 'react-router-dom';
-import { useAccountEffect, useSwitchAccount } from 'wagmi';
+
+const config = walletConfig('6482349197b073ab1d34e32ec4907c1d');
+const queryClient = new QueryClient();
 
 export default function App() {
     return (
-        <Layout
-            walletConnectId="6482349197b073ab1d34e32ec4907c1d"
-            requiedLogin={true}
-            menu={[
-                {
-                    icon: IconMenuExplorer,
-                    title: 'Explorer',
-                    url: '/explorer',
-                    children: [
-                        { title: 'Projects', url: '/explorer/projects' },
-                        { title: 'Campaigns', url: '/explorer/campaigns' },
-                    ] as { title: string; url: string }[],
-                },
-                {
-                    icon: IconUser,
-                    title: 'Profile',
-                    url: '/test2',
-                    children: [] as { title: string; url: string }[],
-                },
-                {
-                    icon: Dashboard,
-                    title: 'Dashboard',
-                    url: '/dashboard',
-                    children: [] as { title: string; url: string }[],
-                },
-            ]}
-        >
-            <Outlet />
-        </Layout>
+        <WalletProvider wagmiConfig={config} queryClient={queryClient}>
+            <Layout
+                requiedLogin={true}
+                menu={[
+                    {
+                        icon: IconMenuExplorer,
+                        title: 'Explorer',
+                        url: '/explorer',
+                        children: [
+                            { title: 'Projects', url: '/explorer/projects' },
+                            { title: 'Campaigns', url: '/explorer/campaigns' },
+                        ] as { title: string; url: string }[],
+                    },
+                    {
+                        icon: IconUser,
+                        title: 'Profile',
+                        url: '/test2',
+                        children: [] as { title: string; url: string }[],
+                    },
+                    {
+                        icon: Dashboard,
+                        title: 'Dashboard',
+                        url: '',
+                        children: [] as { title: string; url: string }[],
+                    },
+                ]}
+            >
+                <Outlet />
+            </Layout>
+        </WalletProvider>
     );
 }
diff --git a/vite.config.ts b/vite.config.ts
@@ -19,7 +19,25 @@ export default defineConfig({
         },
         copyPublicDir: false, // ! disable copy public folder
         rollupOptions: {
-            external: ['react', 'react/jsx-runtime', '@emotion/react', '@emotion/styled', 'react-router-dom', '@mui', 'jotai', 'axios', 'react-quill', 'react-toastify'], // ! remove the code from bundle
+            external: [
+                'react',
+                'react/jsx-runtime',
+                '@emotion/react',
+                '@emotion/styled',
+                'react-router-dom',
+                '@mui',
+                'viem',
+                'wagmi',
+                '@tanstack/react-query',
+                'jotai',
+                'axios',
+                'react-quill',
+                'react-toastify',
+                'jwt-decode',
+                'bignumber.js',
+                'crypto-token-icon',
+                'date-fns',
+            ], // ! remove the code from bundle
         },
     },
 });