From bef2239de6b4ee705d1068d528c0a8f650fdfea1 Mon Sep 17 00:00:00 2001 From: jz - synthetix <52280438+jmzwar@users.noreply.github.com> Date: Wed, 27 Mar 2024 22:44:29 +1100 Subject: [PATCH] Chore/27 updates (#206) * show/hide networks * rewards feedback * remove deposited/withdrawn --------- Co-authored-by: jmzwar --- liquidity/lib/useRewards/useRewards.ts | 76 +++++++------------ .../ui/src/components/Rewards/RewardsRow.tsx | 3 +- liquidity/ui/src/hooks/index.ts | 1 + liquidity/ui/src/hooks/useLocalStorage.ts | 36 +++++++++ .../src/layouts/Default/NetworkController.tsx | 32 +++++++- liquidity/ui/src/pages/Pool/MarketSection.tsx | 14 ++-- liquidity/ui/src/utils/constants.ts | 3 + liquidity/ui/src/utils/onboard.ts | 4 +- 8 files changed, 110 insertions(+), 59 deletions(-) create mode 100644 liquidity/ui/src/hooks/index.ts create mode 100644 liquidity/ui/src/hooks/useLocalStorage.ts create mode 100644 liquidity/ui/src/utils/constants.ts diff --git a/liquidity/lib/useRewards/useRewards.ts b/liquidity/lib/useRewards/useRewards.ts index a28af4be5..7123e1b2b 100644 --- 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 index 3ac099f50..09350abf5 100644 --- 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" > - + {` ${symbol}`} diff --git a/liquidity/ui/src/hooks/index.ts b/liquidity/ui/src/hooks/index.ts new file mode 100644 index 000000000..01cda12e7 --- /dev/null +++ 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 new file mode 100644 index 000000000..2d2b891a5 --- /dev/null +++ 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(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(key: string, initialValue: T) { + const [storedValue, setStoredValue] = useState(() => { + const item = get(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 index 0e6321f0c..5acc8e32b 100644 --- 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() { {networks.map(({ id, label }) => { + if ((id === 84532 || id === 11155111) && !showTestnets) return null; return ( setNetwork(id)}> @@ -73,6 +88,21 @@ export function NetworkController() { ); })} + + + + Show Testnets + + setShowTestnets(!showTestnets)} + /> + + )} diff --git a/liquidity/ui/src/pages/Pool/MarketSection.tsx b/liquidity/ui/src/pages/Pool/MarketSection.tsx index e2ad4b0a4..4c5fc58ea 100644 --- 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({ Market Pool Allocation - Total Deposited - Total Withdrawn + {/* Total Deposited + Total Withdrawn */} @@ -133,17 +133,17 @@ export function MarketSectionUi({ )} {/* Total Deposited */} - + {/* {formatNumberToUsd(market.usd_deposited.toNumber())} - + */} {/* Total Withdrawn */} - + {/* {formatNumberToUsd(market.usd_withdrawn.toNumber())} - + */} ); }) diff --git a/liquidity/ui/src/utils/constants.ts b/liquidity/ui/src/utils/constants.ts new file mode 100644 index 000000000..8ccbe7a20 --- /dev/null +++ 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 index 2be5a9b3b..02f74fdb3 100644 --- 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) => ({