Move zkp snap connector to store (#44)

* move mm zkp snap to identity store

package.json

@@ -43,7 +43,7 @@
     "@mui/icons-material": "^5.14.19",
     "@mui/material": "^5.14.20",
     "@mui/x-date-pickers": "^6.18.7",
-    "@rarimo/rarime-connector": "^2.0.1",
+    "@rarimo/rarime-connector": "^2.1.0-rc.0",
     "@walletconnect/modal": "^2.6.2",
     "copy-to-clipboard": "^3.3.3",
     "i18next": "^22.4.3",

src/App.tsx

@@ -1,19 +1,17 @@
 import { CircularProgress, CssBaseline, Stack, ThemeProvider } from '@mui/material'
 import { FC, HTMLAttributes, memo, useCallback, useEffect, useMemo, useState } from 'react'
 
+import { ToastsManager } from '@/contexts'
 import { ErrorHandler } from '@/helpers'
-import { useAuth, useMetamaskZkpSnapContext, useViewportSizes, useWeb3Context } from '@/hooks'
-
-import { ToastsManager } from './contexts'
-import { AppRoutes } from './routes'
-import { useUiState } from './store'
-import { createTheme } from './theme'
+import { useAuth, useViewportSizes, useWeb3Context } from '@/hooks'
+import { AppRoutes } from '@/routes'
+import { useUiState, web3Store } from '@/store'
+import { createTheme } from '@/theme'
 
 const App: FC<HTMLAttributes<HTMLDivElement>> = () => {
   const [isAppInitialized, setIsAppInitialized] = useState(false)
 
   const { provider, isValidChain } = useWeb3Context()
-  const { checkSnapStatus } = useMetamaskZkpSnapContext()
   const { paletteMode } = useUiState()
   const { connectProviders } = useAuth()
 
@@ -23,7 +21,7 @@ const App: FC<HTMLAttributes<HTMLDivElement>> = () => {
     if (provider?.address) return
 
     try {
-      const { isMetamaskInstalled, isSnapInstalled } = await checkSnapStatus()
+      const { isMetamaskInstalled, isSnapInstalled } = await web3Store.checkSnapStatus()
 
       if (isMetamaskInstalled && isSnapInstalled) {
         await connectProviders()
@@ -33,7 +31,7 @@ const App: FC<HTMLAttributes<HTMLDivElement>> = () => {
     }
 
     setIsAppInitialized(true)
-  }, [provider?.address, checkSnapStatus, connectProviders])
+  }, [provider?.address, connectProviders])
 
   const theme = useMemo(() => createTheme(paletteMode), [paletteMode])
 

src/api/clients/index.ts

@@ -1,6 +1,14 @@
 import { config } from '@config'
 import { JsonApiClient } from '@distributedlab/jac'
+import { enableSnap, SnapConnector } from '@rarimo/rarime-connector'
 
 export const api = new JsonApiClient({
   baseUrl: config.API_URL,
 })
+
+export let zkpSnap: SnapConnector
+
+export const initZkpSnap = async () => {
+  const snap = await enableSnap()
+  zkpSnap = await snap.getConnector()
+}

src/api/modules/orgs/hooks/org.ts

@@ -1,10 +1,11 @@
 import { useCallback, useMemo } from 'react'
 
 import { loadOrgById, OrgsIncludes } from '@/api/modules/orgs'
-import { useLoading, useMetamaskZkpSnapContext } from '@/hooks'
+import { useLoading } from '@/hooks'
+import { useIdentityState } from '@/store'
 
 export const useOrg = (id: string) => {
-  const { userDid } = useMetamaskZkpSnapContext()
+  const { userDid } = useIdentityState()
 
   const loadOrg = useCallback(async () => {
     if (!id) return undefined

src/common/AppNavbar.tsx

@@ -4,8 +4,7 @@ import { NavLink, useLocation } from 'react-router-dom'
 
 import { ProfileMenu } from '@/common'
 import { Icons, RoutePaths } from '@/enums'
-import { useMetamaskZkpSnapContext } from '@/hooks'
-import { uiStore, useUiState } from '@/store'
+import { uiStore, useIdentityState, useUiState } from '@/store'
 import { Transitions } from '@/theme/constants'
 import { UiIcon, UiIconButton } from '@/ui'
 
@@ -48,7 +47,7 @@ const NavbarLink = ({ children, to }: NavbarLinkProps) => {
 const AppNavbar = () => {
   const { palette } = useTheme()
   const { paletteMode } = useUiState()
-  const { userDid } = useMetamaskZkpSnapContext()
+  const { userDid } = useIdentityState()
 
   const navbarItems = useMemo(
     () => [

src/common/FillRequestForm.tsx

@@ -7,7 +7,8 @@ import type { ObjectShape } from 'yup'
 import { CredentialRequest, fillOrgGroupRequest, OrgGroupRequest } from '@/api/modules/orgs'
 import { ParsedCredentialSchemaProperty } from '@/api/modules/zkp'
 import { ErrorHandler } from '@/helpers'
-import { useForm, useMetamaskZkpSnapContext } from '@/hooks'
+import { useForm } from '@/hooks'
+import { useIdentityState } from '@/store'
 import { UiButton, UiTextField } from '@/ui'
 
 type Props = StackProps & {
@@ -24,7 +25,7 @@ export default function FillRequestForm({
   onRequestFilled,
   ...rest
 }: Props) {
-  const { userDid } = useMetamaskZkpSnapContext()
+  const { userDid } = useIdentityState()
 
   const {
     formState,

src/contexts/index.ts

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