From 815124691b34d2f3f512d7e04a6c54923c7a6873 Mon Sep 17 00:00:00 2001 From: samuelea Date: Thu, 16 May 2024 17:07:21 -0400 Subject: [PATCH] kit wallet state --- packages/wallet/package.json | 1 + packages/wallet/src/contexts/WalletModal.ts | 10 -- .../wallet/src/contexts/genericContext.ts | 19 --- packages/wallet/src/hooks/useNavigation.ts | 24 ++-- .../wallet/src/hooks/useOpenWalletModal.ts | 6 +- .../src/shared/KitWalletProvider/index.tsx | 82 +++++++------ .../shared/KitWalletProvider/utils/index.tsx | 2 +- .../src/{contexts => states}/Navigation.ts | 13 ++- packages/wallet/src/states/WalletModal.ts | 13 +++ .../wallet/src/{contexts => states}/index.ts | 0 .../views/Search/components/WalletLink.tsx | 2 +- pnpm-lock.yaml | 108 +----------------- 12 files changed, 85 insertions(+), 195 deletions(-) delete mode 100644 packages/wallet/src/contexts/WalletModal.ts delete mode 100644 packages/wallet/src/contexts/genericContext.ts rename packages/wallet/src/{contexts => states}/Navigation.ts (89%) create mode 100644 packages/wallet/src/states/WalletModal.ts rename packages/wallet/src/{contexts => states}/index.ts (100%) diff --git a/packages/wallet/package.json b/packages/wallet/package.json index 98f46f91..2321a762 100644 --- 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 deleted file mode 100644 index d6734406..00000000 --- a/packages/wallet/src/contexts/WalletModal.ts +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react' - -import { createGenericContext } from './genericContext' - -type WalletModalContext = { - setOpenWalletModal: React.Dispatch> - openWalletModalState: boolean -} - -export const [useWalletModalContext, WalletModalContextProvider] = createGenericContext() diff --git a/packages/wallet/src/contexts/genericContext.ts b/packages/wallet/src/contexts/genericContext.ts deleted file mode 100644 index 453a6e9a..00000000 --- a/packages/wallet/src/contexts/genericContext.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { createContext, useContext } from 'react' - -// https://medium.com/@rivoltafilippo/typing-react-context-to-avoid-an-undefined-default-value-2c7c5a7d5947 - -export const createGenericContext = () => { - // Create a context with a generic parameter or undefined - const genericContext = createContext(undefined) - - // Check if the value provided to the context is defined or throw an error - const useGenericContext = () => { - const contextIsDefined = useContext(genericContext) - if (!contextIsDefined) { - throw new Error('useGenericContext must be used within a Provider') - } - return contextIsDefined - } - - return [useGenericContext, genericContext.Provider] as const -} diff --git a/packages/wallet/src/hooks/useNavigation.ts b/packages/wallet/src/hooks/useNavigation.ts index 4d0984b4..64b289e2 100644 --- 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 +// 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 index b4b13e49..13537e7d 100644 --- 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 index de9aa9a8..89f880e9 100644 --- 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(false) - - // Navigation Context - const [history, setHistory] = useState([]) + 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 ( - - -
- - - {openWalletModal && ( - setOpenWalletModal(false)} - > - - {getHeader(navigation)} - - {displayScrollbar ? ( - {getContent(navigation)} - ) : ( - getContent(navigation) - )} - - - )} - - -
- {children} - - + <> +
+ + + {openWalletModalState && ( + setOpenWalletModal(false)} + > + + {getHeader(navigation as Navigation)} + + {displayScrollbar ? ( + {getContent(navigation)} + ) : ( + getContent(navigation as Navigation) + )} + + + )} + + +
+ {children} + ) } diff --git a/packages/wallet/src/shared/KitWalletProvider/utils/index.tsx b/packages/wallet/src/shared/KitWalletProvider/utils/index.tsx index 2f0dacd0..092459de 100644 --- 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 b/packages/wallet/src/states/Navigation.ts similarity index 89% rename from packages/wallet/src/contexts/Navigation.ts rename to packages/wallet/src/states/Navigation.ts index 54080496..b008e182 100644 --- a/packages/wallet/src/contexts/Navigation.ts +++ b/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() +export const navigationState = proxy({ + 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 new file mode 100644 index 00000000..eb0efb3b --- /dev/null +++ b/packages/wallet/src/states/WalletModal.ts @@ -0,0 +1,13 @@ +import { proxy } from 'valtio' + +interface WalletModalState { + openWalletModalState: boolean +} + +export const walletModalState = proxy({ + openWalletModalState: false +}) + +export const setOpenWalletModal = (open: boolean) => { + walletModalState.openWalletModalState = open +} diff --git a/packages/wallet/src/contexts/index.ts b/packages/wallet/src/states/index.ts similarity index 100% rename from packages/wallet/src/contexts/index.ts rename to 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 index f64eb7fb..6d22e622 100644 --- 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 { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ac048be8..44fa6f23 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -423,7 +423,7 @@ importers: version: 1.9.26(ethers@5.7.2(bufferutil@4.0.8)) '@0xsequence/waas': specifier: '>=1.9.24' - version: 1.9.26(ethers@5.7.2(bufferutil@4.0.8)(utf-8-validate@6.0.3)) + version: 1.9.26(ethers@5.7.2(bufferutil@4.0.8)) '@react-oauth/google': specifier: '>=0.11.1' version: 0.11.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -497,6 +497,9 @@ importers: react-copy-to-clipboard: specifier: ^5.1.0 version: 5.1.0(react@18.3.1) + valtio: + specifier: '>=1.13.0' + version: 1.13.2(@types/react@18.3.1)(react@18.3.1) viem: specifier: '>=2.0.0' version: 2.10.2(bufferutil@4.0.8)(typescript@5.4.5)(zod@3.23.7) @@ -7642,11 +7645,6 @@ snapshots: - bufferutil - utf-8-validate - '@0xsequence/core@1.9.26(ethers@5.7.2(bufferutil@4.0.8)(utf-8-validate@6.0.3))': - dependencies: - '@0xsequence/abi': 1.9.26 - ethers: 5.7.2(bufferutil@4.0.8)(utf-8-validate@6.0.3) - '@0xsequence/core@1.9.26(ethers@5.7.2(bufferutil@4.0.8))': dependencies: '@0xsequence/abi': 1.9.26 @@ -7711,14 +7709,6 @@ snapshots: '@0xsequence/utils': 1.9.26(ethers@5.7.2(bufferutil@4.0.8)) ethers: 5.7.2(bufferutil@4.0.8) - '@0xsequence/network@1.9.26(ethers@5.7.2(bufferutil@4.0.8)(utf-8-validate@6.0.3))': - dependencies: - '@0xsequence/core': 1.9.26(ethers@5.7.2(bufferutil@4.0.8)(utf-8-validate@6.0.3)) - '@0xsequence/indexer': 1.9.26 - '@0xsequence/relayer': 1.9.26(ethers@5.7.2(bufferutil@4.0.8)(utf-8-validate@6.0.3)) - '@0xsequence/utils': 1.9.26(ethers@5.7.2(bufferutil@4.0.8)(utf-8-validate@6.0.3)) - ethers: 5.7.2(bufferutil@4.0.8)(utf-8-validate@6.0.3) - '@0xsequence/network@1.9.26(ethers@5.7.2(bufferutil@4.0.8))': dependencies: '@0xsequence/core': 1.9.26(ethers@5.7.2(bufferutil@4.0.8)) @@ -7746,13 +7736,6 @@ snapshots: - bufferutil - utf-8-validate - '@0xsequence/relayer@1.9.26(ethers@5.7.2(bufferutil@4.0.8)(utf-8-validate@6.0.3))': - dependencies: - '@0xsequence/abi': 1.9.26 - '@0xsequence/core': 1.9.26(ethers@5.7.2(bufferutil@4.0.8)(utf-8-validate@6.0.3)) - '@0xsequence/utils': 1.9.26(ethers@5.7.2(bufferutil@4.0.8)(utf-8-validate@6.0.3)) - ethers: 5.7.2(bufferutil@4.0.8)(utf-8-validate@6.0.3) - '@0xsequence/relayer@1.9.26(ethers@5.7.2(bufferutil@4.0.8))': dependencies: '@0xsequence/abi': 1.9.26 @@ -7785,11 +7768,6 @@ snapshots: - bufferutil - utf-8-validate - '@0xsequence/utils@1.9.26(ethers@5.7.2(bufferutil@4.0.8)(utf-8-validate@6.0.3))': - dependencies: - ethers: 5.7.2(bufferutil@4.0.8)(utf-8-validate@6.0.3) - js-base64: 3.7.7 - '@0xsequence/utils@1.9.26(ethers@5.7.2(bufferutil@4.0.8))': dependencies: ethers: 5.7.2(bufferutil@4.0.8) @@ -7802,17 +7780,6 @@ snapshots: transitivePeerDependencies: - aws-crt - '@0xsequence/waas@1.9.26(ethers@5.7.2(bufferutil@4.0.8)(utf-8-validate@6.0.3))': - dependencies: - '@0xsequence/network': 1.9.26(ethers@5.7.2(bufferutil@4.0.8)(utf-8-validate@6.0.3)) - '@aws-sdk/client-cognito-identity-provider': 3.569.0 - ethers: 5.7.2(bufferutil@4.0.8)(utf-8-validate@6.0.3) - idb: 7.1.1 - json-canonicalize: 1.0.6 - jwt-decode: 4.0.0 - transitivePeerDependencies: - - aws-crt - '@0xsequence/waas@1.9.26(ethers@5.7.2(bufferutil@4.0.8))': dependencies: '@0xsequence/network': 1.9.26(ethers@5.7.2(bufferutil@4.0.8)) @@ -9630,32 +9597,6 @@ snapshots: - bufferutil - utf-8-validate - '@ethersproject/providers@5.7.2(bufferutil@4.0.8)(utf-8-validate@6.0.3)': - dependencies: - '@ethersproject/abstract-provider': 5.7.0 - '@ethersproject/abstract-signer': 5.7.0 - '@ethersproject/address': 5.7.0 - '@ethersproject/base64': 5.7.0 - '@ethersproject/basex': 5.7.0 - '@ethersproject/bignumber': 5.7.0 - '@ethersproject/bytes': 5.7.0 - '@ethersproject/constants': 5.7.0 - '@ethersproject/hash': 5.7.0 - '@ethersproject/logger': 5.7.0 - '@ethersproject/networks': 5.7.1 - '@ethersproject/properties': 5.7.0 - '@ethersproject/random': 5.7.0 - '@ethersproject/rlp': 5.7.0 - '@ethersproject/sha2': 5.7.0 - '@ethersproject/strings': 5.7.0 - '@ethersproject/transactions': 5.7.0 - '@ethersproject/web': 5.7.1 - bech32: 1.1.4 - ws: 7.4.6(bufferutil@4.0.8)(utf-8-validate@6.0.3) - transitivePeerDependencies: - - bufferutil - - utf-8-validate - '@ethersproject/random@5.7.0': dependencies: '@ethersproject/bytes': 5.7.0 @@ -13739,42 +13680,6 @@ snapshots: - bufferutil - utf-8-validate - ethers@5.7.2(bufferutil@4.0.8)(utf-8-validate@6.0.3): - dependencies: - '@ethersproject/abi': 5.7.0 - '@ethersproject/abstract-provider': 5.7.0 - '@ethersproject/abstract-signer': 5.7.0 - '@ethersproject/address': 5.7.0 - '@ethersproject/base64': 5.7.0 - '@ethersproject/basex': 5.7.0 - '@ethersproject/bignumber': 5.7.0 - '@ethersproject/bytes': 5.7.0 - '@ethersproject/constants': 5.7.0 - '@ethersproject/contracts': 5.7.0 - '@ethersproject/hash': 5.7.0 - '@ethersproject/hdnode': 5.7.0 - '@ethersproject/json-wallets': 5.7.0 - '@ethersproject/keccak256': 5.7.0 - '@ethersproject/logger': 5.7.0 - '@ethersproject/networks': 5.7.1 - '@ethersproject/pbkdf2': 5.7.0 - '@ethersproject/properties': 5.7.0 - '@ethersproject/providers': 5.7.2(bufferutil@4.0.8)(utf-8-validate@6.0.3) - '@ethersproject/random': 5.7.0 - '@ethersproject/rlp': 5.7.0 - '@ethersproject/sha2': 5.7.0 - '@ethersproject/signing-key': 5.7.0 - '@ethersproject/solidity': 5.7.0 - '@ethersproject/strings': 5.7.0 - '@ethersproject/transactions': 5.7.0 - '@ethersproject/units': 5.7.0 - '@ethersproject/wallet': 5.7.0 - '@ethersproject/web': 5.7.1 - '@ethersproject/wordlists': 5.7.0 - transitivePeerDependencies: - - bufferutil - - utf-8-validate - event-target-shim@5.0.1: {} eventemitter2@6.4.9: {} @@ -16936,11 +16841,6 @@ snapshots: optionalDependencies: bufferutil: 4.0.8 - ws@7.4.6(bufferutil@4.0.8)(utf-8-validate@6.0.3): - optionalDependencies: - bufferutil: 4.0.8 - utf-8-validate: 6.0.3 - ws@7.5.9(bufferutil@4.0.8): optionalDependencies: bufferutil: 4.0.8