feat: add connection via web3 wallets

* Add metamask wallet connection - #5 * Update locales - #5 * Set connected wallet as first managed address - #5 * Add possibility to disconnect web3 wallet - #5 * Update imports - #5 * Update realt-commons package version - #5 * Add multiple other connectors * Manage translations * chore: update dependencies for fixing type errors --------- Co-authored-by: Jycssu <[email protected]>
RealToken-Community · Nov 12, 2023 · 228c2f6 · 228c2f6
1 parent a65e198
commit 228c2f6
Show file tree

Hide file tree

Showing 15 changed files with 15,540 additions and 426 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -11,11 +11,6 @@
     "react/jsx-curly-brace-presence": ["warn", "always"],
     "react/jsx-boolean-value": ["warn", "always"],
     "react-hooks/rules-of-hooks": "off",
-    "react-hooks/exhaustive-deps": [
-      "warn",
-      {
-        "additionalHooks": "useAsync"
-      }
-    ]
+    "react-hooks/exhaustive-deps": "off"
   }
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -22,12 +22,13 @@
     "@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",
+    "@mantine/core": "^6.0.2",
+    "@mantine/form": "^6.0.2",
+    "@mantine/hooks": "^6.0.2",
+    "@mantine/modals": "^6.0.2",
+    "@mantine/next": "^6.0.2",
+    "@mantine/notifications": "^6.0.2",
+    "@realtoken/realt-commons": "^1.2.7",
     "@reduxjs/toolkit": "^1.9.1",
     "@tabler/icons": "^1.74.0",
     "@tanstack/react-table": "^8.7.9",
@@ -45,15 +46,15 @@
     "cookies-next": "^2.0.5",
     "dotenv": "^16.0.3",
     "graphql": "^16.6.0",
-    "i18next": "^21.8.11",
+    "i18next": "^22.4.13",
     "image-exists": "^1.1.0",
     "jotai": "^1.11.0",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
     "next": "12.1.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-i18next": "^11.17.3",
+    "react-i18next": "^12.2.0",
     "react-query": "^3.39.2",
     "react-redux": "^8.0.5",
     "redux": "^4.2.0",

