npm - @imtbl/checkout-widgets - Versions diffs - 2.4.7 → 2.4.8 - Mend

@imtbl/checkout-widgets 2.4.7 → 2.4.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (46) hide show

package/src/components/Transactions/TransactionItemWithdrawPending.tsx CHANGED Viewed

@@ -91,7 +91,7 @@ export function TransactionItemWithdrawPending({
   };
   return (
-    <Box testId={`transaction-item-${transaction.blockchain_metadata.transaction_hash}`} sx={containerStyles}>
+    <Box testId={`transaction-item-${transaction.details.current_status.index}`} sx={containerStyles}>
       {requiresWithdrawalClaim && (
         <>
           <Box sx={actionsContainerStyles}>
@@ -107,7 +107,7 @@ export function TransactionItemWithdrawPending({
                 }}
               />
               <Body
-                testId={`transaction-item-${transaction.blockchain_metadata.transaction_hash}-action-message`}
+                testId={`transaction-item-${transaction.details.current_status.index}-action-message`}
                 size="xSmall"
                 sx={{ color: 'base.color.text.body.secondary' }}
               >
@@ -116,7 +116,7 @@ export function TransactionItemWithdrawPending({
             </Box>
             {requiresWithdrawalClaim && withdrawalReadyToClaim && (
               <Button
-                testId={`transaction-item-${transaction.blockchain_metadata.transaction_hash}-action-button`}
+                testId={`transaction-item-${transaction.details.current_status.index}-action-button`}
                 variant="primary"
                 size="small"
                 onClick={handleWithdrawalClaimClick}

package/src/components/Transactions/TransactionList.tsx CHANGED Viewed

@@ -5,16 +5,12 @@ import { Checkout } from '@imtbl/checkout-sdk';
 import {
   useCallback,
   useContext,
-  useEffect,
-  useState,
 } from 'react';
 import { useTranslation } from 'react-i18next';
 import { formatUnits } from 'ethers';
-import { AXELAR_SCAN_URL } from '../../lib';
-import { Transaction, TransactionStatus } from '../../lib/clients';
+import { Transaction } from '../../lib/clients';
 import { CryptoFiatContext } from '../../context/crypto-fiat-context/CryptoFiatContext';
 import { calculateCryptoToFiat, getTokenImageByAddress, isNativeToken } from '../../lib/utils';
-import { TransactionItem } from './TransactionItem';
 import { KnownNetworkMap } from './transactionsType';
 import { containerStyles, transactionsListStyle } from './TransactionListStyles';
 import { TransactionItemWithdrawPending } from './TransactionItemWithdrawPending';
@@ -40,23 +36,8 @@ export function TransactionList({
 }: TransactionListProps) {
   const { cryptoFiatState } = useContext(CryptoFiatContext);
   const { t } = useTranslation();
-  const [link, setLink] = useState('');
   const { environment } = checkout.config;
-  useEffect(() => {
-    if (!checkout) return;
-    setLink(AXELAR_SCAN_URL[checkout.config.environment]);
-  }, [checkout]);
-  const sortWithdrawalPendingFirst = useCallback((txnA, txnB) => {
-    if (
-      txnA.details.current_status.status === TransactionStatus.WITHDRAWAL_PENDING
-      && txnB.details.current_status.status !== TransactionStatus.WITHDRAWAL_PENDING) return -1;
-    if (txnA.details.current_status.status === txnB.details.current_status.status) return 0;
-    return 1;
-  }, []);
   const getTransactionItemIcon = useCallback((transaction) => {
     if (isNativeToken(transaction.details.from_token_address)) {
       // Map transaction chain slug to native symbol icon asset
@@ -76,34 +57,16 @@ export function TransactionList({
         sx={containerStyles}
       >
         {transactions
-          .sort(sortWithdrawalPendingFirst)
           .map((transaction) => {
-            const hash = transaction.blockchain_metadata.transaction_hash;
             const tokens = knownTokenMap[transaction.details.from_chain];
             const token = tokens[transaction.details.from_token_address.toLowerCase()];
             const amount = formatUnits(transaction.details.amount, token.decimals);
             const fiat = calculateCryptoToFiat(amount, token.symbol, cryptoFiatState.conversions);
-            if (transaction.details.current_status.status === TransactionStatus.WITHDRAWAL_PENDING) {
-              return (
-                <TransactionItemWithdrawPending
-                  key={hash}
-                  label={token.symbol}
-                  transaction={transaction}
-                  fiatAmount={`${t('views.TRANSACTIONS.fiatPricePrefix')}${fiat}`}
-                  amount={amount}
-                  icon={getTransactionItemIcon(transaction)}
-                  defaultTokenImage={defaultTokenImage}
-                  environment={environment}
-                />
-              );
-            }
             return (
-              <TransactionItem
-                key={hash}
+              <TransactionItemWithdrawPending
+                key={transaction.details.current_status.index}
                 label={token.symbol}
-                details={{ text: t('views.TRANSACTIONS.status.inProgress.stepInfo'), link, hash }}
                 transaction={transaction}
                 fiatAmount={`${t('views.TRANSACTIONS.fiatPricePrefix')}${fiat}`}
                 amount={amount}

package/src/components/Transactions/Transactions.tsx CHANGED Viewed

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/naming-convention */
 import {
   useCallback, useContext, useEffect, useMemo, useState,
 } from 'react';
@@ -8,10 +9,12 @@ import {
   TokenFilterTypes,
   TokenInfo,
   WalletProviderRdns,
+  ChainSlug,
+  Checkout,
 } from '@imtbl/checkout-sdk';
-import { Environment } from '@imtbl/config';
 import { useTranslation } from 'react-i18next';
 import { JsonRpcProvider } from 'ethers';
+import { TokenBridge } from '@imtbl/bridge-sdk';
 import { HeaderNavigation } from '../Header/HeaderNavigation';
 import { SimpleLayout } from '../SimpleLayout/SimpleLayout';
 import { FooterLogo } from '../Footer/FooterLogo';
@@ -23,7 +26,7 @@ import {
 import {
   DEFAULT_TRANSACTIONS_RETRY_POLICY,
 } from '../../lib';
-import { CheckoutApi, Transaction, TransactionType } from '../../lib/clients';
+import { Transaction, TransactionType } from '../../lib/clients';
 import { retry } from '../../lib/retry';
 import { getChainSlugById } from '../../lib/chains';
 import {
@@ -59,6 +62,40 @@ type TransactionsProps = {
   onBackButtonClick: () => void;
 };
+const getTransactionsDetails = async (tokenBridge: TokenBridge, checkout: Checkout, recipient: string) => {
+  const pendingWithdrawals = await tokenBridge.getPendingWithdrawals({ recipient });
+  const transactions = (await Promise.all(pendingWithdrawals.pending.map(async (withdrawal, index) => {
+    const tokenMapping = await tokenBridge.getTokenMapping({
+      rootToken: withdrawal.token,
+      rootChainId: checkout.config.l1ChainId.toString(),
+      childChainId: checkout.config.l2ChainId.toString(),
+    });
+    if (!tokenMapping.childToken) return null;
+    return {
+      tx_type: TransactionType.BRIDGE,
+      details: {
+        from_address: withdrawal.withdrawer,
+        from_chain: getChainSlugById(checkout.config.l2ChainId),
+        from_token_address: tokenMapping.childToken,
+        to_address: withdrawal.recipient,
+        to_chain: getChainSlugById(checkout.config.l1ChainId),
+        to_token_address: withdrawal.token,
+        amount: withdrawal.amount.toString(),
+        current_status: {
+          status: 'withdrawal_pending',
+          index,
+          withdrawal_ready_at: new Date(withdrawal.timeoutEnd * 1000).toISOString(),
+        },
+      },
+      created_at: new Date(withdrawal.timeoutStart * 1000).toISOString(),
+    };
+  }))).filter((tx) => tx !== null);
+  return { result: transactions };
+};
 export function Transactions({
   defaultTokenImage,
   onBackButtonClick,
@@ -70,7 +107,7 @@ export function Transactions({
   const { cryptoFiatDispatch } = useContext(CryptoFiatContext);
   const {
     bridgeDispatch,
-    bridgeState: { checkout, from },
+    bridgeState: { checkout, from, tokenBridge },
   } = useContext(BridgeContext);
   const { page } = useAnalytics();
   const { t } = useTranslation();
@@ -141,7 +178,7 @@ export function Transactions({
     }
   }, [checkout, from]);
-  const getTokensDetails = async (tokensWithChainSlug: {
+  const getTokensDetails = useCallback(async (tokensWithChainSlug: {
     [p: string]: string;
   }) => {
     const rootChainName = getChainSlugById(checkout.config.l1ChainId);
@@ -225,18 +262,7 @@ export function Transactions({
     });
     return { [rootChainName]: rootData, [childChainName]: childData };
-  };
-  const getTransactionsDetails = useCallback(
-    async (env: Environment, address: string) => {
-      const client = new CheckoutApi({ env });
-      return client.getTransactions({
-        txType: TransactionType.BRIDGE,
-        fromAddress: address,
-      });
-    },
-    [],
-  );
+  }, [checkout, cryptoFiatDispatch, rootChainTokensHashmap, childChainTokensHashmap]);
   const handleWalletChange = useCallback(
     async (event: WalletChangeEvent) => {
@@ -282,7 +308,7 @@ export function Transactions({
         setShowWalletDrawer(false);
       }
     },
-    [checkout],
+    [checkout, bridgeDispatch, track],
   );
   const handleBackButtonClick = () => {
@@ -313,22 +339,18 @@ export function Transactions({
   const fetchData = useCallback(async () => {
     if (!from?.walletAddress) return undefined;
+    if (!tokenBridge) return undefined;
-    const localTxs = await getTransactionsDetails(
-      checkout.config.environment,
-      from?.walletAddress,
-    );
+    const localTxs = await getTransactionsDetails(tokenBridge, checkout, from.walletAddress);
-    const tokensWithChainSlug: { [k: string]: string } = {};
-    localTxs.result.forEach((txn) => {
-      tokensWithChainSlug[txn.details.from_token_address] = txn.details.from_chain;
-    });
+    const tokensWithChainSlug = localTxs.result.reduce<Record<string, ChainSlug>>((acc, tx) =>
+      ({ ...acc, [tx.details.from_token_address]: tx.details.from_chain }), {});
     return {
       tokens: await getTokensDetails(tokensWithChainSlug),
       transactions: localTxs.result,
     };
-  }, [from, getTransactionsDetails]);
+  }, [from, tokenBridge, checkout, getTokensDetails]);
   const { providers } = useInjectedProviders({ checkout });
   const walletOptions = useMemo(() => providers, [providers]);
@@ -358,14 +380,14 @@ export function Transactions({
       setLoading(false);
     })();
-  }, [from, checkout]);
+  }, [from, checkout, fetchData]);
   useEffect(() => {
     page({
       userJourney: UserJourney.BRIDGE,
       screen: 'Transactions',
     });
-  }, []);
+  }, [page]);
   return (
     <SimpleLayout

package/src/components/Transactions/noTransactionStyles.ts CHANGED Viewed

@@ -22,6 +22,7 @@ export const noTransactionsContainerStyle = {
 export const noTransactionsBodyStyle = {
   mb: 'base.spacing.x8',
   color: 'base.color.text.body.secondary',
+  textAlign: 'center',
 };
 export const passportBodyStyle = {

package/src/components/Transactions/transactionItemStyles.ts CHANGED Viewed

@@ -4,13 +4,6 @@ export const containerStyles = {
   borderRadius: 'base.borderRadius.x4',
   bg: 'base.color.translucent.emphasis.100',
 };
-export const headingStyles = {
-  display: 'flex',
-  flexDirection: 'row',
-  justifyContent: 'space-between',
-  paddingLeft: 'base.spacing.x2',
-  alignItems: 'center',
-};
 export const actionsContainerStyles = {
   p: 'base.spacing.x3',
@@ -25,9 +18,3 @@ export const actionsLayoutStyles = {
   alignItems: 'center',
   gap: 'base.spacing.x2',
 };
-export const actionsBadgeStyles = {
-  position: 'absolute',
-  right: 'base.spacing.x2',
-  top: 'base.spacing.x2',
-};

package/src/lib/clients/checkoutApiType.ts CHANGED Viewed

@@ -8,14 +8,10 @@ export const TransactionStatus = {
   WITHDRAWAL_PENDING: 'withdrawal_pending',
 } as const;
-export type Transactions = {
-  result: Transaction[]
-};
 export type CurrentStatus = {
   status: string;
   withdrawal_ready_at?: string;
-  index?: number;
+  index: number;
 };
 export type TransactionDetails = {
@@ -29,13 +25,8 @@ export type TransactionDetails = {
   current_status: CurrentStatus
 };
-export type BlockchainMetadata = {
-  transaction_hash: string
-};
 export type Transaction = {
   tx_type: TransactionType
   details: TransactionDetails
-  blockchain_metadata: BlockchainMetadata
   created_at: string
 };

package/src/lib/clients/index.ts CHANGED Viewed

	@@ -1,2 +1 @@
1	- export * from './checkoutApi';
2 1	export * from './checkoutApiType';

package/src/widgets/purchase/components/WithCard.tsx CHANGED Viewed

@@ -53,6 +53,7 @@ export function WithCard(props: WithCardProps) {
     return null;
   }
+  // eslint-disable-next-line react-hooks/rules-of-hooks -- TODO: fix this
   const nftData: TransakNFTData[] = useMemo(
     () => signResponse.order.products.map((product) => ({
       collectionAddress: product.collectionAddress,

package/src/widgets/sale/components/WithCard.tsx CHANGED Viewed

@@ -40,6 +40,7 @@ export function WithCard(props: WithCardProps) {
     return null;
   }
+  // eslint-disable-next-line react-hooks/rules-of-hooks -- TODO: fix this
   const nftData: TransakNFTData[] = useMemo(
     () => signResponse.order.products.map((product) => ({
       collectionAddress: product.collectionAddress,

package/dist/types/components/Transactions/TransactionItem.d.ts DELETED Viewed

@@ -1,18 +0,0 @@
-import { Environment } from '@imtbl/config';
-import { Transaction } from '../../lib/clients/checkoutApiType';
-type TransactionItemProps = {
-    label: string;
-    details: {
-        text: string;
-        link: string;
-        hash: string;
-    };
-    transaction: Transaction;
-    fiatAmount: string;
-    amount: string;
-    icon: string;
-    defaultTokenImage: string;
-    environment: Environment;
-};
-export declare function TransactionItem({ label, details, transaction, fiatAmount, amount, icon, defaultTokenImage, environment, }: TransactionItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
-export {};

package/dist/types/lib/clients/checkoutApi.d.ts DELETED Viewed

@@ -1,39 +0,0 @@
-import { Environment } from '@imtbl/config';
-import { ENV_DEVELOPMENT } from '../constants';
-import { TransactionType, Transactions } from './checkoutApiType';
-type GetTransactions = {
-    txType: TransactionType;
-    fromAddress: string;
-};
-/**
- * Checkout API class provides a client abstraction for the Checkout API.
- */
-export declare class CheckoutApi {
-    readonly url: string;
-    readonly ttl: number;
-    readonly env: Environment;
-    private cacheMap;
-    private setCache;
-    private getCache;
-    /**
-     * Checkout API constructor
-     * @param env target chain
-     * @param ttl cache TTL
-     */
-    constructor(params: {
-        env: Environment | typeof ENV_DEVELOPMENT;
-        ttl?: number;
-    });
-    /**
-     * isHttpError verifies if the error is a HTTP error
-     * @param err error to evaluate
-     */
-    static isHttpError: (err: any) => boolean;
-    /**
-     * getTransactions fetches a list of blockchain transactions.
-     * @param txType transaction type
-     * @param fromAddress transactions executed from address
-     */
-    getTransactions(params: GetTransactions): Promise<Transactions>;
-}
-export {};

package/dist/types/lib/clients/checkoutApi.test.d.ts DELETED Viewed

	@@ -1 +0,0 @@
1	- export {};

package/src/components/Transactions/TransactionItem.tsx DELETED Viewed

@@ -1,137 +0,0 @@
-import {
-  Accordion,
-  Box,
-  Divider,
-  MenuItem,
-  Link,
-} from '@biom3/react';
-import { MouseEvent, useMemo } from 'react';
-import { Environment } from '@imtbl/config';
-import { UserJourney, useAnalytics } from '../../context/analytics-provider/SegmentAnalyticsProvider';
-import { Transaction } from '../../lib/clients/checkoutApiType';
-import { TokenImage } from '../TokenImage/TokenImage';
-import { containerStyles } from './transactionItemStyles';
-import { TransactionDetails } from './TransactionDetails';
-type TransactionItemProps = {
-  label: string
-  details: {
-    text: string,
-    link: string,
-    hash: string,
-  },
-  transaction: Transaction,
-  fiatAmount: string,
-  amount: string,
-  icon: string,
-  defaultTokenImage: string,
-  environment: Environment,
-};
-export function TransactionItem({
-  label,
-  details,
-  transaction,
-  fiatAmount,
-  amount,
-  icon,
-  defaultTokenImage,
-  environment,
-}: TransactionItemProps) {
-  const { track } = useAnalytics();
-  const txnDetailsLink = useMemo(() => `${details.link}${details.hash}`, [details]);
-  const handleDetailsLinkClick = (
-    event: MouseEvent<HTMLAnchorElement>,
-    linkDetail: { text: string, link: string, hash: string },
-  ) => {
-    event.stopPropagation(); // prevent expanding accordian
-    track({
-      userJourney: UserJourney.BRIDGE,
-      screen: 'TransactionItem',
-      control: 'Details',
-      controlType: 'Link',
-      extras: {
-        linkDetail,
-      },
-    });
-  };
-  return (
-    <Box testId={`transaction-item-${transaction.blockchain_metadata.transaction_hash}`} sx={containerStyles}>
-      <Accordion
-        chevronSide="right"
-        sx={{
-          button: {
-            p: 'base.spacing.x1',
-          },
-          article: {
-            pr: 'base.spacing.x10',
-          },
-        }}
-        onExpandChange={
-          (expanded) => expanded
-            && track({
-              userJourney: UserJourney.BRIDGE,
-              screen: 'TransactionItem',
-              control: 'Accordion',
-              controlType: 'Button',
-            })
-        }
-      >
-        <Accordion.TargetLeftSlot sx={{ pr: 'base.spacing.x2' }}>
-          <MenuItem size="xSmall">
-            <MenuItem.FramedImage
-              circularFrame
-              use={(
-                <TokenImage
-                  src={icon}
-                  name={label}
-                  defaultImage={defaultTokenImage}
-                />
-              )}
-            />
-            <MenuItem.Label>
-              {label}
-            </MenuItem.Label>
-            <MenuItem.Caption>
-              <Link
-                size="xSmall"
-                rc={(
-                  <a
-                    target="_blank"
-                    href={txnDetailsLink}
-                    rel="noreferrer"
-                    onClick={(e) => handleDetailsLinkClick(e, details)}
-                  />
-                )}
-              >
-                {details.text}
-              </Link>
-            </MenuItem.Caption>
-            <MenuItem.PriceDisplay
-              fiatAmount={fiatAmount}
-              price={amount}
-            />
-          </MenuItem>
-        </Accordion.TargetLeftSlot>
-        <Accordion.ExpandedContent sx={{
-          pr: '0',
-          pl: '0',
-          mb: 'base.spacing.x3',
-          gap: '0',
-        }}
-        >
-          <Divider
-            size="xSmall"
-            sx={{
-              px: 'base.spacing.x2',
-            }}
-          />
-          <TransactionDetails transaction={transaction} environment={environment} />
-        </Accordion.ExpandedContent>
-      </Accordion>
-    </Box>
-  );
-}