feat: refresh solana balances

Author: nicolastmaia

src/components/AccountList/index.css

@@ -298,3 +298,25 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+.token-assets-title {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.token-assets-title > .title {
+  color: #ffffff !important;
+}
+
+.token-assets-title > .refresh.disabled {
+  color: #5a5a5afe !important;
+  cursor: not-allowed;
+}
+
+.token-assets-title > .refresh {
+  color: #9fbfe5fe !important;
+  cursor: pointer;
+}

src/components/AccountList/index.tsx

@@ -11,6 +11,8 @@ import { ReactComponent as SolanaToken } from './assets/solana-token.svg';
 import { ReactComponent as SpToken } from './assets/sp-token.svg';
 import PassportInfo from '../PassportInfo';
 import SelectActivePassportPopup from '../SelectActivePassportPopup';
+import { refreshSolanaBalances } from '../../services/wallets';
+import { CoNET_Data } from '../../utils/globals';
 
 interface AccountListProps {
   showMainWallet?: boolean;
@@ -21,11 +23,12 @@ interface AccountListProps {
 
 export default function AccountList({ showMainWallet = true, simplifiedView = false, spInUsd = 0, solInUsd = 0 }: AccountListProps) {
   const [openAccountList, setOpenAccountList] = useState<string[]>([]);
-  const { profiles, activePassport } = useDaemonContext();
+  const { profiles, activePassport, setProfiles } = useDaemonContext();
 
   const [mainAccountAddressCopied, setMainAccountAddressCopied] = useState(false);
   const [solanaAccountAddressCopied, setSolanaAccountAddressCopied] = useState(false);
   const [passportToChange, setPassportToChange] = useState();
+  const [isRefreshingSolanaBalances, setIsRefreshingSolanaBalances] = useState(false);
 
   const { isSelectPassportPopupOpen, setIsSelectPassportPopupOpen } = useDaemonContext();
 
@@ -39,12 +42,12 @@ export default function AccountList({ showMainWallet = true, simplifiedView = fa
     e.preventDefault();
 
     if (account === 'main') {
-      navigator.clipboard.writeText(profiles?.[0].keyID);
+      navigator.clipboard.writeText(profiles?.[0]?.keyID);
       setMainAccountAddressCopied(true);
     }
 
     if (account === 'solana') {
-      navigator.clipboard.writeText(profiles?.[1].keyID);
+      navigator.clipboard.writeText(profiles?.[1]?.keyID);
       setSolanaAccountAddressCopied(true);
     }
 
@@ -54,6 +57,40 @@ export default function AccountList({ showMainWallet = true, simplifiedView = fa
     }, 2000)
   }
 
+  async function handleRefreshSolanaBalances() {
+    setIsRefreshingSolanaBalances(true);
+
+    try {
+      await refreshSolanaBalances(profiles?.[1]);
+
+      const tmpData = CoNET_Data;
+
+      if (!tmpData) {
+        return;
+      }
+
+      tmpData.profiles[1] = profiles?.[1];
+
+      setProfiles(tmpData.profiles);
+    } catch (ex) {
+      console.log(ex);
+    }
+
+    setTimeout(() => setIsRefreshingSolanaBalances(false), 2000);
+  }
+
+  const renderRefreshButton = () => {
+    if (!profiles?.[1]?.keyID) {
+      return <p className='refresh disabled'>Refresh</p>
+    }
+
+    if (isRefreshingSolanaBalances) {
+      return <p className='refresh'>Refreshing...</p>
+    }
+
+    return <p className='refresh' onClick={handleRefreshSolanaBalances}>Refresh</p>
+  }
+
   return (
     <div className="account-list">
       {showMainWallet &&
@@ -88,7 +125,9 @@ export default function AccountList({ showMainWallet = true, simplifiedView = fa
           </div>
           <div className="info-card">
             <div className="info-wrapper">
-              <p>Token assets</p>
+              <div className='token-assets-title'>
+                <p className='title'>Token assets</p>
+              </div>
               <div>
                 <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
                   <ConetToken />
@@ -193,7 +232,10 @@ export default function AccountList({ showMainWallet = true, simplifiedView = fa
 
         <div className="info-card">
           <div className="info-wrapper">
-            <p>Token assets</p>
+            <div className='token-assets-title'>
+              <p className='title'>Token assets</p>
+              {renderRefreshButton()}
+            </div>
             <div>
               <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
                 <SpToken />
@@ -216,6 +258,7 @@ export default function AccountList({ showMainWallet = true, simplifiedView = fa
                 )
               }
             </div>
+
             <div>
               <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
                 <SolanaToken />

src/services/listeners.ts

@@ -360,4 +360,4 @@ const scan_spl_balance = async (walletAddr: string, tokenAddress: string) => {
   }
 };
 
-export { listenProfileVer };
+export { listenProfileVer, scanSolanaSol, scanSolanaSp };

src/services/wallets.ts

@@ -18,6 +18,7 @@ import * as Bip39 from "bip39";
 
 import { Keypair } from "@solana/web3.js";
 import Bs58 from "bs58";
+import { scanSolanaSol, scanSolanaSp } from "./listeners";
 
 const PouchDB = require("pouchdb").default;
 
@@ -585,6 +586,61 @@ const getPassportsInfo = async (
   }
 };
 
+const refreshSolanaBalances = async (solanaProfile: profile) => {
+  try {
+    const [sol, sp] = await Promise.all([
+      scanSolanaSol(solanaProfile.keyID),
+      scanSolanaSp(solanaProfile.keyID),
+    ]);
+
+    if (solanaProfile.tokens?.sol) {
+      solanaProfile.tokens.sol.balance = sol === false ? "" : sol?.toFixed(6);
+    } else {
+      solanaProfile.tokens.sol = {
+        balance: sol === false ? "" : sol?.toFixed(6),
+        network: "Solana Mainnet",
+        decimal: 18,
+        contract: "",
+        name: "sol",
+      };
+    }
+
+    if (solanaProfile.tokens?.sp) {
+      solanaProfile.tokens.sp.balance =
+        sp === false ? "" : parseFloat(sp).toFixed(6);
+    } else {
+      solanaProfile.tokens.sp = {
+        balance: sp === false ? "" : parseFloat(sp).toFixed(6),
+        network: "Solana Mainnet",
+        decimal: 18,
+        contract: "",
+        name: "sp",
+      };
+    }
+
+    const temp = CoNET_Data;
+
+    if (!temp) {
+      return false;
+    }
+
+    temp.profiles[1] = {
+      ...temp.profiles[1],
+      tokens: {
+        ...temp.profiles[1].tokens,
+        sp: solanaProfile.tokens.sp,
+        sol: solanaProfile.tokens.sol,
+      },
+    };
+
+    setCoNET_Data(temp);
+
+    return true;
+  } catch (ex) {
+    return false;
+  }
+};
+
 export {
   createOrGetWallet,
   createGPGKey,
@@ -596,4 +652,5 @@ export {
   getFaucet,
   getVpnTimeUsed,
   getPassportsInfoForProfile,
+  refreshSolanaBalances,
 };