fix: errors

.vscode/settings.json

@@ -7,5 +7,8 @@
   },
   "[typescript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
-  }
-}
+  },
+  "i18n-ally.localesPaths": [
+    "src/i18next/locales"
+  ]
+}

package.json

@@ -20,10 +20,6 @@
     "@ethersproject/contracts": "^5.6.2",
     "@ethersproject/providers": "^5.6.8",
     "@gnosis.pm/safe-apps-sdk": "^7.8.0",
-    "@mantine/core": "^5.7.1",
-    "@mantine/form": "^5.7.1",
-    "@mantine/hooks": "^5.7.1",
-    "@mantine/modals": "^5.7.1",
     "@mantine/next": "^5.7.1",
     "@mantine/notifications": "^5.7.1",
     "@realtoken/realt-commons": "^1.2.7",
@@ -32,13 +28,6 @@
     "@tanstack/react-table": "^8.7.9",
     "@types/react-redux": "^7.1.24",
     "@types/redux": "^3.6.0",
-    "@web3-react/coinbase-wallet": "^8.0.34-beta.0",
-    "@web3-react/core": "^8.0.35-beta.0",
-    "@web3-react/gnosis-safe": "^8.0.7-beta.0",
-    "@web3-react/metamask": "^8.0.28-beta.0",
-    "@web3-react/network": "^8.0.27-beta.0",
-    "@web3-react/types": "^8.0.20-beta.0",
-    "@web3-react/walletconnect": "^8.0.36-beta.0",
     "bignumber.js": "^9.0.2",
     "clsx": "^1.2.1",
     "cookies-next": "^2.0.5",
@@ -50,8 +39,8 @@
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
     "next": "12.1.5",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "18",
+    "react-dom": "18",
     "react-i18next": "^11.17.3",
     "react-query": "^3.39.2",
     "react-redux": "^8.0.5",
@@ -67,8 +56,8 @@
     "@typechain/ethers-v5": "^10.1.0",
     "@types/lodash": "^4.14.191",
     "@types/node": "18.0.0",
-    "@types/react": "18.0.14",
-    "@types/react-dom": "18.0.5",
+    "@types/react": "18",
+    "@types/react-dom": "18",
     "@typescript-eslint/eslint-plugin": "^5.30.0",
     "@typescript-eslint/parser": "^5.30.0",
     "@walletconnect/ethereum-provider": "^1.7.8",
@@ -86,4 +75,4 @@
   "resolutions": {
     "@radix-ui/react-scroll-area": "^0.1.5-rc.44"
   }
-}
+}

src/components/modals/index.ts

@@ -1,7 +1,7 @@
+import { ContextModalProps } from '@mantine/modals'
 import { ManageWalletsModal } from './ManageWalletsModal'
-import { WalletModal } from '@realtoken/realt-commons'
+import { FC } from 'react'
 
