kit wallet state

0xsequence · May 16, 2024 · 8151246 · 8151246
1 parent 765ef1a
commit 8151246
Show file tree

Hide file tree

Showing 12 changed files with 85 additions and 195 deletions.
diff --git a/packages/wallet/package.json b/packages/wallet/package.json
@@ -34,6 +34,7 @@
     "react": ">=17",
     "react-dom": ">=17",
     "wagmi": ">=2.5.0",
+    "valtio": ">=1.13.0",
     "viem": ">=2.0.0"
   },
   "devDependencies": {

diff --git a/packages/wallet/src/contexts/WalletModal.ts b/packages/wallet/src/contexts/WalletModal.ts
diff --git a/packages/wallet/src/contexts/genericContext.ts b/packages/wallet/src/contexts/genericContext.ts
diff --git a/packages/wallet/src/hooks/useNavigation.ts b/packages/wallet/src/hooks/useNavigation.ts
@@ -1,14 +1,16 @@
-import { useNavigationContext, Navigation, History } from '../contexts/Navigation'
+import { useSnapshot, INTERNAL_Snapshot } from 'valtio'
 
-interface UseNavigation {
-  setNavigation: (navigation: Navigation) => void
-  setHistory?: (history: History) => void
-  history: History
-  goBack: () => void
-}
+import { setHistory, navigationState, Navigation, History } from '../states/Navigation'
+
+// interface UseNavigation {
+//   setNavigation: (navigation: Navigation) => void
+//   setHistory: (history: History) => void
+//   history: INTERNAL_Snapshot<History>
+//   goBack: () => void
+// }
 
-export const useNavigation = (): UseNavigation => {
-  const { setHistory, history } = useNavigationContext()
+export const useNavigation = () => {
+  const { history } = useSnapshot(navigationState)
 
   const setNavigation = (navigation: Navigation) => {
     // Scroll to top of page when navigating to a new page
@@ -17,13 +19,13 @@ export const useNavigation = (): UseNavigation => {
     parentElement?.scrollTo(0, 0)
 
     const newHistory = navigation.location === 'home' ? [] : [...history, navigation]
-    setHistory(newHistory)
+    setHistory(newHistory as History)
   }
 
   const goBack = () => {
     const newHistory = [...history]
     newHistory.pop()
-    setHistory(newHistory)
+    setHistory(newHistory as History)
   }
 
   return { setNavigation, history, setHistory, goBack }

diff --git a/packages/wallet/src/hooks/useOpenWalletModal.ts b/packages/wallet/src/hooks/useOpenWalletModal.ts
@@ -1,7 +1,9 @@
-import { useWalletModalContext } from '../contexts/WalletModal'
+import { useSnapshot } from 'valtio'
+
+import { setOpenWalletModal, walletModalState } from '../states/WalletModal'
 
 export const useOpenWalletModal = () => {
-  const { setOpenWalletModal, openWalletModalState } = useWalletModalContext()
+  const { openWalletModalState } = useSnapshot(walletModalState)
 
   return { setOpenWalletModal, openWalletModalState }
 }
diff --git a/packages/wallet/src/shared/KitWalletProvider/index.tsx b/packages/wallet/src/shared/KitWalletProvider/index.tsx
@@ -5,7 +5,8 @@ import { AnimatePresence } from 'framer-motion'
 import React, { useState, useEffect } from 'react'
 
 import { HEADER_HEIGHT } from '../../constants'
-import { History, Navigation, NavigationContextProvider, WalletModalContextProvider } from '../../contexts'
+import { useNavigation, useOpenWalletModal } from '../../hooks'
+import { History, Navigation } from '../../states'
 
 import { getHeader, getContent } from './utils'
 
@@ -60,12 +61,9 @@ export const KitWalletProvider = (props: KitWalletProviderProps) => {
 
 export const KitWalletContent = ({ children }: KitWalletProviderProps) => {
   const { theme, position } = useTheme()
+  const { openWalletModalState, setOpenWalletModal } = useOpenWalletModal()
 
-  // Wallet Modal Context
-  const [openWalletModal, setOpenWalletModal] = useState<boolean>(false)
-
-  // Navigation Context
-  const [history, setHistory] = useState<History>([])
+  const { history, setHistory, setNavigation } = useNavigation()
   const navigation = history.length > 0 ? history[history.length - 1] : DEFAULT_LOCATION
 
   const displayScrollbar =
@@ -79,46 +77,44 @@ export const KitWalletContent = ({ children }: KitWalletProviderProps) => {
     navigation.location === 'settings-currency'
 
   useEffect(() => {
-    if (openWalletModal) {
+    if (openWalletModalState) {
       setHistory([])
     }
-  }, [openWalletModal])
+  }, [openWalletModalState])
 
   return (
-    <WalletModalContextProvider value={{ setOpenWalletModal, openWalletModalState: openWalletModal }}>
-      <NavigationContextProvider value={{ setHistory, history }}>
-        <div id="kit-provider">
-          <ThemeProvider root="#kit-provider" scope="kit" theme={theme}>
-            <AnimatePresence>
-              {openWalletModal && (
-                <Modal
-                  contentProps={{
-                    style: {
-                      maxWidth: '400px',
-                      height: 'fit-content',
-                      ...getModalPositionCss(position)
-                    }
-                  }}
-                  scroll={false}
-                  backdropColor="backgroundBackdrop"
-                  onClose={() => setOpenWalletModal(false)}
-                >
-                  <Box id="sequence-kit-wallet-content">
-                    {getHeader(navigation)}
-
-                    {displayScrollbar ? (
-                      <Scroll style={{ paddingTop: HEADER_HEIGHT, height: 'min(800px, 80vh)' }}>{getContent(navigation)}</Scroll>
-                    ) : (
-                      getContent(navigation)
-                    )}
-                  </Box>
-                </Modal>
-              )}
-            </AnimatePresence>
-          </ThemeProvider>
-        </div>
-        {children}
-      </NavigationContextProvider>
-    </WalletModalContextProvider>
+    <>
+      <div id="kit-provider">
+        <ThemeProvider root="#kit-provider" scope="kit" theme={theme}>
+          <AnimatePresence>
+            {openWalletModalState && (
+              <Modal
+                contentProps={{
+                  style: {
+                    maxWidth: '400px',
+                    height: 'fit-content',
+                    ...getModalPositionCss(position)
+                  }
+                }}
+                scroll={false}
+                backdropColor="backgroundBackdrop"
+                onClose={() => setOpenWalletModal(false)}
+              >
+                <Box id="sequence-kit-wallet-content">
+                  {getHeader(navigation as Navigation)}
+
+                  {displayScrollbar ? (
+                    <Scroll style={{ paddingTop: HEADER_HEIGHT, height: 'min(800px, 80vh)' }}>{getContent(navigation)}</Scroll>
+                  ) : (
+                    getContent(navigation  as Navigation)
+                  )}
+                </Box>
+              </Modal>
+            )}
+          </AnimatePresence>
+        </ThemeProvider>
+      </div>
+      {children}
+    </>
   )
 }
diff --git a/packages/wallet/src/shared/KitWalletProvider/utils/index.tsx b/packages/wallet/src/shared/KitWalletProvider/utils/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { Navigation } from '../../../contexts'
+import { Navigation } from '../../../states'
 import {
   CoinDetails,
   CollectibleDetails,

diff --git a/packages/wallet/src/contexts/Navigation.ts → packages/wallet/src/states/Navigation.ts b/packages/wallet/src/contexts/Navigation.ts → packages/wallet/src/states/Navigation.ts
@@ -1,6 +1,6 @@
 import { Transaction } from '@0xsequence/indexer'
 
-import { createGenericContext } from './genericContext'
+import { proxy } from 'valtio'
 
 export interface CollectionDetailsParams {
   contractAddress: string
@@ -97,9 +97,14 @@ export type Navigation =
 
 export type History = Navigation[]
 
-type NavigationContext = {
-  setHistory: (history: History) => void
+type NavigationState = {
   history: History
 }
 
-export const [useNavigationContext, NavigationContextProvider] = createGenericContext<NavigationContext>()
+export const navigationState = proxy<NavigationState>({
+  history: []
+})
+
+export const setHistory = (history: History) => {
+  navigationState.history = history
+}
diff --git a/packages/wallet/src/states/WalletModal.ts b/packages/wallet/src/states/WalletModal.ts
@@ -0,0 +1,13 @@
+import { proxy } from 'valtio'
+
+interface WalletModalState {
+  openWalletModalState: boolean
+}
+
+export const walletModalState = proxy<WalletModalState>({
+  openWalletModalState: false
+})
+
+export const setOpenWalletModal = (open: boolean) => {
+  walletModalState.openWalletModalState = open
+}
diff --git a/packages/wallet/src/contexts/index.ts → packages/wallet/src/states/index.ts b/packages/wallet/src/contexts/index.ts → packages/wallet/src/states/index.ts
diff --git a/packages/wallet/src/views/Search/components/WalletLink.tsx b/packages/wallet/src/views/Search/components/WalletLink.tsx
@@ -1,7 +1,7 @@
 import { Box, Text, ChevronRightIcon } from '@0xsequence/design-system'
 import React from 'react'
 
-import { Navigation } from '../../../contexts'
+import { Navigation } from '../../../states'
 import { useNavigation } from '../../../hooks'
 
 interface WalletLinkProps {