✨ Select new RPC

components/wallet/profile/index.tsx

@@ -6,23 +6,30 @@ 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);
   const [explorer, setExplorer] = useLocalStorage<Explorer>(
     `${LOCAL_STORAGE_VERSION}-${EXPLORER_STORAGE_KEY}`,
     Explorer.SuiVision
   );
+  const [rpc, setRPC] = useLocalStorage<RpcEnum>(
+    `${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 = () => {
         <>
           <MenuProfile
             isOpen={isOpenProfile}
+            handleOpenRPC={handleOpenRPC}
             handleOpenSwitch={handleOpenAccount}
             handleCloseProfile={handleCloseProfile}
             handleOpenExplorer={handleOpenExplorer}
@@ -138,6 +158,15 @@ const Profile: FC = () => {
               handleCloseProfile={handleCloseProfile}
             />
           )}
+          {isOpenRPC && (
+            <MenuSwitchRPC
+              rpc={rpc}
+              isOpen={isOpenRPC}
+              handleRPC={setRPC}
+              onBack={handleCloseRPC}
+              handleCloseProfile={handleCloseProfile}
+            />
+          )}
           {isOpenExplorer && (
             <MenuExplorer
               explorer={explorer}

components/wallet/profile/menu-profile/index.tsx

@@ -15,6 +15,7 @@ import UserInfo from './user-info';
 
 const MenuProfile: FC<MenuProfileProps> = ({
   isOpen,
+  handleOpenRPC,
   handleOpenSwitch,
   handleCloseProfile,
   handleOpenExplorer,
@@ -33,6 +34,7 @@ const MenuProfile: FC<MenuProfileProps> = ({
       disconnect();
     },
     switchAccounts: handleOpenSwitch,
+    switchRPC: handleOpenRPC,
     changeExplorer: () => {
       handleOpenExplorer();
       handleCloseProfile();

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<ProfileMenuItemProps> = [
-  {
+  /*{
     name: 'activity',
     description: 'activity',
     Icon: ActivitySVG,
@@ -30,7 +23,7 @@ export const MENU_PROFILE_DATA: ReadonlyArray<ProfileMenuItemProps> = [
     Icon: ExternalSVG,
     hasBorder: false,
     disabled: false,
-  },
+  },*/
   {
     name: 'changeExplorer',
     description: 'Change explorer',
@@ -45,6 +38,13 @@ export const MENU_PROFILE_DATA: ReadonlyArray<ProfileMenuItemProps> = [
     hasBorder: false,
     disabled: false,
   },
+  {
+    name: 'switchRPC',
+    description: 'switch RPC',
+    Icon: AssetsSVG,
+    hasBorder: false,
+    disabled: false,
+  },
   {
     name: 'disconnect',
     description: 'disconnect',

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<Omit<MenuSwitchAccountHeaderProps, 'size'>> = ({
+  onBack,
+  handleCloseProfile,
+}) => (
+  <Box
+    gap="xs"
+    display="flex"
+    color="onSurface"
+    alignItems="center"
+    py={['m', 'm', 'm', 'l']}
+    px={['unset', 'unset', 'unset', 'l']}
+    justifyContent={[
+      'space-between',
+      'space-between',
+      'space-between',
+      'unset',
+    ]}
+  >
+    <Button
+      isIcon
+      variant="text"
+      p="0 !important"
+      onClick={onBack}
+      nHover={{
+        color: 'primary',
+        bg: 'transparent',
+      }}
+    >
+      <ArrowLeftSVG maxHeight="1rem" maxWidth="1rem" width="100%" />
+    </Button>
+    <Typography variant="title" size="small" textTransform="capitalize">
+      Choose an RPC
+    </Typography>
+    <Box display={['flex', 'flex', 'flex', 'none']} flexDirection="row-reverse">
+      <MenuButton handleClose={handleCloseProfile} />
+    </Box>
+  </Box>
+);
+
+export default MenuRPCHeader;

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<MenuRPCProps> = ({
+  rpc,
+  isOpen,
+  onBack,
+  handleRPC,
+  handleCloseProfile,
+}) => (
+  <Motion
+    right="0"
+    top={['0', '0', '0', '3rem']}
+    overflow="visible"
+    zIndex={1}
+    borderRadius="m"
+    position={['fixed', 'fixed', 'fixed', 'absolute']}
+    bg="container"
+    variants={wrapperVariants}
+    animate={isOpen ? 'open' : 'closed'}
+    initial={isOpen ? 'closed' : 'open'}
+    pointerEvents={isOpen ? 'auto' : 'none'}
+    textTransform="capitalize"
+    width={['100vw', '100vw', '100vw', '14.5rem']}
+    height={['100vh', '100vh', '100vh', 'unset']}
+    p={['xl', 'xl', 'xl', 'unset']}
+  >
+    <MenuRPCHeader handleCloseProfile={handleCloseProfile} onBack={onBack} />
+    {RPCS.map((item) => (
+      <ItemWrapper
+        key={v4()}
+        disabled={item === rpc}
+        onClick={() => handleRPC(item)}
+      >
+        <Box width="100%" display="flex">
+          <Box gap="s" display="flex" flexDirection="column">
+            <Box
+              gap="m"
+              display="flex"
+              alignItems="center"
+              justifyContent="center"
+            >
+              {item === rpc && (
+                <Box
+                  width="1rem"
+                  height="1rem"
+                  borderRadius="50%"
+                  display="flex"
+                  alignItems="center"
+                  justifyContent="center"
+                  border="1px solid"
+                  borderColor="success"
+                  color="success"
+                >
+                  <CheckmarkSVG
+                    maxHeight="0.438rem"
+                    maxWidth="0.438rem"
+                    width="100%"
+                  />
+                </Box>
+              )}
+              <Typography size="medium" variant="body">
+                {RPC_DISPLAY[item]}
+              </Typography>
+            </Box>
+          </Box>
+        </Box>
+      </ItemWrapper>
+    ))}
+  </Motion>
+);
+
+export default MenuSwitchRPC;

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;

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,
+  },
+};

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<PropsWithChildren> = ({ children }) => {
   const [updateNetwork, setUpdateNetwork] = useState({});
+  const currentRPC = useReadLocalStorage<RpcEnum>(
+    `${LOCAL_STORAGE_VERSION}-${RPC_KEY}`
+  );
 
   const network = useMemo(
     () =>
@@ -27,6 +21,19 @@ export const NetworkProvider: FC<PropsWithChildren> = ({ 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({});