feat: extend manage wallet with erc20 tokens

valory-xyz · Dec 20, 2024 · 05b0164 · 05b0164
1 parent 1fa178d
commit 05b0164
Show file tree

Hide file tree

Showing 7 changed files with 100 additions and 12 deletions.
diff --git a/frontend/components/MainPage/sections/AlertSections/LowFunds/FundsToActivate.tsx b/frontend/components/MainPage/sections/AlertSections/LowFunds/FundsToActivate.tsx
@@ -60,7 +60,7 @@ export const FundsToActivate = ({
       (token) => token !== TokenSymbol.OLAS && token !== nativeTokenSymbol,
     );
 
-    if (additionalTokens.length === 0) [];
+    if (additionalTokens.length === 0) return [];
 
     return additionalTokens.map((tokenSymbol) => {
       const token = serviceFundRequirements[homeChainId][tokenSymbol];

diff --git a/frontend/components/MainPage/sections/AlertSections/LowFunds/MainNeedsFunds.tsx b/frontend/components/MainPage/sections/AlertSections/LowFunds/MainNeedsFunds.tsx
@@ -29,6 +29,7 @@ export const MainNeedsFunds = () => {
     if (
       hasEnoughEthForInitialFunding &&
       hasEnoughOlasForInitialFunding &&
+      hasEnoughAdditionalTokensForInitialFunding &&
       !isInitialFunded
     ) {
       electronApi.store?.set?.(`isInitialFunded_${selectedAgentType}`, true);
@@ -38,6 +39,7 @@ export const MainNeedsFunds = () => {
     selectedAgentType,
     hasEnoughEthForInitialFunding,
     hasEnoughOlasForInitialFunding,
+    hasEnoughAdditionalTokensForInitialFunding,
     isInitialFunded,
   ]);
 

diff --git a/frontend/components/MainPage/sections/OlasBalanceSection.tsx b/frontend/components/MainPage/sections/OlasBalanceSection.tsx
@@ -26,7 +26,7 @@ const Balance = styled.span`
 `;
 
 export const MainOlasBalance = () => {
-  const { selectedService } = useServices();
+  const { selectedService, selectedAgentConfig } = useServices();
   const { isLoaded: isBalanceLoaded } = useBalanceContext();
   const { masterWalletBalances } = useMasterBalances();
   const { serviceStakedBalances, serviceWalletBalances } = useServiceBalances(
@@ -38,8 +38,11 @@ export const MainOlasBalance = () => {
   const displayedBalance = useMemo(() => {
     // olas across master wallets, safes and eoa
     const masterWalletOlasBalance = masterWalletBalances?.reduce(
-      (acc, { symbol, balance }) => {
-        if (symbol === TokenSymbol.OLAS) {
+      (acc, { symbol, balance, evmChainId }) => {
+        if (
+          selectedAgentConfig.requiresAgentSafesOn.includes(evmChainId) &&
+          symbol === TokenSymbol.OLAS
+        ) {
           return acc + Number(balance);
         }
         return acc;
@@ -49,8 +52,11 @@ export const MainOlasBalance = () => {
 
     // olas across all service wallets
     const serviceWalletOlasBalance = serviceWalletBalances?.reduce(
-      (acc, { symbol, balance }) => {
-        if (symbol === TokenSymbol.OLAS) {
+      (acc, { symbol, evmChainId, balance }) => {
+        if (
+          selectedAgentConfig.requiresAgentSafesOn.includes(evmChainId) &&
+          symbol === TokenSymbol.OLAS
+        ) {
           return acc + Number(balance);
         }
         return acc;
@@ -60,8 +66,10 @@ export const MainOlasBalance = () => {
 
     // olas staked across all services
     const serviceStakedOlasBalance = serviceStakedBalances?.reduce(
-      (acc, { olasBondBalance, olasDepositBalance }) => {
-        return acc + Number(olasBondBalance) + Number(olasDepositBalance);
+      (acc, { olasBondBalance, olasDepositBalance, evmChainId }) => {
+        if (selectedAgentConfig.requiresAgentSafesOn.includes(evmChainId)) {
+          return acc + Number(olasBondBalance) + Number(olasDepositBalance);
+        } else return acc;
       },
       0,
     );
@@ -73,7 +81,12 @@ export const MainOlasBalance = () => {
     ]);
 
     return balanceFormat(totalOlasBalance, 2);
-  }, [masterWalletBalances, serviceStakedBalances, serviceWalletBalances]);
+  }, [
+    selectedAgentConfig,
+    masterWalletBalances,
+    serviceStakedBalances,
+    serviceWalletBalances,
+  ]);
 
   return (
     <CardSection

diff --git a/frontend/components/YourWalletPage/YourAgent.tsx b/frontend/components/YourWalletPage/YourAgent.tsx
@@ -224,6 +224,17 @@ const YourAgentWalletBreakdown = () => {
     [serviceSafeBalances, evmHomeChainId],
   );
 
+  const serviceSafeErc20Balances = useMemo(
+    () =>
+      serviceSafeBalances?.filter(
+        ({ isNative, symbol, evmChainId }) =>
+          !isNative &&
+          symbol !== TokenSymbol.OLAS &&
+          evmChainId === evmHomeChainId,
+      ),
+    [serviceSafeBalances, evmHomeChainId],
+  );
+
   const serviceEoaNativeBalances = useMemo(
     () =>
       serviceEoaBalances?.filter(
@@ -266,6 +277,16 @@ const YourAgentWalletBreakdown = () => {
                 parentStyle={infoBreakdownParentStyle}
               />
             )}
+            {isArray(serviceSafeErc20Balances) && (
+              <InfoBreakdownList
+                list={serviceSafeErc20Balances.map((balance) => ({
+                  left: <strong>{balance.symbol}</strong>,
+                  leftClassName: 'text-sm',
+                  right: `${balanceFormat(balance.balance, 2)} ${balance.symbol}`,
+                }))}
+                parentStyle={infoBreakdownParentStyle}
+              />
+            )}
             {!isNil(serviceEoa) && (
               <InfoBreakdownList
                 list={[

diff --git a/frontend/components/YourWalletPage/index.tsx b/frontend/components/YourWalletPage/index.tsx
@@ -157,6 +157,57 @@ const MasterSafeNativeBalance = () => {
   );
 };
 
+const MasterSafeErc20Balances = () => {
+  const { evmHomeChainId, masterSafeAddress, middlewareChain } =
+    useYourWallet();
+  const { masterSafeBalances } = useMasterBalances();
+
+  const masterSafeErc20Balances = useMemo(() => {
+    if (isNil(masterSafeAddress)) return;
+    if (isNil(masterSafeBalances)) return;
+
+    return masterSafeBalances
+      .filter(({ walletAddress, evmChainId, symbol, isNative }) => {
+        return (
+          evmChainId === evmHomeChainId && // TODO: address multi chain, need to refactor as per product requirement
+          !isNative &&
+          symbol !== TokenSymbol.OLAS &&
+          walletAddress === masterSafeAddress
+        );
+      })
+      .reduce<{ [tokenSymbol: string]: number }>((acc, { balance, symbol }) => {
+        if (!acc[symbol]) acc[symbol] = 0;
+        acc[symbol] += balance;
+
+        return acc;
+      }, {});
+  }, [masterSafeBalances, masterSafeAddress, evmHomeChainId]);
+
+  if (!masterSafeErc20Balances) return null;
+
+  return (
+    <Flex vertical gap={8}>
+      {Object.entries(masterSafeErc20Balances).map(([symbol, balance]) => (
+        <InfoBreakdownList
+          key={symbol}
+          list={[
+            {
+              left: (
+                <Text strong>
+                  {symbol} ({capitalize(middlewareChain)})
+                </Text>
+              ),
+              leftClassName: 'text-light',
+              right: `${balanceFormat(balance, 2)} ${symbol}`,
+            },
+          ]}
+          parentStyle={infoBreakdownParentStyle}
+        />
+      ))}
+    </Flex>
+  );
+};
+
 const MasterEoaSignerNativeBalance = () => {
   const { masterEoa } = useMasterWalletContext();
   const { masterWalletBalances } = useMasterBalances();
@@ -223,6 +274,7 @@ export const YourWalletPage = () => {
             <Address />
             <OlasBalance />
             <MasterSafeNativeBalance />
+            <MasterSafeErc20Balances />
             <MasterEoaSignerNativeBalance />
             {selectedService && <YourAgentWallet />}
           </Container>

diff --git a/frontend/hooks/useFeatureFlag.ts b/frontend/hooks/useFeatureFlag.ts
@@ -49,7 +49,7 @@ const FEATURES_CONFIG = FeaturesConfigSchema.parse({
     'backup-via-safe': true,
   },
   [AgentType.Modius]: {
-    'manage-wallet': false,
+    'manage-wallet': true,
     'withdraw-funds': false,
     'last-transactions': false,
     'rewards-streak': false,

diff --git a/frontend/hooks/useNeedsFunds.ts b/frontend/hooks/useNeedsFunds.ts
@@ -113,7 +113,7 @@ export const useNeedsFunds = (stakingProgramId: Maybe<StakingProgramId>) => {
     return chainIds.every((chainId) => {
       const nativeTokenSymbol = getNativeTokenSymbol(chainId);
       const nativeTokenBalance =
-        balancesByChain[chainId][nativeTokenSymbol] || 0;
+        balancesByChain[chainId]?.[nativeTokenSymbol] || 0;
       const nativeTokenRequired =
         serviceFundRequirements[chainId]?.[nativeTokenSymbol] || 0;
 
@@ -132,7 +132,7 @@ export const useNeedsFunds = (stakingProgramId: Maybe<StakingProgramId>) => {
     const chainIds = Object.keys(serviceFundRequirements).map(Number);
 
     return chainIds.every((chainId) => {
-      const olasBalance = balancesByChain[chainId][TokenSymbol.OLAS] || 0;
+      const olasBalance = balancesByChain[chainId]?.[TokenSymbol.OLAS] || 0;
       const olasRequired =
         serviceFundRequirements[chainId]?.[TokenSymbol.OLAS] || 0;