Wallet page (#51)

* rarimo client & wallet clients

* update toasts for custom components, upd send modal

* add preview for new ui components

* hotfix build errors, bump connector v

* update format helpers, add default format config

* rename ui components

package.json

@@ -43,8 +43,8 @@
     "@mui/icons-material": "^5.14.19",
     "@mui/material": "^5.14.20",
     "@mui/x-date-pickers": "^6.18.7",
-    "@rarimo/rarime-connector": "^2.1.0-rc.3",
-    "@walletconnect/modal": "^2.6.2",
+    "@rarimo/client": "^2.0.0",
+    "@rarimo/rarime-connector": "^2.1.0-rc.12",
     "canvas-confetti": "^1.9.2",
     "copy-to-clipboard": "^3.3.3",
     "i18next": "^22.4.3",
@@ -59,6 +59,7 @@
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.48.2",
     "react-i18next": "^12.1.1",
+    "react-qrcode-logo": "^2.9.0",
     "react-router-dom": "^6.20.1",
     "react-use": "^17.4.2",
     "uuid": "^9.0.1",

src/App.tsx

@@ -3,15 +3,14 @@ import { FC, HTMLAttributes, memo, useCallback, useEffect, useMemo, useState } f
 
 import { ToastsManager } from '@/contexts'
 import { ErrorHandler } from '@/helpers'
-import { useAuth, useViewportSizes, useWeb3Context } from '@/hooks'
+import { useAuth, useViewportSizes } from '@/hooks'
 import { AppRoutes } from '@/routes'
 import { credentialsStore, useUiState, web3Store } from '@/store'
 import { createTheme } from '@/theme'
 
 const App: FC<HTMLAttributes<HTMLDivElement>> = () => {
   const [isAppInitialized, setIsAppInitialized] = useState(false)
 
-  const { provider, isValidChain } = useWeb3Context()
   const { paletteMode } = useUiState()
   const { connectProviders } = useAuth()
 
@@ -44,7 +43,7 @@ const App: FC<HTMLAttributes<HTMLDivElement>> = () => {
     <ThemeProvider theme={theme}>
       <CssBaseline />
       <ToastsManager>
-        <div className='App' key={provider?.isConnected ? Number(isValidChain) : 'app_main'}>
+        <div className='App' key='app_main'>
           {isAppInitialized ? (
             <AppRoutes />
           ) : (

src/api/clients/index.ts

@@ -1,5 +1,6 @@
 import { JsonApiClient } from '@distributedlab/jac'
-import { enableSnap, SnapConnector } from '@rarimo/rarime-connector'
+import { makeRarimoClient, makeWallet } from '@rarimo/client'
+import { CHAINS, RarimeWallet, ZkpSnap } from '@rarimo/rarime-connector'
 
 import { config } from '@/config'
 
@@ -8,9 +9,43 @@ export const api = new JsonApiClient({
   credentials: 'include',
 })
 
-export let zkpSnap: SnapConnector
+export const zkpSnap = new ZkpSnap()
 
-export const initZkpSnap = async () => {
-  const snap = await enableSnap(...config.SNAP_V_PARAMS)
-  zkpSnap = await snap.getConnector()
+enum RarimoChains {
+  Testnet = 'rarimo_42-1',
+  Mainnet = 'rarimo_201411-1',
+}
+
+export const RARIMO_EXPLORER_URLS: Record<keyof typeof CHAINS, string> = {
+  [RarimoChains.Testnet]: 'https://scan.mainnet-beta.rarimo.com',
+  [RarimoChains.Mainnet]: 'https://scan.rarimo.com',
+}
+
+export const rarimeWallet = new RarimeWallet(RarimoChains.Testnet)
+
+const chainInfo = CHAINS[rarimeWallet.chainId]
+
+export const rarimoClient = makeRarimoClient({
+  rpcUrl: chainInfo.rpc!,
+  apiUrl: chainInfo.rest!,
+  prefix: 'rarimo',
+  chainName: chainInfo.chainName,
+  chainIconUrl: chainInfo.chainSymbolImageUrl,
+  currency: {
+    denom: chainInfo.stakeCurrency!.coinDenom,
+    minDenom: chainInfo.stakeCurrency!.coinMinimalDenom,
+    decimals: chainInfo.stakeCurrency!.coinDecimals,
+  },
+  gasPrice: {
+    amount: 0,
+    steps: {
+      low: chainInfo.feeCurrencies[0].gasPriceStep!.low,
+      average: chainInfo.feeCurrencies[0].gasPriceStep!.average,
+      high: chainInfo.feeCurrencies[0].gasPriceStep!.high,
+    },
+  },
+})
+
+export const initRarimoClient = async () => {
+  await rarimoClient.connect(makeWallet(rarimeWallet))
 }

src/api/modules/zkp/helpers/builders.ts

@@ -1,4 +1,4 @@
-import { CreateProofRequestParams } from '@rarimo/rarime-connector/dist/types'
+import { CircuitId, type CreateProofRequestParams } from '@rarimo/rarime-connector'
 
 import { OrgUserRoles } from '@/api/modules/orgs'
 import { QueryOperators } from '@/api/modules/zkp'
@@ -11,7 +11,7 @@ export const buildAuthorizeRequest = ({
   isAdmin: boolean
 }): CreateProofRequestParams => {
   return {
-    circuitId: 'credentialAtomicQueryMTPV2',
+    circuitId: CircuitId.AtomicQueryMTPV2,
     accountAddress: providerAddress,
     issuerDid: 'config.issuerDid', // TODO: implement
 

src/common/AppNavbar.tsx

@@ -56,6 +56,10 @@ const AppNavbar = () => {
         route: RoutePaths.Credentials,
         iconComponent: <UiIcon componentName='layers' size={6} />,
       },
+      {
+        route: RoutePaths.Wallet,
+        iconComponent: <UiIcon name={Icons.Wallet} size={6} />,
+      },
       { route: RoutePaths.Rewards, iconComponent: <UiIcon name={Icons.Gift} size={5} /> },
     ],
     [],

src/common/ProfileMenu.tsx

@@ -36,7 +36,9 @@ export default function ProfileMenu({ userDid }: ProfileMenuProps) {
     try {
       await copy(userDid)
     } catch (e) {
-      bus.emit(BusEvents.error, 'Not copied, please try again')
+      bus.emit(BusEvents.error, {
+        message: 'Not copied, please try again',
+      })
     }
   }
 

src/config.ts

@@ -16,7 +16,6 @@ export type Config = {
   DEFAULT_CHAIN: SupportedChains
   ROBOTORNOT_LINK: string
   SUPPORT_LINK: string
-  SNAP_V_PARAMS: string[]
 }
 
 const FALLBACK_DEFAULT_CHAIN = Object.entries(FALLBACK_SUPPORTED_CHAINS)[0][0]
@@ -29,7 +28,4 @@ export const config: Config = {
   DEFAULT_CHAIN: import.meta.env.VITE_DEFAULT_CHAIN || FALLBACK_DEFAULT_CHAIN,
   ROBOTORNOT_LINK: 'https://robotornot.mainnet-beta.rarimo.com/',
   SUPPORT_LINK: 'https://rarime.com',
-  SNAP_V_PARAMS: [],
-  // SNAP_V_PARAMS: ['local:http://localhost:8081', '2.1.0-rc.3'],
-  // SNAP_V_PARAMS: ['npm:@rarimo/rarime', '2.1.0-rc.3'],
 }

src/contexts/index.ts

@@ -1,2 +1 @@
 export { default as ToastsManager } from './toasts-manager'
-export * from './web3'

src/contexts/toasts-manager/index.tsx

@@ -1,5 +1,5 @@
 import { SnackbarProvider, useSnackbar } from 'notistack'
-import { ReactNode, useCallback, useEffect, useMemo } from 'react'
+import { PropsWithChildren, ReactElement, useCallback, useEffect, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { BusEvents, ICON_COMPONENTS, Icons } from '@/enums'
@@ -9,11 +9,12 @@ import { DefaultToast } from './toasts'
 
 const STATUS_MESSAGE_AUTO_HIDE_DURATION = 5 * 1000
 
-type ToastPayload = {
+export type ToastPayload = {
+  messageType?: BusEvents
+
   title?: string
-  message?: string
+  message?: string | ReactElement
   icon?: Icons | keyof typeof ICON_COMPONENTS
-  messageType?: BusEvents
 }
 
 declare module 'notistack' {
@@ -22,7 +23,7 @@ declare module 'notistack' {
   }
 }
 
-function ToastsManagerController({ children }: { children: ReactNode }) {
+function ToastsManagerController({ children }: PropsWithChildren) {
   const { t } = useTranslation()
   const { enqueueSnackbar } = useSnackbar()
 
@@ -67,6 +68,7 @@ function ToastsManagerController({ children }: { children: ReactNode }) {
 
         messageType,
         title,
+        message,
         icon,
       })
     },
@@ -108,7 +110,7 @@ function ToastsManagerController({ children }: { children: ReactNode }) {
   return children
 }
 
-export default function ToastsManager({ children }: { children: ReactNode }) {
+export default function ToastsManager({ children }: { children: ReactElement }) {
   return (
     <SnackbarProvider
       anchorOrigin={{ vertical: 'top', horizontal: 'right' }}

src/contexts/toasts-manager/toasts/DefaultToast.tsx

@@ -1,6 +1,6 @@
 import { Alert, AlertColor, AlertTitle, Typography } from '@mui/material'
 import { CustomContentProps, SnackbarContent, useSnackbar } from 'notistack'
-import { forwardRef, useMemo } from 'react'
+import { forwardRef, ReactNode, useMemo } from 'react'
 
 import { BusEvents, ICON_COMPONENTS, Icons } from '@/enums'
 import { UiIcon } from '@/ui'
@@ -9,7 +9,7 @@ interface Props extends CustomContentProps {
   messageType: BusEvents
 
   title: string
-  message: string
+  message: string | ReactNode
   icon: Icons | keyof typeof ICON_COMPONENTS
 }
 
@@ -46,7 +46,7 @@ const DefaultToast = forwardRef<HTMLDivElement, Props>((props: Props, ref) => {
         onClose={() => closeSnackbar(id)}
       >
         <AlertTitle>{title}</AlertTitle>
-        <Typography variant='body4'>{message}</Typography>
+        {typeof message === 'string' ? <Typography variant='body4'>{message}</Typography> : message}
       </Alert>
     </SnackbarContent>
   )