feat: scroll to order with tx hash

Author: blushi

web-marketplace/src/components/molecules/DenomIcon/DenomIcon.tsx

@@ -42,7 +42,7 @@ const DenomIcon = ({
         <GravUsdcIcon sx={iconSx} className={className} />
       )}
       {baseDenom === AXELAR_USDC_DENOM &&
-        // On mainnet, AXELAR_USDC_DENOM and USDC_DENOM baseDenom have the same value: uusd
+        // 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 && (

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

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

web-marketplace/src/config/allowedBaseDenoms.ts

@@ -10,7 +10,7 @@ export const EVMOS_DENOM = 'atevmos';
 export const USD_DENOM = 'usd';
 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,

web-marketplace/src/lib/queries/react-query/ecocredit/marketplace/getSellOrdersExtendedQuery/getSellOrdersExtendedQuery.ts

@@ -56,8 +56,6 @@ export const getSellOrdersExtendedQuery = ({
       query: denomTracesQuery,
       reactQueryClient,
     });
-    console.log('ibcDenomHashes', ibcDenomHashes);
-    console.log('denomTraces', denomTraces);
 
     // get prices to compute AskUsdAmount
     const simplePriceData =

web-marketplace/src/pages/BuyCredits/BuyCredits.utils.tsx

@@ -2,7 +2,16 @@ import { UseFormSetValue } from 'react-hook-form';
 import { i18n } from '@lingui/core';
 import { msg, plural, Trans } from '@lingui/macro';
 import { QueryAllowedDenomsResponse } from '@regen-network/api/lib/generated/regen/ecocredit/marketplace/v1/query';
-import { USD_DENOM } from 'config/allowedBaseDenoms';
+import {
+  AXELAR_USDC_DENOM,
+  EEUR_DENOM,
+  EVMOS_DENOM,
+  GRAVITY_USDC_DENOM,
+  REGEN_DENOM,
+  USD_DENOM,
+  USDC_DENOM,
+} from 'config/allowedBaseDenoms';
+import { IBC_DENOM_PREFIX } from 'utils/ibc/getDenomTrace';
 
 import { getFormattedNumber } from 'web-components/src/utils/format';
 
@@ -373,3 +382,27 @@ export function resetCurrencyAndCredits(
     activeStep,
   );
 }
+
+export const getCryptoCurrencyIconSrc = (
+  baseDenom: string,
+  bankDenom: string,
+) => {
+  const ibcDenom = bankDenom?.includes(IBC_DENOM_PREFIX);
+
+  let href = '';
+  if (baseDenom === GRAVITY_USDC_DENOM)
+    href = 'https://regen-registry.s3.us-east-1.amazonaws.com/usdc.grv.png';
+  // On mainnet, AXELAR_USDC_DENOM and USDC_DENOM base denoms have the same value: uusd
+  // so we also use the bank denom to check whether it's USDC.axl (IBC) or native USDC
+  if (baseDenom === AXELAR_USDC_DENOM && ibcDenom)
+    href = 'https://regen-registry.s3.us-east-1.amazonaws.com/usdc.axl.png';
+  if (baseDenom === USDC_DENOM && !ibcDenom)
+    href = 'https://regen-registry.s3.us-east-1.amazonaws.com/uusdc.png';
+  if (baseDenom === EEUR_DENOM)
+    href = 'https://regen-registry.s3.us-east-1.amazonaws.com/eeur.png';
+  if (baseDenom === REGEN_DENOM)
+    href = 'https://regen-registry.s3.us-east-1.amazonaws.com/regen.png';
+  if (baseDenom === EVMOS_DENOM)
+    href = 'https://regen-registry.s3.us-east-1.amazonaws.com/evmos.png';
+  return href;
+};

web-marketplace/src/pages/BuyCredits/hooks/usePurchase.ts