-export const modals = {
+export const modals: Record<string,FC<ContextModalProps<any>>> = {
   manageWallets: ManageWalletsModal,
-  web3Wallets: WalletModal
 }

src/pages/_app.tsx

@@ -1,58 +1,47 @@
-import { FC, useEffect, useState } from 'react'
-import { useTranslation } from 'react-i18next'
 import { QueryClient, QueryClientProvider } from 'react-query'
 import { Provider } from 'react-redux'
-
 import { GetServerSidePropsContext } from 'next'
 import type { AppProps as NextAppProps } from 'next/app'
-
 import { ColorScheme } from '@mantine/core'
-
 import { getCookie } from 'cookies-next'
 import { Provider as JotaiProvider } from 'jotai'
 
-import { Head, MainLayout } from 'src/components/layouts'
-import 'src/i18next'
-import { MantineProviders } from 'src/providers'
-import InitStoreProvider from 'src/providers/InitStoreProvider'
 import store from 'src/store/store'
+import 'src/i18next'
 
-import { 
-  ChainSelectConfig,
+import {
+  Head,
   Web3Providers,  
   getConnectors, 
-  getWalletConnectV2, 
   gnosisHooks, 
   gnosisSafe, 
   metaMask, 
   metaMaskHooks, 
-  parseAllowedChain 
+  LanguageInit,
+  initLanguage,
+  Layout,
+  MantineProviders,
+  Logo,
+  availableWebsites,
+  Websites,
 } from '@realtoken/realt-commons'
+import InitStoreProvider from '../providers/InitStoreProvider'
+import { modals } from '../components/modals'
+import { resources } from 'src/i18next'
+import { modalStyles } from '../theme'
 
-type TestProps = {
-  initialLocale: string
-}
-
-const LanguageInit: FC<TestProps> = ({ initialLocale }) => {
-  const { i18n } = useTranslation()
-  const [lng] = useState<string>(initialLocale)
-
-  useEffect(() => {
-    if (i18n.language !== lng) {
-      i18n.changeLanguage(lng)
-    }
-  }, [i18n, lng])
-
-  return null
-}
+const i18n = initLanguage(resources);
 
 type AppProps = NextAppProps & { colorScheme: ColorScheme; locale: string }
 
 const queryClient = new QueryClient({})
 
+// const [readOnly, readOnlyHooks] = getReadOnlyConnector(customChains);
+
 const libraryConnectors = getConnectors(
   {
     metaMask: [metaMask, metaMaskHooks],
+    gnosisSafe: [gnosisSafe, gnosisHooks]
   }
 );
 
@@ -63,17 +52,14 @@ const App = ({ Component, pageProps, colorScheme, locale }: AppProps) => {
         <Provider store={store}>
           <Web3Providers libraryConnectors={libraryConnectors}>
             <InitStoreProvider>
-              <Head
-                title={'Realtoken Dashboard'}
-                description={
-                  'A Realtoken Dashboard for follow assets related to RealT'
-                }
-              />
-              <MantineProviders initialColorScheme={colorScheme}>
-                <LanguageInit initialLocale={locale} />
-                <MainLayout>
+              <MantineProviders modals={modals} modalStyles={modalStyles}>
+                <LanguageInit i={i18n} />
+                <Layout
+                  currentWebsite={Websites.COMMUNITY_DASHBOARD}
+                  head={<Head title='Realtoken Dashboard' description='A Realtoken Dashboard for follow assets related to RealT'/>}
+                >
                   <Component {...pageProps} />
-                </MainLayout>
+                </Layout>
               </MantineProviders>
             </InitStoreProvider>
           </Web3Providers>
@@ -88,4 +74,4 @@ App.getInitialProps = ({ ctx }: { ctx: GetServerSidePropsContext }) => ({
   locale: getCookie('react-i18next', ctx) || 'fr',
 })
 
-export default App
+export default App;

src/pages/index.tsx

@@ -1,5 +1,4 @@
 import { NextPage } from 'next'
-
 import { Box, Flex, Grid } from '@mantine/core'
 
 import { AssetsView } from 'src/components/assetsView'

src/providers/InitStoreProvider.tsx

@@ -1,7 +1,7 @@
 import useInitStore from 'src/hooks/useInitStore'
 
 interface InitStoreProps {
-  children: React.ReactElement[]
+  children: React.ReactElement[] |  React.ReactElement
 }
 export default function InitStoreProvider({ children }: InitStoreProps) {
   useInitStore()

src/theme/theme.ts

@@ -2,13 +2,21 @@ import { MantineTheme, MantineThemeOverride, ModalProps } from '@mantine/core'
 
 export const modalStyles: ModalProps['styles'] = {
   header: { justifyContent: 'center' },
-  modal: {
-    // margin: '100px auto',
-    width: 'auto',
-    maxWidth: 'calc(100vw - 20px - 32px)',
-    padding: '10px !important',
+  body: {
+    padding: '1rem',
+    width: "auto",
+    maxWidth: "700px",
+    maxHeight: 'calc(100vh - (3vh * 2))',
+    overflowY: "scroll"
   },
-}
+  root: { zIndex: 10 },
+  overlay: { zIndex: 10 },
+  inner: { zIndex: 10 },
+  content: {
+    overflowY: "unset !important" as "unset",
+    maxHeight: 'calc(100vh - (3vh * 2)) !important',
+  }
+};
 
 export const theme: MantineThemeOverride = {
   colors: {