Chore/27 updates (#206)

* show/hide networks * rewards feedback * remove deposited/withdrawn --------- Co-authored-by: jmzwar <[email protected]>
Synthetixio · Mar 27, 2024 · bef2239 · bef2239
1 parent 7db0065
commit bef2239
Show file tree

Hide file tree

Showing 8 changed files with 110 additions and 59 deletions.
diff --git a/liquidity/lib/useRewards/useRewards.ts b/liquidity/lib/useRewards/useRewards.ts
@@ -117,39 +117,38 @@ export function useRewards(
         }),
       ]);
 
-      const distributorResult = distributors.map(
-        ({ id: address, total_distributed, rewards_distributions }, i) => {
-          const name = ifaceRD.decodeFunctionResult(
-            'name',
-            distributorReturnData[i * 2]
-          )[0] as string;
-          const token = ifaceRD.decodeFunctionResult(
-            'token',
-            distributorReturnData[i * 2 + 1]
-          )[0] as string;
+      const distributorResult = distributors.map(({ id: address, rewards_distributions }, i) => {
+        const name = ifaceRD.decodeFunctionResult(
+          'name',
+          distributorReturnData[i * 2]
+        )[0] as string;
+        const token = ifaceRD.decodeFunctionResult(
+          'token',
+          distributorReturnData[i * 2 + 1]
+        )[0] as string;
 
-          let duration = 0;
-          if (rewards_distributions.length > 0) {
-            duration = parseInt(rewards_distributions[0].duration);
-          }
+        let duration = 0;
 
-          const lifetimeClaimed = historicalData[i].data.rewardsClaimeds.reduce(
-            (acc: number, item: { amount: string; id: string }) => {
-              return (acc += parseInt(item.amount));
-            },
-            0
-          );
-
-          return {
-            address,
-            name: name,
-            token: token,
-            duration,
-            total: total_distributed,
-            lifetimeClaimed,
-          };
+        if (rewards_distributions.length > 0) {
+          duration = parseInt(rewards_distributions[0].duration);
         }
-      );
+
+        const lifetimeClaimed = historicalData[i].data.rewardsClaimeds.reduce(
+          (acc: number, item: { amount: string; id: string }) => {
+            return (acc += parseInt(item.amount));
+          },
+          0
+        );
+
+        return {
+          address,
+          name: name,
+          token: token,
+          duration,
+          total: rewards_distributions[0].amount, // Take the latest amount
+          lifetimeClaimed,
+        };
+      });
 
       const { returnData: ercReturnData } = await Multicall3.callStatic.aggregate(
         distributorResult.flatMap(({ token }) => [
@@ -235,23 +234,6 @@ export function useRewards(
         (a, b) => b.claimableAmount.toNumber() - a.claimableAmount.toNumber()
       );
 
-      // TODO: Fix issue with multicall
-      // const calls = distributorResult
-      //   .filter((item) => item.amount.gt(0))
-      //   .map(({ address }) => ({
-      //     target: CoreProxy.address,
-      //     callData: CoreProxy.interface.encodeFunctionData('claimRewards', [
-      //       BigNumber.from(accountId),
-      //       BigNumber.from(poolId),
-      //       collateralAddress,
-      //       address,
-      //     ]),
-      //   }));
-      // const response = await Multicall3.callStatic.aggregate(calls);
-      // const decoded = response.map(
-      //   (bytes: BytesLike) => CoreProxy.interface.decodeFunctionResult('claimRewards', bytes)[0]
-      // );
-
       return RewardsResponseSchema.parse(sortedBalances);
     },
   });

diff --git a/liquidity/ui/src/components/Rewards/RewardsRow.tsx b/liquidity/ui/src/components/Rewards/RewardsRow.tsx
@@ -22,7 +22,6 @@ interface RewardsRowInterface {
 
 export const RewardsRow = ({
   symbol,
-  projectedAmount,
   frequency,
   claimableAmount,
   lifetimeClaimed,
@@ -85,7 +84,7 @@ export const RewardsRow = ({
                   fontWeight={500}
                   lineHeight="20px"
                 >
-                  <Amount value={wei(readOnly ? totalAmount : projectedAmount)} />
+                  <Amount value={wei(totalAmount)} />
                   {` ${symbol}`}
                 </Text>
               </Tooltip>

diff --git a/liquidity/ui/src/hooks/index.ts b/liquidity/ui/src/hooks/index.ts
@@ -0,0 +1 @@
+export * from './useLocalStorage';
diff --git a/liquidity/ui/src/hooks/useLocalStorage.ts b/liquidity/ui/src/hooks/useLocalStorage.ts
@@ -0,0 +1,36 @@
+import { useState } from 'react';
+
+export const set = (key: string, value: any) => {
+  if (typeof window !== 'undefined') {
+    window.localStorage.setItem(key, JSON.stringify(value));
+  }
+};
+
+export function get<T>(key: string): T | null {
+  if (typeof window !== 'undefined') {
+    const item = window.localStorage.getItem(key);
+    try {
+      if (item != null) {
+        return JSON.parse(item);
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  }
+  return null;
+}
+
+export function useLocalStorage<T>(key: string, initialValue: T) {
+  const [storedValue, setStoredValue] = useState<T>(() => {
+    const item = get<T>(key);
+    return item != null ? item : initialValue;
+  });
+
+  const setValue = (value: T) => {
+    const valueToStore = value instanceof Function ? value(storedValue) : value;
+    setStoredValue(valueToStore);
+    set(key, valueToStore);
+  };
+
+  return [storedValue, setValue] as const;
+}
diff --git a/liquidity/ui/src/layouts/Default/NetworkController.tsx b/liquidity/ui/src/layouts/Default/NetworkController.tsx
@@ -1,15 +1,29 @@
 import { useEffect } from 'react';
-import { Button, Flex, Menu, MenuButton, MenuItem, MenuList, Text } from '@chakra-ui/react';
+import {
+  Button,
+  Flex,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  MenuOptionGroup,
+  Switch,
+  Text,
+} from '@chakra-ui/react';
 import { ChevronDown, ChevronUp, WalletIcon } from '@snx-v3/icons';
 import { NetworkIcon, useNetwork, useWallet } from '@snx-v3/useBlockchain';
 import { prettyString } from '@snx-v3/format';
 
 import { networks } from '../../utils/onboard';
+import { useLocalStorage } from '../../hooks';
+import { LOCAL_STORAGE_KEYS } from '../../utils/constants';
 
 export function NetworkController() {
   const { activeWallet, walletsInfo, connect, disconnect } = useWallet();
   const { network: activeNetwork, setNetwork } = useNetwork();
 
+  const [showTestnets, setShowTestnets] = useLocalStorage(LOCAL_STORAGE_KEYS.SHOW_TESTNETS, false);
+
   useEffect(() => {
     // Check if wallet preference is stored in local storage
     if (!walletsInfo) {
@@ -64,6 +78,7 @@ export function NetworkController() {
             </MenuButton>
             <MenuList>
               {networks.map(({ id, label }) => {
+                if ((id === 84532 || id === 11155111) && !showTestnets) return null;
                 return (
                   <MenuItem key={`${id}`} onClick={() => setNetwork(id)}>
                     <NetworkIcon networkId={id} />
@@ -73,6 +88,21 @@ export function NetworkController() {
                   </MenuItem>
                 );
               })}
+              <MenuOptionGroup>
+                <Flex py={4} px={3} alignItems="center" justifyContent="space-between">
+                  <Text fontSize="14px" fontFamily="heading" lineHeight="20px">
+                    Show Testnets
+                  </Text>
+                  <Switch
+                    mr={2}
+                    size="sm"
+                    color="gray.900"
+                    colorScheme="gray"
+                    isChecked={showTestnets}
+                    onChange={() => setShowTestnets(!showTestnets)}
+                  />
+                </Flex>
+              </MenuOptionGroup>
             </MenuList>
           </>
         )}

diff --git a/liquidity/ui/src/pages/Pool/MarketSection.tsx b/liquidity/ui/src/pages/Pool/MarketSection.tsx
@@ -13,7 +13,7 @@ import {
   Skeleton,
 } from '@chakra-ui/react';
 import { PoolType, usePoolData } from '@snx-v3/usePoolData';
-import { formatNumberToUsd, formatPercent } from '@snx-v3/formatters';
+import { formatPercent } from '@snx-v3/formatters';
 import { useParams } from '@snx-v3/useParams';
 import { useMarketNamesById } from '@snx-v3/useMarketNamesById';
 import { BorderBox } from '@snx-v3/BorderBox';
@@ -93,8 +93,8 @@ export function MarketSectionUi({
               <Tr>
                 <StyledTh>Market</StyledTh>
                 <StyledTh>Pool Allocation</StyledTh>
-                <StyledTh>Total Deposited</StyledTh>
-                <StyledTh>Total Withdrawn</StyledTh>
+                {/* <StyledTh>Total Deposited</StyledTh>
+                <StyledTh>Total Withdrawn</StyledTh> */}
               </Tr>
             </Thead>
             <Tbody>
@@ -133,17 +133,17 @@ export function MarketSectionUi({
                         )}
                       </StyledTd>
                       {/* Total Deposited */}
-                      <StyledTd isLastItem={isLastItem} data-testid="market growth">
+                      {/* <StyledTd isLastItem={isLastItem} data-testid="market growth">
                         <Text fontSize="sm" display="block" color="gray.50">
                           {formatNumberToUsd(market.usd_deposited.toNumber())}
                         </Text>
-                      </StyledTd>
+                      </StyledTd> */}
                       {/* Total Withdrawn */}
-                      <StyledTd isLastItem={isLastItem}>
+                      {/* <StyledTd isLastItem={isLastItem}>
                         <Text fontSize="sm" display="block" color="gray.50">
                           {formatNumberToUsd(market.usd_withdrawn.toNumber())}
                         </Text>
-                      </StyledTd>
+                      </StyledTd> */}
                     </Tr>
                   );
                 })

diff --git a/liquidity/ui/src/utils/constants.ts b/liquidity/ui/src/utils/constants.ts
@@ -0,0 +1,3 @@
+export const LOCAL_STORAGE_KEYS = {
+  SHOW_TESTNETS: 'SHOW_TESTNETS',
+};
diff --git a/liquidity/ui/src/utils/onboard.ts b/liquidity/ui/src/utils/onboard.ts
@@ -8,8 +8,8 @@ import coinbaseModule from '@web3-onboard/coinbase';
 import { init } from '@web3-onboard/react';
 
 // LP App Supported Networks
-// MAINNET, SEPOLIA, BASE, BASE SEPOLIA, OPTIMISM, OPTIMISM SEPOLIA, ARBITRUM, ARBITRUM SEPOLIA
-const supportedNetworks = [1, 11155111, 8453, 84532, 10, 11155420, 42161, 421614];
+// MAINNET, SEPOLIA, BASE, BASE SEPOLIA,
+const supportedNetworks = [1, 11155111, 8453, 84532];
 
 // Filter networks to only supported ones
 export const networks = NETWORKS.filter((n) => supportedNetworks.includes(n.id)).map((n) => ({