From bf5b3c40c48fbd7d14fba635f825a333c4e10e18 Mon Sep 17 00:00:00 2001
From: Neka Artajaya <53235670+nekaartajaya@users.noreply.github.com>
Date: Tue, 28 Feb 2023 16:35:00 +0800
Subject: [PATCH] feat: switch network in modal staking reward (#111)

---
 .../molecules/Staked/UnclaimReward.tsx        | 18 ++++++--
 .../molecules/SwitchNetwork/index.tsx         | 46 +++++++++++++++----
 src/hooks/use-instances.hook.ts               |  2 +
 3 files changed, 54 insertions(+), 12 deletions(-)

diff --git a/src/components/molecules/Staked/UnclaimReward.tsx b/src/components/molecules/Staked/UnclaimReward.tsx
index b75f870..3de7ff8 100644
--- a/src/components/molecules/Staked/UnclaimReward.tsx
+++ b/src/components/molecules/Staked/UnclaimReward.tsx
@@ -12,6 +12,7 @@ import { PolkadotAccountList } from '../PolkadotAccountList';
 import { BN } from '@polkadot/util';
 import { IcMyriad } from 'public/icons';
 import { Currency } from 'src/interface/CurrencyInterface';
+import { Backdrop, CircularProgress } from '@mui/material';
 
 interface UnclaimRewardProps {
   instance: ServerListProps;
@@ -32,7 +33,7 @@ interface ShowWalletListProps {
 }
 
 export const UnclaimReward = (props: UnclaimRewardProps) => {
-  const { instance, onWithdrawReward } = props;
+  const { instance, onWithdrawReward, onChangeNetwork } = props;
   const { enablePolkadotExtension, getPolkadotAccounts } =
     usePolkadotExtension();
 
@@ -41,6 +42,7 @@ export const UnclaimReward = (props: UnclaimRewardProps) => {
   const [extensionInstalled, setExtensionInstalled] = useState(false);
   const [showAccountList, setShowAccountList] = useState<boolean>(false);
   const [estimateFee, setEstimateFee] = useState<string>('0');
+  const [loading, setLoading] = useState<boolean>(false);
 
   const hasReward = instance.rewards && instance.rewards.length > 0;
 
@@ -56,8 +58,9 @@ export const UnclaimReward = (props: UnclaimRewardProps) => {
     getEstimateFee();
   }, [getEstimateFee]);
 
-  const handleOpenModal = () => {
+  const handleOpenModal = async () => {
     setEstimateFee('0');
+    if (openModal) await handleChangeNetwork?.('myriad');
     setOpenModal(!openModal);
   };
 
@@ -97,6 +100,12 @@ export const UnclaimReward = (props: UnclaimRewardProps) => {
     handleOpenModal();
   };
 
+  const handleChangeNetwork = async (networkId: string) => {
+    setLoading(true);
+    await onChangeNetwork?.(networkId, instance);
+    setLoading(false);
+  };
+
   const showListWallet = (rewards?: Currency[], openModal = false) => {
     if (!rewards || (rewards && rewards.length === 0)) {
       return (
@@ -156,7 +165,7 @@ export const UnclaimReward = (props: UnclaimRewardProps) => {
           </div>
           <div className="flex items-center text-[14px] text-softGray mb-5">
             <div>Network : </div>
-            <SwitchNetwork handleSelect={() => null} />
+            <SwitchNetwork onChangeNetwork={handleChangeNetwork} />
           </div>
           <div className="mb-4">
             {showListWallet(instance.rewards, openModal)}
@@ -181,6 +190,9 @@ export const UnclaimReward = (props: UnclaimRewardProps) => {
         onSelect={handleSelectedSubstrateAccount}
         onClose={onCloseAccountList}
       />
+      <Backdrop style={{ zIndex: 1400, color: '#fff' }} open={loading}>
+        <CircularProgress style={{ color: '#7342CC' }} />
+      </Backdrop>
     </React.Fragment>
   );
 };
diff --git a/src/components/molecules/SwitchNetwork/index.tsx b/src/components/molecules/SwitchNetwork/index.tsx
index 130bcfb..85a74d4 100644
--- a/src/components/molecules/SwitchNetwork/index.tsx
+++ b/src/components/molecules/SwitchNetwork/index.tsx
@@ -1,18 +1,33 @@
 import { ChevronDownIcon } from '@heroicons/react/outline';
-import { Button, Menu, MenuItem, SvgIcon, Typography } from '@mui/material';
+import {
+  Backdrop,
+  Button,
+  CircularProgress,
+  Menu,
+  MenuItem,
+  SvgIcon,
+  Typography,
+} from '@mui/material';
 import Image from 'next/image';
 import { IcBackPrimary, IcDebio, IcMyriad } from 'public/icons';
 import React from 'react';
 import ListNetwork from 'src/components/atoms/ListNetwork';
 import ListWallet from 'src/components/atoms/ListWallet';
+import { ShimerComponent } from 'src/components/organisms/ServerList/Shimer';
+import { InstanceType, useInstances } from 'src/hooks/use-instances.hook';
+import { ServerListProps } from 'src/interface/ServerListInterface';
+import ShowIf from '../common/show-if.component';
 
 export type NetworkOptionProps = {
-  handleSelect: (network: any) => void;
+  onChangeNetwork?: (network: string) => Promise<void>;
 };
 
-export const SwitchNetwork: React.FC<NetworkOptionProps> = ({
-  handleSelect,
-}) => {
+export const SwitchNetwork: React.FC<NetworkOptionProps> = (props) => {
+  const { onChangeNetwork } = props;
+  const { currentNetworkId, setCurrentNetworkId } = useInstances(
+    InstanceType.OWNED,
+  );
+
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
 
   const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -23,6 +38,12 @@ export const SwitchNetwork: React.FC<NetworkOptionProps> = ({
     setAnchorEl(null);
   };
 
+  const handleChangeNetwork = (networkId: string) => {
+    onChangeNetwork?.(networkId);
+    setCurrentNetworkId(networkId);
+    handleClose();
+  };
+
   return (
     <>
       <Button
@@ -39,7 +60,9 @@ export const SwitchNetwork: React.FC<NetworkOptionProps> = ({
         size="small"
         color="inherit"
       >
-        <div className="text-[14px] capitalize text-[#12130F] ">Myriad</div>
+        <div className="text-[14px] capitalize text-[#12130F] ">
+          {currentNetworkId}
+        </div>
       </Button>
       <Menu
         anchorEl={anchorEl}
@@ -48,11 +71,16 @@ export const SwitchNetwork: React.FC<NetworkOptionProps> = ({
         open={Boolean(anchorEl)}
         onClose={handleClose}
       >
-        <MenuItem>
-          <div className="h-full w-2 bg-primary absolute left-0 rounded-r"></div>
+        <MenuItem onClick={() => handleChangeNetwork('myriad')}>
+          {currentNetworkId === 'myriad' && (
+            <div className="h-full w-2 bg-primary absolute left-0 rounded-r"></div>
+          )}
           <ListNetwork image={IcMyriad} label="Myriad" />
         </MenuItem>
-        <MenuItem>
+        <MenuItem onClick={() => handleChangeNetwork('debio')}>
+          {currentNetworkId === 'debio' && (
+            <div className="h-full w-2 bg-primary absolute left-0 rounded-r"></div>
+          )}
           <ListNetwork image={IcDebio} label="Debio" />
         </MenuItem>
       </Menu>
diff --git a/src/hooks/use-instances.hook.ts b/src/hooks/use-instances.hook.ts
index ac8f610..cfaeb01 100644
--- a/src/hooks/use-instances.hook.ts
+++ b/src/hooks/use-instances.hook.ts
@@ -394,5 +394,7 @@ export const useInstances = (
     balance,
     totalStaked,
     fetchBalance,
+    currentNetworkId,
+    setCurrentNetworkId,
   };
 };