diff --git a/README.md b/README.md index 903961e..78e813e 100644 --- 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 index da342c8..9681da8 100644 --- 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 index 7c4fac8..1d6454b 100644 --- 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 ( - - - - + + + + +
-
- - {children} - + {children} - - - - + + + + ); } diff --git a/lib/components/WalletProvider/WalletProvider.tsx b/lib/components/WalletProvider/WalletProvider.tsx index b342e2e..f256bcf 100644 --- 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; queryClient: QueryClient }) { return ( - + {children} ); diff --git a/package.json b/package.json index bd06fb3..893cd93 100644 --- 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 index 7bff5bd..4a89de3 100644 --- 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 ( - - - + + + + + ); } diff --git a/vite.config.ts b/vite.config.ts index fc9c026..8a494b7 100644 --- 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 }, }, });