diff --git a/src/components/assetsView/views/AssetGrid.tsx b/src/components/assetsView/views/AssetGrid.tsx
@@ -48,7 +48,7 @@ export const AssetGrid: FC<{ realtokens: OwnedRealtoken[] }> = (props) => {
         style={{ width: '100%' }}
       >
         <Pagination
-          page={page}
+          value={page}
           total={Math.ceil(props.realtokens.length / pageSize)}
           boundaries={1}
           siblings={1}

diff --git a/src/components/layouts/Footer.tsx b/src/components/layouts/Footer.tsx
@@ -8,7 +8,6 @@ import {
   Title,
   createStyles,
 } from '@mantine/core'
-import { NextLink } from '@mantine/next'
 import {
   IconBrandDiscord,
   IconBrandMedium,
@@ -46,7 +45,7 @@ export const Footer: FC = () => {
       <Group>
         <ActionIcon
           variant={'subtle'}
-          component={NextLink}
+          component={'a'}
           href={'https://discord.gg/9fQz6jYmcT'}
           aria-label={'Discord'}
           target={'_blank'}
@@ -56,7 +55,7 @@ export const Footer: FC = () => {
 
         <ActionIcon
           variant={'subtle'}
-          component={NextLink}
+          component={'a'}
           href={'https://t.me/Realtoken_welcome/'}
           aria-label={'Telegram'}
           target={'_blank'}
@@ -65,7 +64,7 @@ export const Footer: FC = () => {
         </ActionIcon>
         <ActionIcon
           variant={'subtle'}
-          component={NextLink}
+          component={'a'}
           href={'https://realt.co/blog/'}
           aria-label={'Blog'}
           target={'_blank'}

diff --git a/src/components/layouts/SettingsMenu.tsx b/src/components/layouts/SettingsMenu.tsx
@@ -22,7 +22,6 @@ import {
 } from '@tabler/icons'
 
 import { setCookie } from 'cookies-next'
-import { useAtom } from 'jotai'
 
 import { selectUserCurrency } from 'src/store/features/settings/settingsSelector'
 import { userCurrencyChanged } from 'src/store/features/settings/settingsSlice'

diff --git a/src/components/modals/ManageWalletsModal.tsx b/src/components/modals/ManageWalletsModal.tsx
@@ -1,10 +1,11 @@
-import { FC, useCallback, useState } from 'react'
+import { FC, useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 import { useDispatch } from 'react-redux'
 
 import { Button, Flex, MediaQuery, Stack, TextInput } from '@mantine/core'
-import { ContextModalProps } from '@mantine/modals'
+import { ContextModalProps, useModals } from '@mantine/modals'
+import { useWeb3React } from '@web3-react/core'
 
 import { selectAddressList } from 'src/store/features/settings/settingsSelector'
 import { addressListChanged } from 'src/store/features/settings/settingsSlice'
@@ -54,6 +55,9 @@ export const ManageWalletsModal: FC<ContextModalProps> = ({ context, id }) => {
     onClose()
   }
 
+  const setWeb3Address = (value: string) =>
+    setAddressList([value, addressList[1]])
+
   return (
     <Stack
       justify={'center'}
@@ -72,6 +76,9 @@ export const ManageWalletsModal: FC<ContextModalProps> = ({ context, id }) => {
           onChange={(value) => setAddressList([addressList[0], value])}
         />
       </Flex>
+      <Flex gap={'lg'}>
+        <ConnectButton setWeb3Address={setWeb3Address} />
+      </Flex>
       <Flex gap={'lg'}>
         <Button onClick={onClose} variant={'subtle'}>
           {t('close')}
@@ -81,3 +88,38 @@ export const ManageWalletsModal: FC<ContextModalProps> = ({ context, id }) => {
     </Stack>
   )
 }
+
+interface ConnectButtonProps {
+  setWeb3Address: (address: string) => void
+}
+
+const ConnectButton: FC<ConnectButtonProps> = ({ setWeb3Address }) => {
+  const modals = useModals()
+
+  const { t } = useTranslation('common', { keyPrefix: 'walletButton' })
+  const { account, connector } = useWeb3React()
+
+  useEffect(() => {
+    if (account) {
+      setWeb3Address(account)
+    }
+  }, [account])
+
+  const onDisconnect = useCallback(async () => {
+    if (connector.deactivate) {
+      await connector.deactivate()
+    } else {
+      await connector.resetState()
+    }
+    setWeb3Address('')
+  }, [connector])
+
+  const openWalletModal = () =>
+    modals.openContextModal('web3Wallets', { innerProps: {} })
+
+  if (account) {
+    return <Button onClick={onDisconnect}>{t('disconnectWallet')}</Button>
+  }
+
+  return <Button onClick={openWalletModal}>{t('connectWallet')}</Button>
+}
diff --git a/src/components/modals/index.ts b/src/components/modals/index.ts
@@ -1,5 +1,8 @@
+import { WalletModal } from '@realtoken/realt-commons'
+
 import { ManageWalletsModal } from './ManageWalletsModal'
 
 export const modals = {
   manageWallets: ManageWalletsModal,
+  web3Wallets: WalletModal,
 }
diff --git a/src/i18next/i18next.ts b/src/i18next/i18next.ts
@@ -7,9 +7,16 @@ import { resources } from './locales'
 export const DEFAULT_NS = 'common'
 export const FALLBACK_LNG = 'en'
 
+declare module 'i18next' {
+  interface CustomTypeOptions {
+    returnNull: false
+  }
+}
+
 i18next.use(initReactI18next).init({
   resources: resources,
   defaultNS: DEFAULT_NS,
+  returnNull: false,
   fallbackLng: FALLBACK_LNG,
   debug: false,
   interpolation: {

diff --git a/src/i18next/locales/en/common.json b/src/i18next/locales/en/common.json
@@ -18,6 +18,10 @@
     "close": "Close",
     "submit": "Submit"
   },
+  "walletButton": {
+    "connectWallet": "Connect wallet",
+    "disconnectWallet": "Disconnect wallet"
+  },
   "numbers": {
     "currency": "{{value, number(maximumFractionDigits: 2; minimumFractionDigits: 2)}} {{symbol}}",
     "percent": "{{value, number(maximumFractionDigits: 2)}} %",

diff --git a/src/i18next/locales/fr/common.json b/src/i18next/locales/fr/common.json
@@ -18,6 +18,10 @@
     "close": "Fermer",
     "submit": "Valider"
   },
+  "walletButton": {
+    "connectWallet": "Connecter mon portefeuille",
+    "disconnectWallet": "Déconnecter mon portefeuille"
+  },
   "numbers": {
     "currency": "{{value, number(maximumFractionDigits: 2; minimumFractionDigits: 2)}} {{symbol}}",
     "percent": "{{value, number(maximumFractionDigits: 2)}} %",
@@ -181,4 +185,4 @@
       "yamVolume": "Volume (30 jours)"
     }
   }
-}
+}
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -1,5 +1,3 @@
-import { FC, useEffect, useState } from 'react'
-import { useTranslation } from 'react-i18next'
 import { QueryClient, QueryClientProvider } from 'react-query'
 import { Provider } from 'react-redux'
 
@@ -17,27 +15,51 @@ import 'src/i18next'
 import { MantineProviders } from 'src/providers'
 import InitStoreProvider from 'src/providers/InitStoreProvider'
 import store from 'src/store/store'
+import { resources } from 'src/i18next'
 
-type TestProps = {
-  initialLocale: string
-}
+import { 
+  CHAINS,
+  ChainSelectConfig,
+  ChainsID,
+  Web3Providers,  
+  getConnectors, 
+  getReadOnlyConnector, 
+  getWalletConnectV2, 
+  gnosisHooks, 
+  gnosisSafe, 
+  metaMask, 
+  metaMaskHooks, 
+  parseAllowedChain,
+  Chain as RealtChains,
+  initLanguage,
+  LanguageInit,
+} from '@realtoken/realt-commons'
+
+const i18n = initLanguage(resources);
 
-const LanguageInit: FC<TestProps> = ({ initialLocale }) => {
-  const { i18n } = useTranslation()
-  const [lng] = useState<string>(initialLocale)
+type AppProps = NextAppProps & { colorScheme: ColorScheme; locale: string }
 
-  useEffect(() => {
-    if (i18n.language !== lng) {
-      i18n.changeLanguage(lng)
-    }
-  }, [i18n, lng])
+const queryClient = new QueryClient({})
 
-  return null
+const dashbordChains: ChainSelectConfig<RealtChains> = {
+  allowedChains: parseAllowedChain(ChainsID),
+  chainsConfig: CHAINS
 }
 
-type AppProps = NextAppProps & { colorScheme: ColorScheme; locale: string }
+const env = process.env.NEXT_PUBLIC_ENV ?? "development";
+const walletConnectKey = process.env.NEXT_PUBLIC_WALLET_CONNECT_KEY ?? "";
 
-const queryClient = new QueryClient({})
+const readOnly = getReadOnlyConnector(dashbordChains);
+const walletConnect = getWalletConnectV2(dashbordChains, env, walletConnectKey, false)
+
+const libraryConnectors = getConnectors(
+  {
+    metamask: [metaMask, metaMaskHooks],
+    gnosisSafe: [gnosisSafe, gnosisHooks],
+    readOnly: readOnly,
+    walletConnectV2: walletConnect
+  }
+);
 
 const App = ({ Component, pageProps, colorScheme, locale }: AppProps) => {
   function scrollToTop() {
@@ -54,20 +76,22 @@ const App = ({ Component, pageProps, colorScheme, locale }: AppProps) => {
     <QueryClientProvider client={queryClient}>
       <JotaiProvider>
         <Provider store={store}>
-          <InitStoreProvider>
-            <Head
-              title={'Realtoken Dashboard'}
-              description={
-                'A Realtoken Dashboard for follow assets related to RealT'
-              }
-            />
-            <MantineProviders initialColorScheme={colorScheme}>
-              <LanguageInit initialLocale={locale} />
-              <MainLayout>
-                <Component {...pageProps} />
-              </MainLayout>
-            </MantineProviders>
-          </InitStoreProvider>
+          <Web3Providers libraryConnectors={libraryConnectors}>
+            <InitStoreProvider>
+              <Head
+                title={'Realtoken Dashboard'}
+                description={
+                  'A Realtoken Dashboard for follow assets related to RealT'
+                }
+              />
+              <MantineProviders initialColorScheme={colorScheme}>
+                <LanguageInit i={i18n} />
+                <MainLayout>
+                  <Component {...pageProps} />
+                </MainLayout>
+              </MantineProviders>
+            </InitStoreProvider>
+          </Web3Providers>
         </Provider>
       </JotaiProvider>
     </QueryClientProvider>

diff --git a/src/providers/MantineProviders.tsx b/src/providers/MantineProviders.tsx
@@ -7,7 +7,7 @@ import {
 } from '@mantine/core'
 import { useHotkeys } from '@mantine/hooks'
 import { ModalsProvider } from '@mantine/modals'
-import { NotificationsProvider } from '@mantine/notifications'
+import { Notifications } from '@mantine/notifications'
 
 import { setCookies } from 'cookies-next'
 
@@ -45,18 +45,17 @@ export const MantineProviders: FC<MantineProvidersProps> = ({
         withNormalizeCSS={true}
         theme={{ colorScheme, ...theme }}
       >
-        <NotificationsProvider autoClose={6000}>
-          <ModalsProvider
-            modals={modals}
-            modalProps={{
-              centered: true,
-              withCloseButton: false,
-              styles: modalStyles,
-            }}
-          >
-            {children}
-          </ModalsProvider>
-        </NotificationsProvider>
+        <Notifications autoClose={6000} />
+        <ModalsProvider
+          modals={modals}
+          modalProps={{
+            centered: true,
+            withCloseButton: false,
+            styles: modalStyles,
+          }}
+        >
+          {children}
+        </ModalsProvider>
       </MantineProvider>
     </ColorSchemeProvider>
   )

diff --git a/src/theme/theme.ts b/src/theme/theme.ts
@@ -2,8 +2,7 @@ import { MantineTheme, MantineThemeOverride, ModalProps } from '@mantine/core'
 
 export const modalStyles: ModalProps['styles'] = {
   header: { justifyContent: 'center' },
-  modal: {
-    // margin: '100px auto',
+  content: {
     width: 'auto',
     maxWidth: 'calc(100vw - 20px - 32px)',
     padding: '10px !important',