fix: DenomIcon

blushi · blushi · commit fef14cdb1ec0 · 2025-02-19T13:06:35.000+01:00
diff --git a/web-marketplace/src/components/molecules/AmountWithCurrency/AmountWithCurrency.tsx b/web-marketplace/src/components/molecules/AmountWithCurrency/AmountWithCurrency.tsx
@@ -33,6 +33,7 @@ export const AmountWithCurrency = ({
     </span>
     <DenomIconWithCurrency
       baseDenom={currency?.askBaseDenom}
+      bankDenom={currency?.askDenom}
       displayDenom={displayDenom}
       className={classes?.denom}
       tooltipText={tooltipText}
diff --git a/web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.Header.tsx b/web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.Header.tsx
@@ -19,11 +19,13 @@ export function CreditsAmountHeader({
   setMaxCreditsSelected,
   displayDenom,
   baseDenom,
+  bankDenom,
 }: {
   creditsAvailable: number;
   setMaxCreditsSelected: (value: boolean) => void;
   baseDenom: string;
   displayDenom: string;
+  bankDenom: string;
 }) {
   const { _ } = useLingui();
 
@@ -53,6 +55,7 @@ export function CreditsAmountHeader({
               <DenomIconWithCurrency
                 displayDenom={displayDenom}
                 baseDenom={baseDenom}
+                bankDenom={bankDenom}
                 className="sm:pt-5"
               />
             </span>
diff --git a/web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.mock.tsx b/web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.mock.tsx
@@ -3,7 +3,7 @@ import {
   EVMOS_DENOM,
   REGEN_DENOM,
   USDC_DENOM,
-  USDCAXL_DENOM,
+  AXELAR_USDC_DENOM,
 } from 'config/allowedBaseDenoms';
 
 import { UISellOrderInfo } from 'pages/Projects/AllProjects/AllProjects.types';
@@ -41,7 +41,7 @@ export const cryptoSellOrders = [
   },
   {
     id: '4',
-    askBaseDenom: USDCAXL_DENOM,
+    askBaseDenom: AXELAR_USDC_DENOM,
     askDenom: 'ibc/456',
     askAmount: '3000000',
     quantity: '10',
@@ -69,7 +69,7 @@ export const cardSellOrders = cryptoSellOrders.map((order, i) => ({
 export const cryptoCurrencies = [
   { askDenom: REGEN_DENOM, askBaseDenom: REGEN_DENOM },
   { askDenom: 'ibc/123', askBaseDenom: USDC_DENOM },
-  { askDenom: 'ibc/456', askBaseDenom: USDCAXL_DENOM },
+  { askDenom: 'ibc/456', askBaseDenom: AXELAR_USDC_DENOM },
   { askDenom: 'ibc/789', askBaseDenom: EVMOS_DENOM },
 ];
 
diff --git a/web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.tsx b/web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.tsx
@@ -309,6 +309,7 @@ export const CreditsAmount = ({
       <CreditsAmountHeader
         displayDenom={displayDenom}
         baseDenom={currency.askBaseDenom}
+        bankDenom={currency.askDenom}
         creditsAvailable={creditsAvailable}
         setMaxCreditsSelected={setMaxCreditsSelected}
       />
diff --git a/web-marketplace/src/components/molecules/CreditsAmount/CurrencyInput.tsx b/web-marketplace/src/components/molecules/CreditsAmount/CurrencyInput.tsx
@@ -214,6 +214,7 @@ export const CurrencyInput = ({
           card || cryptoCurrencies.length === 1 ? (
             <DenomIconWithCurrency
               baseDenom={currency?.askBaseDenom}
+              bankDenom={currency?.askDenom}
               displayDenom={displayDenom}
             />
           ) : (
@@ -224,6 +225,7 @@ export const CurrencyInput = ({
                   element: () => (
                     <DenomIconWithCurrency
                       baseDenom={cur.askBaseDenom}
+                      bankDenom={cur.askDenom}
                       displayDenom={findDisplayDenom({
                         allowedDenoms,
                         bankDenom: cur.askDenom,
diff --git a/web-marketplace/src/components/molecules/DenomIcon/DenomIcon.tsx b/web-marketplace/src/components/molecules/DenomIcon/DenomIcon.tsx
@@ -1,5 +1,6 @@
 import { Box } from '@mui/material';
 import { SxProps, Theme } from '@mui/system';
+import { IBC_DENOM_PREFIX } from 'utils/ibc/getDenomTrace';
 import {
   AXELAR_USDC_DENOM,
   EEUR_DENOM,
@@ -8,38 +9,42 @@ import {
   REGEN_DENOM,
   USD_DENOM,
   USDC_DENOM,
-  USDCAXL_DENOM,
 } from 'web-marketplace/src/config/allowedBaseDenoms';
 
 import AxlUsdcIcon from 'web-components/src/components/icons/coins/AxlUsdcIcon';
 import EeurIcon from 'web-components/src/components/icons/coins/EeurIcon';
 import EvmosIcon from 'web-components/src/components/icons/coins/EvmosIcon';
 import GravUsdcIcon from 'web-components/src/components/icons/coins/GravUsdcIcon';
+import UsdcIcon from 'web-components/src/components/icons/coins/UsdcIcon';
 import USFlagIcon from 'web-components/src/components/icons/flags/USFlagIcon';
 import { RegenTokenIcon } from 'web-components/src/components/icons/RegenTokenIcon';
 
 export interface Props {
   baseDenom?: string;
+  bankDenom?: string;
   sx?: SxProps<Theme>;
   iconSx?: SxProps<Theme>;
   className?: string;
 }
 
 const DenomIcon = ({
   baseDenom,
+  bankDenom,
   sx = [],
   iconSx,
   className = '',
 }: Props): JSX.Element => {
+  const ibcDenom = bankDenom?.includes(IBC_DENOM_PREFIX);
+
   return (
     <Box component="span" sx={[...(Array.isArray(sx) ? sx : [sx])]}>
-      {baseDenom === GRAVITY_USDC_DENOM ||
-        (baseDenom === USDC_DENOM && (
-          <GravUsdcIcon sx={iconSx} className={className} />
-        ))}
-      {baseDenom === AXELAR_USDC_DENOM && (
-        <AxlUsdcIcon sx={iconSx} className={className} />
+      {baseDenom === GRAVITY_USDC_DENOM && (
+        <GravUsdcIcon sx={iconSx} className={className} />
       )}
+      {baseDenom === AXELAR_USDC_DENOM &&
+        // On mainnet, AXELAR_USDC_DENOM and USDC_DENOM baseDenom have the same value: uusd
+        // so we also use the bank denom to check whether it's USDC.axl (IBC) or native USDC
+        ibcDenom && <AxlUsdcIcon sx={iconSx} className={className} />}
       {baseDenom === EEUR_DENOM && (
         <EeurIcon sx={iconSx} className={className} />
       )}
@@ -50,9 +55,8 @@ const DenomIcon = ({
         <EvmosIcon sx={iconSx} className={className} />
       )}
       {baseDenom === USD_DENOM && <USFlagIcon className={className} />}
-
-      {baseDenom === USDCAXL_DENOM && (
-        <AxlUsdcIcon sx={iconSx} className={className} />
+      {baseDenom === USDC_DENOM && !ibcDenom && (
+        <UsdcIcon className={className} />
       )}
     </Box>
   );
diff --git a/web-marketplace/src/components/molecules/DenomIconWithCurrency/DenomIconWithCurrency.tsx b/web-marketplace/src/components/molecules/DenomIconWithCurrency/DenomIconWithCurrency.tsx
@@ -6,11 +6,13 @@ import { cn } from 'web-components/src/utils/styles/cn';
 
 export function DenomIconWithCurrency({
   baseDenom,
+  bankDenom,
   displayDenom,
   className,
   tooltipText,
 }: {
   baseDenom: string | undefined;
+  bankDenom: string | undefined;
   displayDenom: string;
   className?: string;
   tooltipText?: string;
@@ -19,6 +21,7 @@ export function DenomIconWithCurrency({
     <Body size="sm" className={cn('flex gap-5', className)}>
       <DenomIcon
         baseDenom={baseDenom}
+        bankDenom={bankDenom}
         className="h-[24px] inline-block denom-icon"
       />
       <span className="pb-5 pt-3 text-sm">{displayDenom}</span>
diff --git a/web-marketplace/src/components/organisms/Order/Order.Summary.tsx b/web-marketplace/src/components/organisms/Order/Order.Summary.tsx
@@ -160,6 +160,7 @@ export const OrderSummary = ({
             value={
               <DenomIconWithCurrency
                 baseDenom={askBaseDenom}
+                bankDenom={askDenom}
                 displayDenom={displayDenom}
               />
             }
diff --git a/web-marketplace/src/components/organisms/SellOrdersTable/SellOrdersTable.Row.tsx b/web-marketplace/src/components/organisms/SellOrdersTable/SellOrdersTable.Row.tsx
@@ -61,6 +61,7 @@ const getSellOrdersTableRow = ({
   <Box sx={{ fontWeight: 700, display: 'flex', alignItems: 'center' }}>
     <DenomIcon
       baseDenom={askBaseDenom}
+      bankDenom={askDenom}
       sx={{ mr: 2.5, display: 'flex', alignItems: 'center' }}
       iconSx={{ fontSize: '30px' }}
     />
diff --git a/web-marketplace/src/config/allowedBaseDenoms.ts b/web-marketplace/src/config/allowedBaseDenoms.ts
@@ -8,8 +8,7 @@ export const EEUR_DENOM = 'eeur';
 export const REGEN_DENOM = 'uregen';
 export const EVMOS_DENOM = 'atevmos';
 export const USD_DENOM = 'usd';
-export const USDC_DENOM = 'usdc';
-export const USDCAXL_DENOM = 'usdcaxl';
+export const USDC_DENOM = 'uusdc';
 
 export const USD_DENOMS = [GRAVITY_USDC_DENOM, AXELAR_USDC_DENOM];
 export const EUR_DENOMS = [EEUR_DENOM];
diff --git a/web-marketplace/src/pages/BuyCredits/hooks/useFetchRetirementForPurchase.ts b/web-marketplace/src/pages/BuyCredits/hooks/useFetchRetirementForPurchase.ts
@@ -17,7 +17,7 @@ import {
 } from 'lib/atoms/modals.atoms';
 import { BLOCKCHAIN_RECORD } from 'lib/constants/shared.constants';
 import { NormalizeProject } from 'lib/normalizers/projects/normalizeProjectsWithMetadata';
-import { SELL_ORDERS_EXTENTED_KEY } from 'lib/queries/react-query/ecocredit/marketplace/getSellOrdersExtendedQuery/getSellOrdersExtendedQuery';
+import { SELL_ORDERS_EXTENTED_KEY } from 'lib/queries/react-query/ecocredit/marketplace/getSellOrdersExtendedQuery/getSellOrdersExtendedQuery.constants';
 import { getTxHashForPaymentIntentQuery } from 'lib/queries/react-query/registry-server/graphql/getTxHashForPaymentIntent/getTxHashForPaymentIntentQuery';
 import { getRetirementByTxHash } from 'lib/queries/react-query/registry-server/graphql/indexer/getRetirementByTxHash/getRetirementByTxHash';
 
diff --git a/web-marketplace/src/pages/BuyCredits/hooks/usePurchase.ts b/web-marketplace/src/pages/BuyCredits/hooks/usePurchase.ts
@@ -26,7 +26,7 @@ import { useAuth } from 'lib/auth/auth';
 import { getHashUrl } from 'lib/block-explorer';
 import { useRetryCsrfRequest } from 'lib/errors/hooks/useRetryCsrfRequest';
 import { NormalizeProject } from 'lib/normalizers/projects/normalizeProjectsWithMetadata';
-import { SELL_ORDERS_EXTENTED_KEY } from 'lib/queries/react-query/ecocredit/marketplace/getSellOrdersExtendedQuery/getSellOrdersExtendedQuery';
+import { SELL_ORDERS_EXTENTED_KEY } from 'lib/queries/react-query/ecocredit/marketplace/getSellOrdersExtendedQuery/getSellOrdersExtendedQuery.constants';
 import { getCsrfTokenQuery } from 'lib/queries/react-query/registry-server/getCsrfTokenQuery/getCsrfTokenQuery';
 import { useWallet } from 'lib/wallet/wallet';
 
diff --git a/web-marketplace/src/pages/Dashboard/MyEcocredits/hooks/useCreateSellOrderSubmit.tsx b/web-marketplace/src/pages/Dashboard/MyEcocredits/hooks/useCreateSellOrderSubmit.tsx
@@ -130,7 +130,11 @@ const useCreateSellOrderSubmit = ({
                     verticalAlign: 'bottom',
                   }}
                 >
-                  <DenomIcon baseDenom={baseDenom} sx={{ display: 'flex' }} />
+                  <DenomIcon
+                    baseDenom={baseDenom}
+                    bankDenom={askDenom}
+                    sx={{ display: 'flex' }}
+                  />
                 </Box>
               ),
             },
diff --git a/web-marketplace/src/pages/Marketplace/Storefront/hooks/useCancelSellOrderSubmit.tsx b/web-marketplace/src/pages/Marketplace/Storefront/hooks/useCancelSellOrderSubmit.tsx
@@ -96,7 +96,11 @@ const useCancelSellOrderSubmit = ({
                 verticalAlign: 'bottom',
               }}
             >
-              <DenomIcon baseDenom={baseDenom} sx={{ display: 'flex' }} />
+              <DenomIcon
+                baseDenom={baseDenom}
+                bankDenom={askDenom}
+                sx={{ display: 'flex' }}
+              />
             </Box>
           ),
         },

Original file line number	Diff line number	Diff line change
`@@ -160,6 +160,7 @@ export const OrderSummary = ({`
`160`	`160`	`value={`
`161`	`161`	`<DenomIconWithCurrency`
`162`	`162`	`baseDenom={askBaseDenom}`
	`163`	`+ bankDenom={askDenom}`
`163`	`164`	`displayDenom={displayDenom}`
`164`	`165`	`/>`
`165`	`166`	`}`