feat: APP-551 crypto purchase email

web-components/src/components/cards/Card.tsx

@@ -1,7 +1,11 @@
-import { Card as MuiCard, SxProps } from '@mui/material';
-
-import type { Theme } from '../../theme/muiTheme';
+import { Card as MuiCard, CardProps as MuiCardProps } from '@mui/material';
 
+type CardProps = MuiCardProps & {
+  width?: string;
+  height?: string;
+  borderColor?: string;
+  borderRadius?: string;
+};
 export function Card({
   children,
   width,
@@ -10,24 +14,12 @@ export function Card({
   elevation = 0,
   borderColor,
   borderRadius,
-  className,
   sx = [],
-}: {
-  children?: any;
-  width?: string;
-  height?: string;
-  onClick?: () => void;
-  elevation?: number;
-  borderColor?: string;
-  borderRadius?: string;
-  className?: string;
-  sx?: SxProps<Theme>;
-}): JSX.Element {
+  ...props
+}: CardProps): JSX.Element {
   return (
     <MuiCard
       onClick={onClick}
-      className={className}
-      elevation={elevation}
       sx={[
         {
           border: 1,
@@ -39,6 +31,7 @@ export function Card({
         },
         ...(Array.isArray(sx) ? sx : [sx]),
       ]}
+      {...props}
     >
       {children}
     </MuiCard>

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}

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>

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 },
 ];
 

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}
       />

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,

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 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>
   );

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>

web-marketplace/src/components/organisms/Order/Order.Summary.tsx

@@ -160,6 +160,7 @@ export const OrderSummary = ({
             value={
               <DenomIconWithCurrency
                 baseDenom={askBaseDenom}
+                bankDenom={askDenom}
                 displayDenom={displayDenom}
               />
             }

web-marketplace/src/components/organisms/Order/Order.tsx

@@ -74,6 +74,7 @@ export const Order = ({ orderData, allowedDenoms, className }: OrderProps) => {
   return (
     <>
       <Card
+        id={blockchainDetails.blockchainRecord}
         className={cn(
           'bg-grey-100 border-[1px] border-bc-neutral-300',
           className,

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' }}
     />

web-marketplace/src/config/allowedBaseDenoms.ts

@@ -8,10 +8,9 @@ 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 USD_DENOMS = [GRAVITY_USDC_DENOM, AXELAR_USDC_DENOM, USDC_DENOM];
 export const EUR_DENOMS = [EEUR_DENOM];
 export const UPPERCASE_DENOM = [
   REGEN_DENOM,