diff --git a/components/wallet/profile/index.tsx b/components/wallet/profile/index.tsx index f0186384..f194276f 100644 --- a/components/wallet/profile/index.tsx +++ b/components/wallet/profile/index.tsx @@ -6,16 +6,19 @@ import { useLocalStorage } from 'usehooks-ts'; import Avatar from '@/components/account-info/avatar'; import { LOCAL_STORAGE_VERSION } from '@/constants'; import { Explorer, EXPLORER_STORAGE_KEY } from '@/constants/explorer'; +import { RPC_KEY, RpcEnum } from '@/constants/rpc'; import useClickOutsideListenerRef from '@/hooks/use-click-outside-listener-ref'; import { useIsFirstRender } from '@/hooks/use-is-first-render'; import MenuExplorer from './menu-explorer'; import MenuProfile from './menu-profile'; import MenuSwitchAccount from './menu-switch-account'; +import MenuSwitchRPC from './menu-switch-rpc'; const BOX_ID = 'wallet-box'; const Profile: FC = () => { + const [isOpenRPC, setIsOpenRPC] = useState(false); const [isOpenProfile, setIsOpenProfile] = useState(false); const [isOpenAccount, setIsOpenAccount] = useState(false); const [isOpenExplorer, setIsOpenExplorer] = useState(false); @@ -23,6 +26,10 @@ const Profile: FC = () => { `${LOCAL_STORAGE_VERSION}-${EXPLORER_STORAGE_KEY}`, Explorer.SuiVision ); + const [rpc, setRPC] = useLocalStorage( + `${LOCAL_STORAGE_VERSION}-${RPC_KEY}`, + RpcEnum.shinami + ); const [menuIsDropdown, setMenuIsDropdown] = useState( isOpenProfile || isOpenAccount ); @@ -62,6 +69,11 @@ const Profile: FC = () => { setIsOpenAccount(true); }; + const handleOpenRPC = () => { + handleCloseProfile(); + setIsOpenRPC(true); + }; + const handleCloseAccount = () => { setIsOpenAccount(false); }; @@ -73,12 +85,19 @@ const Profile: FC = () => { const handleCloseExplorer = () => { setIsOpenExplorer(false); + setIsOpenProfile(false); + }; + + const handleCloseRPC = () => { + setIsOpenRPC(false); setIsOpenProfile(true); }; const handleCloseAll = () => { + handleCloseRPC(); handleCloseAccount(); handleCloseProfile(); + handleCloseExplorer(); }; return ( @@ -127,6 +146,7 @@ const Profile: FC = () => { <> { handleCloseProfile={handleCloseProfile} /> )} + {isOpenRPC && ( + + )} {isOpenExplorer && ( = ({ isOpen, + handleOpenRPC, handleOpenSwitch, handleCloseProfile, handleOpenExplorer, @@ -33,6 +34,7 @@ const MenuProfile: FC = ({ disconnect(); }, switchAccounts: handleOpenSwitch, + switchRPC: handleOpenRPC, changeExplorer: () => { handleOpenExplorer(); handleCloseProfile(); diff --git a/components/wallet/profile/menu-profile/menu.data.ts b/components/wallet/profile/menu-profile/menu.data.ts index 2b044423..c363ea33 100644 --- a/components/wallet/profile/menu-profile/menu.data.ts +++ b/components/wallet/profile/menu-profile/menu.data.ts @@ -1,16 +1,9 @@ -import { - ActivitySVG, - AssetsSVG, - ExternalSVG, - GlobeSVG, - LogoutSVG, - SwitchSVG, -} from '@/components/svg'; +import { AssetsSVG, GlobeSVG, LogoutSVG, SwitchSVG } from '@/components/svg'; import { ProfileMenuItemProps } from '../profile.types'; export const MENU_PROFILE_DATA: ReadonlyArray = [ - { + /*{ name: 'activity', description: 'activity', Icon: ActivitySVG, @@ -30,7 +23,7 @@ export const MENU_PROFILE_DATA: ReadonlyArray = [ Icon: ExternalSVG, hasBorder: false, disabled: false, - }, + },*/ { name: 'changeExplorer', description: 'Change explorer', @@ -45,6 +38,13 @@ export const MENU_PROFILE_DATA: ReadonlyArray = [ hasBorder: false, disabled: false, }, + { + name: 'switchRPC', + description: 'switch RPC', + Icon: AssetsSVG, + hasBorder: false, + disabled: false, + }, { name: 'disconnect', description: 'disconnect', diff --git a/components/wallet/profile/menu-switch-rpc/header.tsx b/components/wallet/profile/menu-switch-rpc/header.tsx new file mode 100644 index 00000000..0c87a0de --- /dev/null +++ b/components/wallet/profile/menu-switch-rpc/header.tsx @@ -0,0 +1,48 @@ +import { Box, Button, Typography } from '@interest-protocol/ui-kit'; +import { FC } from 'react'; + +import { ArrowLeftSVG } from '@/svg'; + +import MenuButton from '../../menu-button'; +import { MenuSwitchAccountHeaderProps } from '../profile.types'; + +const MenuRPCHeader: FC> = ({ + onBack, + handleCloseProfile, +}) => ( + + + + Choose an RPC + + + + + +); + +export default MenuRPCHeader; diff --git a/components/wallet/profile/menu-switch-rpc/index.tsx b/components/wallet/profile/menu-switch-rpc/index.tsx new file mode 100644 index 00000000..f49362b8 --- /dev/null +++ b/components/wallet/profile/menu-switch-rpc/index.tsx @@ -0,0 +1,82 @@ +import { Box, Motion, Typography } from '@interest-protocol/ui-kit'; +import { FC } from 'react'; +import { v4 } from 'uuid'; + +import { CheckmarkSVG } from '@/components/svg'; +import { wrapperVariants } from '@/constants'; +import { RPC_DISPLAY, RPCS } from '@/constants/rpc'; + +import ItemWrapper from '../../../menu-mobile/menu-settings/item-wrapper'; +import { MenuRPCProps } from '../profile.types'; +import MenuRPCHeader from './header'; + +const MenuSwitchRPC: FC = ({ + rpc, + isOpen, + onBack, + handleRPC, + handleCloseProfile, +}) => ( + + + {RPCS.map((item) => ( + handleRPC(item)} + > + + + + {item === rpc && ( + + + + )} + + {RPC_DISPLAY[item]} + + + + + + ))} + +); + +export default MenuSwitchRPC; diff --git a/components/wallet/profile/profile.types.ts b/components/wallet/profile/profile.types.ts index eadde108..b1fc3a24 100644 --- a/components/wallet/profile/profile.types.ts +++ b/components/wallet/profile/profile.types.ts @@ -2,10 +2,12 @@ import { FC } from 'react'; import { SVGProps } from '@/components/svg/svg.types'; import { Explorer } from '@/constants'; +import { RpcEnum } from '@/constants/rpc'; export interface MenuProfileProps { isOpen: boolean; handleOpenSwitch: () => void; + handleOpenRPC: () => void; handleCloseProfile: () => void; handleOpenExplorer: () => void; } @@ -25,14 +27,16 @@ export interface MenuSwitchAccountProps { handleCloseProfile: () => void; } -export interface MenuExplorerProps { - isOpen: boolean; - onBack: () => void; +export interface MenuExplorerProps extends MenuSwitchAccountProps { explorer: Explorer; - handleCloseProfile: () => void; handleExplorer: (explorer: Explorer) => void; } +export interface MenuRPCProps extends MenuSwitchAccountProps { + rpc: RpcEnum; + handleRPC: (rpc: RpcEnum) => void; +} + export interface MenuSwitchAccountHeaderProps { onBack: () => void; handleCloseProfile: () => void; diff --git a/constants/rpc.ts b/constants/rpc.ts new file mode 100644 index 00000000..a51bed9c --- /dev/null +++ b/constants/rpc.ts @@ -0,0 +1,22 @@ +import { Network } from './dapp'; + +export const RPC_KEY = 'sui-coins-rpc'; + +export enum RpcEnum { + shinami = 'shinami', +} + +export const RPCS = [RpcEnum.shinami]; + +export const RPC_DISPLAY = { + [RpcEnum.shinami]: 'Shinami', +}; + +export const RPC_LIST = { + [Network.TESTNET]: { + [RpcEnum.shinami]: process.env.NEXT_PUBLIC_SUI_TESTNET_RPC_URL, + }, + [Network.MAINNET]: { + [RpcEnum.shinami]: process.env.NEXT_PUBLIC_SUI_MAINNET_RPC_URL, + }, +}; diff --git a/context/network/index.tsx b/context/network/index.tsx index 351d14ca..df87581b 100644 --- a/context/network/index.tsx +++ b/context/network/index.tsx @@ -1,24 +1,18 @@ import { createNetworkConfig, SuiClientProvider } from '@mysten/dapp-kit'; import { getFullnodeUrl } from '@mysten/sui/client'; import { FC, PropsWithChildren, useMemo, useState } from 'react'; +import { useReadLocalStorage } from 'usehooks-ts'; -import { Network } from '@/constants'; +import { LOCAL_STORAGE_VERSION, Network } from '@/constants'; +import { RPC_KEY, RPC_LIST, RpcEnum } from '@/constants/rpc'; const LOCAL_NETWORK_KEY = 'suicoins:network'; -const { networkConfig } = createNetworkConfig({ - [Network.TESTNET]: { - url: - process.env.NEXT_PUBLIC_SUI_TESTNET_RPC_URL || getFullnodeUrl('testnet'), - }, - [Network.MAINNET]: { - url: - process.env.NEXT_PUBLIC_SUI_MAINNET_RPC_URL || getFullnodeUrl('mainnet'), - }, -}); - export const NetworkProvider: FC = ({ children }) => { const [updateNetwork, setUpdateNetwork] = useState({}); + const currentRPC = useReadLocalStorage( + `${LOCAL_STORAGE_VERSION}-${RPC_KEY}` + ); const network = useMemo( () => @@ -27,6 +21,19 @@ export const NetworkProvider: FC = ({ children }) => { [updateNetwork] ); + const { networkConfig } = createNetworkConfig({ + [Network.TESTNET]: { + url: + RPC_LIST[network][currentRPC || RpcEnum.shinami] || + getFullnodeUrl('testnet'), + }, + [Network.MAINNET]: { + url: + RPC_LIST[network][currentRPC || RpcEnum.shinami] || + getFullnodeUrl('mainnet'), + }, + }); + const changeNetwork = (network: Network) => { window.localStorage.setItem(LOCAL_NETWORK_KEY, network); setUpdateNetwork({});