@@ -40,7 +40,11 @@ import { useMsgClient } from 'hooks';
 
 import { EMAIL_RECEIPT, PAYMENT_OPTIONS } from '../BuyCredits.constants';
 import { BuyCreditsSchemaTypes, PaymentOptionsType } from '../BuyCredits.types';
-import { getCardItems, getSteps } from '../BuyCredits.utils';
+import {
+  getCardItems,
+  getCryptoCurrencyIconSrc,
+  getSteps,
+} from '../BuyCredits.utils';
 import { useFetchRetirementForPurchase } from './useFetchRetirementForPurchase';
 
 type UsePurchaseParams = {
@@ -308,6 +312,37 @@ export const usePurchase = ({
               const _txHash = deliverTxResponse?.transactionHash;
               setTxHash(_txHash);
 
+              // Send purchase confirmation if email provided
+              if (email && token) {
+                const currencyIconSrc = getCryptoCurrencyIconSrc(
+                  currency.askBaseDenom,
+                  currency.askDenom,
+                );
+                const amountLabel = retiring
+                  ? _(msg`amount retired`)
+                  : _(msg`amount tradable`);
+
+                await postData({
+                  url: `${apiUri}/marketplace/v1/confirm-crypto-order`,
+                  data: {
+                    email,
+                    currencyAmount,
+                    currencyIconSrc,
+                    displayDenom,
+                    projectName: project?.name,
+                    amountLabel,
+                    creditsAmount,
+                    txHref: getHashUrl(_txHash),
+                    txHash: truncate(_txHash),
+                    orderHref: `${
+                      window.location.origin
+                    }/dashboard/admin/my-orders#${_txHash?.toLowerCase()}`,
+                  },
+                  token,
+                  retryCsrfRequest,
+                });
+              }
+
               // In case of retirement, it's handled in useFetchRetirementForPurchase
               if (!retiring) {
                 setProcessingModalAtom(atom => void (atom.open = false));
@@ -339,31 +374,7 @@ export const usePurchase = ({
 
                 // Reset BuyCredits forms
                 handleSuccess();
-
-                // Send purchase confirmation if email provided
-                if (email && token) {
-                  let currencyIconSrc;
-                  await postData({
-                    url: `${apiUri}/marketplace/v1/confirm-crypto-order`,
-                    data: {
-                      email,
-                      currencyAmount,
-                      currencyIconSrc,
-                      displayDenom,
-                      projectName,
-                      amountLabel: retiring
-                        ? _(msg`amount retired`)
-                        : _(msg`amount tradable`),
-                      creditsAmount,
-                      txHref: getHashUrl(_txHash),
-                      txHash: truncate(_txHash),
-                    },
-                    token,
-                    retryCsrfRequest,
-                  });
-                }
-
-                navigate(`/profile/portfolio`);
+                navigate(`/dashboard/portfolio`);
               }
             },
           },

web-marketplace/src/pages/Orders/Orders.tsx

@@ -1,3 +1,5 @@
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
 import { useQuery } from '@tanstack/react-query';
 
 import { Flex } from 'web-components/src/components/box';
@@ -11,8 +13,9 @@ import { Order } from 'components/organisms/Order/Order';
 import { useOrders } from './hooks/useOrders';
 
 export const Orders = () => {
-  const { marketplaceClient } = useLedger();
+  const location = useLocation();
 
+  const { marketplaceClient } = useLedger();
   const { orders, isLoading } = useOrders();
 
   const { data: allowedDenomsData } = useQuery(
@@ -23,6 +26,13 @@ export const Orders = () => {
   );
   const allowedDenoms = allowedDenomsData?.allowedDenoms;
 
+  useEffect(() => {
+    if (!isLoading) {
+      const element = document.getElementById(location.hash.substring(1));
+      if (element) element.scrollIntoView({ behavior: 'smooth' });
+    }
+  }, [isLoading, location.hash]);
+
   return (
     <div className="flex flex-col justify-start items-center lg:items-start lg:flex-row lg:justify-evenly mx-auto">
       <Flex