diff --git a/src/assets/translations/en/main.json b/src/assets/translations/en/main.json index b666300b37b..1888a30a2a4 100644 --- a/src/assets/translations/en/main.json +++ b/src/assets/translations/en/main.json @@ -2770,7 +2770,7 @@ "24hrPriceChange": "24h Price Change", "rfox": { "whatIs": "What is rFOX Staking?", - "totalFoxBurn": "Total FOX Burn", + "totalSymbolBurn": "Total %{symbol} Burn", "simulateTitle": "rFOX Simulator", "simulateSubtle": "Input number of deposit something", "estimatedRewards": "Estimated Rewards", diff --git a/src/pages/Fox/components/FoxTokenFilterButton.tsx b/src/pages/Fox/components/FoxTokenFilterButton.tsx index a21275a01a1..44651ec1e3a 100644 --- a/src/pages/Fox/components/FoxTokenFilterButton.tsx +++ b/src/pages/Fox/components/FoxTokenFilterButton.tsx @@ -1,5 +1,7 @@ import { Button, useColorModeValue } from '@chakra-ui/react' import type { AssetId } from '@shapeshiftoss/caip' +import type { Asset } from '@shapeshiftoss/types' +import { useMemo } from 'react' import { AssetIcon } from 'components/AssetIcon' import { selectFeeAssetByChainId } from 'state/slices/selectors' import { useAppSelector } from 'state/store' @@ -8,22 +10,29 @@ export type Filter = { label: string chainId?: string assetId?: AssetId + asset?: Asset } type FoxTokenFilterButtonProps = { filter: Filter onFilterClick: (filter: Filter) => void isSelected: boolean + asset?: Asset } const buttonsHover = { opacity: '.6', } +const pairProps = { + showFirst: true, +} + export const FoxTokenFilterButton = ({ filter, onFilterClick, isSelected, + asset, }: FoxTokenFilterButtonProps) => { const buttonsBgColor = useColorModeValue('gray.100', 'white') const buttonsColor = useColorModeValue('gray.500', 'white') @@ -31,11 +40,17 @@ export const FoxTokenFilterButton = ({ const iconSrc = feeAsset?.networkIcon - const networkIcon = iconSrc ? ( - - ) : ( - - ) + const networkIcon = useMemo(() => { + if (asset) { + return + } + + if (iconSrc) { + return + } + + return + }, [asset, feeAsset, iconSrc]) return (