Remove incorrect account from url (#95)

* Remove incorrect account from url * Fix the Base icon * Fix for accounts (remove placeholder data) * Group all rewards by symbol * svgo
Synthetixio · Dec 12, 2024 · 0c53acd · 0c53acd
1 parent eb30e2e
commit 0c53acd
Show file tree

Hide file tree

Showing 8 changed files with 70 additions and 81 deletions.
diff --git a/liquidity/components/icons/BaseIcon/BaseIcon.tsx b/liquidity/components/icons/BaseIcon/BaseIcon.tsx
@@ -1,20 +1,6 @@
-import { Icon, IconProps } from '@chakra-ui/react';
+import { Image } from '@chakra-ui/react';
+import icon from './icon.svg';
 
-export const BaseIcon = ({
-  width = '24px',
-  height = '24px',
-  fill = '#0052FF',
-  ...props
-}: IconProps) => {
-  return (
-    <Icon width={width} height={height} viewBox="0 0 24 24" {...props}>
-      <circle cx="73" cy="73" r="73" fill="#0052FF" />
-      <g width="24" height="24" fill="white">
-        <path
-          d="M11.9791 24C18.618 24 24 18.6274 24 12C24 5.37257 18.618 0 11.9791 0C5.6804 0 0.513182 4.8359 0 10.9913H15.8889V13.0087H8.6297e-08C0.513182 19.1641 5.6804 24 11.9791 24Z"
-          fill={fill as string}
-        />
-      </g>
-    </Icon>
-  );
-};
+export function BaseIcon({ ...props }) {
+  return <Image src={icon} alt="Base" {...props} />;
+}
diff --git a/liquidity/components/icons/BaseIcon/icon.svg b/liquidity/components/icons/BaseIcon/icon.svg
diff --git a/liquidity/lib/useAccounts/useAccounts.ts b/liquidity/lib/useAccounts/useAccounts.ts
@@ -58,7 +58,6 @@ export function useAccounts() {
 
       return accounts.map((accountId) => accountId.toString());
     },
-    placeholderData: [],
   });
 }
 

diff --git a/liquidity/lib/useCollateralTypes/useCollateralTypes.ts b/liquidity/lib/useCollateralTypes/useCollateralTypes.ts
@@ -105,7 +105,6 @@ export function useCollateralTypes(includeDelegationOff = false, customNetwork?:
     },
     // one hour in ms
     staleTime: 3_600_000,
-    placeholderData: [],
   });
 }
 

diff --git a/liquidity/lib/useRewards/useRewards.ts b/liquidity/lib/useRewards/useRewards.ts
@@ -161,9 +161,7 @@ export function useRewards({
         })
         .filter((info) => info !== undefined);
       log('availableRewards', availableRewards);
-      return availableRewards.sort(
-        (a, b) => b.claimableAmount.toNumber() - a.claimableAmount.toNumber()
-      );
+      return availableRewards;
     },
   });
 }
