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 (