Savings page card adjustments (#496)

* Remove and replace base devnet icon * Make sure savings opportunity layout works correctly * Change savings token card header * Display chains for which savings are available * Fix lint
marsfoundation · Dec 17, 2024 · 9a8c708 · 9a8c708
1 parent ca29dbb
commit 9a8c708
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 16 deletions.
diff --git a/packages/app/src/config/chain/index.ts b/packages/app/src/config/chain/index.ts
@@ -19,7 +19,7 @@ import { base, gnosis, mainnet } from 'viem/chains'
 import { NATIVE_ASSET_MOCK_ADDRESS, infoSkyApiUrl } from '../consts'
 import { AppConfig } from '../feature-flags'
 import { PLAYWRIGHT_USDS_CONTRACTS_NOT_AVAILABLE_KEY } from '../wagmi/config.e2e'
-import { farmAddresses, farmStablecoinsEntryGroup, susdsAddresses } from './constants'
+import { SUPPORTED_CHAINS, farmAddresses, farmStablecoinsEntryGroup, susdsAddresses } from './constants'
 import { ChainConfigEntry, ChainMeta, SupportedChainId } from './types'
 
 const commonTokenSymbolToReplacedName = {
@@ -308,7 +308,7 @@ const chainConfig: Record<SupportedChainId, ChainConfigEntry> = {
     psmStables: [TokenSymbol('USDC'), TokenSymbol('USDS')],
     meta: {
       name: 'Base',
-      logo: assets.chain.baseDevNet,
+      logo: assets.chain.base,
     },
     tokensWithMalformedApprove: [],
     permitSupport: {},
@@ -348,6 +348,24 @@ const chainConfig: Record<SupportedChainId, ChainConfigEntry> = {
   },
 }
 
+export const featureAvailability = (function getFeatureAvailability(): Record<
+  'savings' | 'markets' | 'farms',
+  SupportedChainId[]
+> {
+  // @note: using SUPPORTED_CHAIN instead of Object.values(chainConfig) to maintain chains order,
+  // since chain config members are automatically sorted in js (object key is a number).
+  function getSupportedChains(predicate: (config: ChainConfigEntry) => boolean): SupportedChainId[] {
+    return SUPPORTED_CHAINS.map((chain) => chainConfig[chain.id])
+      .filter(predicate)
+      .map((config) => config.originChainId)
+  }
+  return {
+    savings: getSupportedChains((config) => config.savings !== undefined),
+    markets: getSupportedChains((config) => config.markets !== undefined),
+    farms: getSupportedChains((config) => config.farms !== undefined),
+  }
+})()
+
 export function getChainConfigEntry(chainId: number): ChainConfigEntry {
   const sandboxConfig = useStore.getState().appConfig.sandbox
   const sandbox = useStore.getState().sandbox.network

diff --git a/packages/app/src/features/dialogs/select-network/views/SelectNetworkDialogView.stories.ts b/packages/app/src/features/dialogs/select-network/views/SelectNetworkDialogView.stories.ts
@@ -28,7 +28,7 @@ const meta: Meta<typeof SelectNetworkDialogView> = {
         onSelect: () => {},
       },
       {
-        logo: assets.chain.baseDevNet,
+        logo: assets.chain.base,
         name: 'Base',
         supportedPages: ['Savings', 'Farms'],
         selected: false,

diff --git a/packages/app/src/features/savings/components/savings-opportunity/components/Card.tsx b/packages/app/src/features/savings/components/savings-opportunity/components/Card.tsx
@@ -14,7 +14,7 @@ export function Card({ children, hasNoCash }: CardProps) {
       spacing="m"
       className={cn(
         'grid grid-cols-1 gap-8 bg-center bg-cover',
-        'bg-savings-opportunity-panel bg-no-repeat lg:grid-cols-[3fr_2fr]',
+        'bg-savings-opportunity-panel bg-no-repeat xl:grid-cols-[3fr_2fr]',
         hasNoCash && 'gap-6 lg:grid-cols-1',
       )}
       data-testid={testIds.savings.opportunity.panel}

diff --git a/packages/app/src/features/savings/components/savings-opportunity/components/Explainer.tsx b/packages/app/src/features/savings/components/savings-opportunity/components/Explainer.tsx
@@ -1,12 +1,12 @@
-import { getChainConfigEntry } from '@/config/chain'
+import { featureAvailability, getChainConfigEntry } from '@/config/chain'
 import { SupportedChainId } from '@/config/chain/types'
 import { USD_MOCK_TOKEN } from '@/domain/types/Token'
 import { TokenSymbol } from '@/domain/types/TokenSymbol'
 import { SavingsMeta } from '@/features/savings/logic/makeSavingsMeta'
 import { getTokenImage } from '@/ui/assets'
 import { testIds } from '@/ui/utils/testIds'
 import { NormalizedUnitNumber } from '@marsfoundation/common-universal'
-import { ArrowRightIcon } from 'lucide-react'
+import { SlashIcon } from 'lucide-react'
 
 export interface ExplainerProps {
   stablecoinValue?: NormalizedUnitNumber
@@ -16,17 +16,17 @@ export interface ExplainerProps {
 
 export function Explainer({ stablecoinValue, savingsMeta, originChainId }: ExplainerProps) {
   const { stablecoin, rateName } = savingsMeta.primary
-  const { savings, sdaiSymbol, susdsSymbol } = getChainConfigEntry(originChainId)
+  const { savings } = getChainConfigEntry(originChainId)
 
   return (
     <div className="flex flex-col justify-end gap-5">
       <div className="flex items-center gap-1">
         {savings?.inputTokens.map((symbol) => (
           <img key={symbol} src={getTokenImage(TokenSymbol(symbol))} className="h-6 w-6" />
         ))}
-        <ArrowRightIcon className="icon-xs icon-primary-inverse" />
-        {[sdaiSymbol, susdsSymbol].filter(Boolean).map((symbol) => (
-          <img key={symbol} src={getTokenImage(TokenSymbol(symbol))} className="h-6 w-6" />
+        <SlashIcon className="icon-xs icon-tertiary -rotate-12" />
+        {featureAvailability.savings.map((chainId) => (
+          <img key={chainId} src={getChainConfigEntry(chainId).meta.logo} className="h-6 w-6" />
         ))}
       </div>
       <div className="typography-body-4 max-w-[52ch] text-tertiary">

diff --git a/packages/app/src/features/savings/components/savings-token-panel/SavingsTokenPanel.tsx b/packages/app/src/features/savings/components/savings-token-panel/SavingsTokenPanel.tsx
@@ -56,7 +56,7 @@ export function SavingsTokenPanel({
       <div className="flex w-full flex-row items-center justify-between">
         <div className="flex flex-row items-center gap-1">
           <div className="typography-heading-4 text-primary-inverse">
-            {savingsType === 'sdai' ? 'Savings DAI' : 'Savings USDS'}
+            {savingsType === 'sdai' ? 'DAI Savings' : 'USDS Savings'}
           </div>
         </div>
         <div className="md:-mt-2 md:-mr-2 flex flex-row gap-1">

diff --git a/packages/app/src/ui/assets/chains/baseDevNet.svg b/packages/app/src/ui/assets/chains/baseDevNet.svg
diff --git a/packages/app/src/ui/assets/index.ts b/packages/app/src/ui/assets/index.ts
@@ -18,7 +18,6 @@ import symbolDark from './brand/symbol-dark.svg'
 import symbolGradient from './brand/symbol-gradient.svg'
 import symboLight from './brand/symbol-light.svg'
 import base from './chains/base.svg'
-import baseDevNet from './chains/baseDevNet.svg'
 import ethereum from './chains/ethereum.svg'
 import gnosis from './chains/gnosis.svg'
 import checkCircle from './check-circle.svg'
@@ -162,7 +161,6 @@ export const assets = {
     gnosis,
     ethereum,
     unknown,
-    baseDevNet,
     base,
   },
   token: {