diff --git a/liquidity/ui/src/NetworkController.tsx b/liquidity/ui/src/NetworkController.tsx
@@ -46,21 +46,27 @@ export function NetworkController() {
   const [toolTipLabel, setTooltipLabel] = useState('Copy');
   const { activeWallet, walletsInfo, connect, disconnect } = useWallet();
   const { network: activeNetwork, setNetwork } = useNetwork();
-  const { data: accounts } = useAccounts();
+  const { data: accounts, isPending: isPendingAccounts } = useAccounts();
   const createAccount = useCreateAccount();
   const [showTestnets, setShowTestnets] = useLocalStorage(LOCAL_STORAGE_KEYS.SHOW_TESTNETS, false);
 
   useEffect(() => {
-    if (
-      accounts &&
-      accounts.length > 0 &&
-      (!('accountId' in params) ||
-        ('accountId' in params && params.accountId && !accounts.includes(params.accountId)))
-    ) {
-      const [accountId] = accounts;
-      setParams({ ...params, accountId });
+    if (!isPendingAccounts && accounts) {
+      if (accounts.length > 0 && !('accountId' in params)) {
+        setParams({ ...params, accountId: accounts[0] });
+        return;
+      }
+      if (accounts.length > 0 && !accounts.includes(`${params.accountId}`)) {
+        setParams({ ...params, accountId: accounts[0] });
+        return;
+      }
+      if (!accounts.length) {
+        const { accountId: _x, ...newParams } = params;
+        setParams(newParams);
+        return;
+      }
     }
-  }, [accounts, params, setParams]);
+  }, [accounts, isPendingAccounts, params, setParams]);
 
   useEffect(() => {
     if (window.$magicWallet) {

diff --git a/liquidity/ui/src/components/Rewards/Rewards.tsx b/liquidity/ui/src/components/Rewards/Rewards.tsx
@@ -17,6 +17,7 @@ import { useClaimAllRewards } from '@snx-v3/useClaimAllRewards';
 import { useCollateralType } from '@snx-v3/useCollateralTypes';
 import { type PositionPageSchemaType, useParams } from '@snx-v3/useParams';
 import { useRewards } from '@snx-v3/useRewards';
+import { useSynthTokens } from '@snx-v3/useSynthTokens';
 import React from 'react';
 import { AllRewardsModal } from './AllRewardsModal';
 import { RewardsLoading } from './RewardsLoading';
@@ -36,6 +37,35 @@ export function Rewards() {
     collateralType,
   });
 
+  const { data: synthTokens } = useSynthTokens();
+  const groupedRewards = React.useMemo(() => {
+    if (!rewards || !rewards.length) {
+      return;
+    }
+    const map = new Map();
+    rewards.forEach(({ distributor, claimableAmount }) => {
+      const symbol = distributor.payoutToken.symbol;
+      const synthToken = synthTokens?.find(
+        (synth) => synth.address.toUpperCase() === distributor.payoutToken.address.toUpperCase()
+      );
+      const displaySymbol = synthToken ? synthToken?.symbol.slice(1) : symbol;
+      if (map.has(displaySymbol)) {
+        map.set(displaySymbol, map.get(displaySymbol).add(claimableAmount));
+      } else {
+        map.set(displaySymbol, claimableAmount);
+      }
+    });
+    return map
+      .entries()
+      .toArray()
+      .map(([displaySymbol, claimableAmount]) => ({
+        displaySymbol,
+        claimableAmount,
+      }))
+      .sort((a, b) => a.displaySymbol.localeCompare(b.displaySymbol))
+      .sort((a, b) => b.claimableAmount.toNumber() - a.claimableAmount.toNumber());
+  }, [rewards, synthTokens]);
+
   return (
     <BorderBox bg="navy.700" py={4} px={4} flexDir="column">
       <AllRewardsModal txnStatus={txnState.txnStatus} txnHash={txnState.txnHash} />
@@ -121,11 +151,11 @@ export function Rewards() {
               </Tr>
             ) : null}
 
-            {params.accountId && !isPendingRewards && rewards && rewards.length > 0
-              ? rewards.map(({ distributor, claimableAmount }) => (
+            {groupedRewards
+              ? groupedRewards.map(({ displaySymbol, claimableAmount }) => (
                   <RewardsRow
-                    key={distributor.address}
-                    distributor={distributor}
+                    key={displaySymbol}
+                    displaySymbol={displaySymbol}
                     claimableAmount={claimableAmount}
                   />
                 ))

diff --git a/liquidity/ui/src/components/Rewards/RewardsRow.tsx b/liquidity/ui/src/components/Rewards/RewardsRow.tsx
@@ -1,38 +1,16 @@
-import { Fade, Flex, Link, Td, Text, Tr } from '@chakra-ui/react';
+import { Fade, Flex, Td, Text, Tr } from '@chakra-ui/react';
 import { Amount } from '@snx-v3/Amount';
-import { etherscanLink } from '@snx-v3/etherscanLink';
-import { truncateAddress } from '@snx-v3/formatters';
-import { Tooltip } from '@snx-v3/Tooltip';
-import { useNetwork } from '@snx-v3/useBlockchain';
-import { useSynthTokens } from '@snx-v3/useSynthTokens';
 import Wei from '@synthetixio/wei';
 import React from 'react';
 import { TokenIcon } from '../TokenIcon/TokenIcon';
 
 export function RewardsRow({
-  distributor,
+  displaySymbol,
   claimableAmount,
 }: {
-  distributor: {
-    address: string;
-    payoutToken: {
-      address: string;
-      symbol: string;
-    };
-  };
+  displaySymbol: string;
   claimableAmount: Wei;
 }) {
-  const { network } = useNetwork();
-  const { data: synthTokens } = useSynthTokens(network);
-
-  const displaySymbol = React.useMemo(() => {
-    const symbol = distributor.payoutToken.symbol;
-    const synthToken = synthTokens?.find(
-      (synth) => synth.address.toUpperCase() === distributor.payoutToken.address.toUpperCase()
-    );
-    return synthToken ? synthToken?.symbol.slice(1) : symbol;
-  }, [distributor.payoutToken.address, distributor.payoutToken.symbol, synthTokens]);
-
   return (
     <>
       <Tr>
@@ -42,25 +20,15 @@ export function RewardsRow({
           </Fade>
           <Fade in>
             <Flex flexDirection="column" ml="12px">
-              <Link
-                href={etherscanLink({
-                  chain: network?.name || 'mainnet',
-                  address: distributor.address,
-                })}
-                target="_blank"
+              <Text
+                color="gray.50"
+                fontSize="14px"
+                fontFamily="heading"
+                fontWeight={500}
+                lineHeight="20px"
               >
-                <Tooltip label={`Distributed by ${truncateAddress(distributor.address)}`}>
-                  <Text
-                    color="gray.50"
-                    fontSize="14px"
-                    fontFamily="heading"
-                    fontWeight={500}
-                    lineHeight="20px"
-                  >
-                    {displaySymbol}
-                  </Text>
-                </Tooltip>
-              </Link>
+                {displaySymbol}
+              </Text>
             </Flex>
           </Fade>
         </Td>
-Original file line number
+Diff line change
@@ Expand Up / @@ -58,7 +58,6 @@ export function useAccounts() { @@
           return accounts.map((accountId) => accountId.toString());
         },
-        placeholderData: [],
       });
     }
@@ Expand Down @@