Feat/wt 2053 claim coins (#1423)

Co-authored-by: Zach Couchman <[email protected]> Co-authored-by: Charlie McKenzie <[email protected]> Co-authored-by: Andrea Rampin <[email protected]>
immutable · Jan 30, 2024 · ad7267e · ad7267e
1 parent 52f329c
commit ad7267e
Show file tree

Hide file tree

Showing 21 changed files with 696 additions and 171 deletions.
diff --git a/packages/checkout/widgets-lib/src/components/Footer/FooterButton.tsx b/packages/checkout/widgets-lib/src/components/Footer/FooterButton.tsx
@@ -1,35 +1,37 @@
-import { Box, Button } from '@biom3/react';
+import { Box, Button, ButtonVariant } from '@biom3/react';
 import { footerButtonIconLoadingStyle, footerButtonStyles } from './FooterStyles';
 
 export interface FooterButtonProps {
   loading?: boolean;
   hideActionButton?: boolean;
   actionText: string;
   onActionClick: () => void;
+  variant?: ButtonVariant;
 }
 
 export function FooterButton({
   actionText,
   onActionClick,
   hideActionButton = false,
   loading = false,
+  variant = 'secondary',
 }: FooterButtonProps) {
   const showButton = !hideActionButton;
   return (
     <Box testId="footer-button-container" sx={footerButtonStyles}>
       {showButton && (
-      <Button
-        testId="footer-button"
-        size="large"
-        sx={{ width: '100%' }}
-        variant="secondary"
-        disabled={loading}
-        onClick={onActionClick}
-      >
-        {loading ? (
-          <Button.Icon icon="Loading" sx={footerButtonIconLoadingStyle} />
-        ) : actionText}
-      </Button>
+        <Button
+          testId="footer-button"
+          size="large"
+          sx={{ width: '100%' }}
+          variant={variant}
+          disabled={loading}
+          onClick={onActionClick}
+        >
+          {loading ? (
+            <Button.Icon icon="Loading" sx={footerButtonIconLoadingStyle} />
+          ) : actionText}
+        </Button>
       )}
     </Box>
   );

diff --git a/packages/checkout/widgets-lib/src/components/Transactions/ChangeWallet.tsx b/packages/checkout/widgets-lib/src/components/Transactions/ChangeWallet.tsx
@@ -0,0 +1,69 @@
+import {
+  Box, Button, Caption, Divider, EllipsizedText, Logo,
+} from '@biom3/react';
+import { useContext } from 'react';
+import { BridgeContext } from 'widgets/bridge/context/BridgeContext';
+import { isMetaMaskProvider, isPassportProvider } from 'lib/providerUtils';
+import { UserJourney, useAnalytics } from 'context/analytics-provider/SegmentAnalyticsProvider';
+import { BridgeWidgetViews } from 'context/view-context/BridgeViewContextTypes';
+import { useTranslation } from 'react-i18next';
+import { headingStyles } from './ChangeWalletStyles';
+
+export interface ChangeWalletProps {
+  onChangeWalletClick: () => void;
+}
+
+export function ChangeWallet({
+  onChangeWalletClick,
+}: ChangeWalletProps) {
+  const { t } = useTranslation();
+  const { bridgeState: { from } } = useContext(BridgeContext);
+  const { track } = useAnalytics();
+  const walletAddress = from?.walletAddress || '';
+  const isMetaMask = isMetaMaskProvider(from?.web3Provider);
+  const isPassport = isPassportProvider(from?.web3Provider);
+
+  const handleChangeWalletClick = () => {
+    track({
+      userJourney: UserJourney.BRIDGE,
+      screen: BridgeWidgetViews.TRANSACTIONS,
+      controlType: 'Button',
+      control: 'Pressed',
+
+    });
+    onChangeWalletClick();
+  };
+
+  return (
+    <>
+      <Box sx={headingStyles}>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 'base.spacing.x1' }}>
+          {isMetaMask && !isPassport && <Logo logo="MetaMaskSymbol" sx={{ width: 'base.icon.size.400' }} />}
+          {!isMetaMask && isPassport && (
+            <Logo
+              logo="PassportSymbolOutlined"
+              sx={
+                {
+                  width: 'base.icon.size.400',
+                  pr: 'base.spacing.x1',
+                }
+              }
+            />
+          )}
+          <Caption><EllipsizedText leftSideLength={6} rightSideLength={4} text={walletAddress} /></Caption>
+        </Box>
+        <Button size="small" variant="secondary" onClick={handleChangeWalletClick}>
+          {t('views.TRANSACTIONS.changeWallet.buttonText')}
+        </Button>
+      </Box>
+      <Divider
+        size="small"
+        sx={{
+          pb: 'base.spacing.x2',
+          color: 'base.color.translucent.emphasis.300',
+          opacity: 0.1,
+        }}
+      />
+    </>
+  );
+}
diff --git a/packages/checkout/widgets-lib/src/components/Transactions/ChangeWalletStyles.ts b/packages/checkout/widgets-lib/src/components/Transactions/ChangeWalletStyles.ts
@@ -0,0 +1,7 @@
+export const headingStyles = {
+  display: 'flex',
+  flexDirection: 'row',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  p: 'base.spacing.x2',
+};
diff --git a/packages/checkout/widgets-lib/src/components/Transactions/EmptyStateNotConnected.tsx b/packages/checkout/widgets-lib/src/components/Transactions/EmptyStateNotConnected.tsx
@@ -1,69 +1,25 @@
 import { Body, Box, Button } from '@biom3/react';
-import { Checkout, WalletProviderName } from '@imtbl/checkout-sdk';
-import { WalletDrawer } from 'widgets/bridge/components/WalletDrawer';
-import { useMemo, useState } from 'react';
-import { UserJourney, useAnalytics } from 'context/analytics-provider/SegmentAnalyticsProvider';
 import { useTranslation } from 'react-i18next';
 import { containerStyle } from './EmptyStateNotConnectedStyles';
 
 type EmptyStateNotConnectedProps = {
-  checkout: Checkout,
-  updateProvider: (walletProviderName: WalletProviderName) => Promise<void>,
+  openWalletDrawer: () => void
 };
 
-export function EmptyStateNotConnected({ checkout, updateProvider }: EmptyStateNotConnectedProps) {
-  const { track } = useAnalytics();
+export function EmptyStateNotConnected({ openWalletDrawer }: EmptyStateNotConnectedProps) {
   const { t } = useTranslation();
 
-  const [showWalletDrawer, setShowWalletDrawer] = useState(false);
-
-  const walletOptions = useMemo(() => {
-    const options = [WalletProviderName.METAMASK];
-    if (checkout.passport) {
-      options.push(WalletProviderName.PASSPORT);
-    }
-    return options;
-  }, [checkout]);
-
-  const handleProviderSelected = async (walletProviderName: WalletProviderName) => {
-    track({
-      userJourney: UserJourney.BRIDGE,
-      screen: 'EmptyStateNotConnected',
-      control: 'WalletProvider',
-      controlType: 'Select',
-      extras: {
-        walletProviderName,
-      },
-    });
-    await updateProvider(walletProviderName);
-  };
-
-  const openWalletDrawer = () => setShowWalletDrawer(true);
-
   return (
-    <>
-      <Box sx={containerStyle}>
-        <Body sx={{ mb: 'base.spacing.x8' }}>{t('views.TRANSACTIONS.status.emptyState.notConnected.body')}</Body>
-        <Button
-          variant="secondary"
-          size="medium"
-          testId="transactions-connect-wallet-button"
-          onClick={openWalletDrawer}
-        >
-          {t('views.TRANSACTIONS.status.emptyState.notConnected.buttonText')}
-        </Button>
-      </Box>
-      <WalletDrawer
-        testId="select-wallet-drawer"
-        drawerText={{
-          heading: t('views.TRANSACTIONS.walletSelection.heading'),
-        }}
-        showWalletSelectorTarget={false}
-        walletOptions={walletOptions}
-        showDrawer={showWalletDrawer}
-        setShowDrawer={(show: boolean) => { setShowWalletDrawer(show); }}
-        onWalletItemClick={handleProviderSelected}
-      />
-    </>
+    <Box sx={containerStyle}>
+      <Body sx={{ mb: 'base.spacing.x8' }}>{t('views.TRANSACTIONS.status.emptyState.notConnected.body')}</Body>
+      <Button
+        variant="secondary"
+        size="medium"
+        testId="transactions-connect-wallet-button"
+        onClick={openWalletDrawer}
+      >
+        {t('views.TRANSACTIONS.status.emptyState.notConnected.buttonText')}
+      </Button>
+    </Box>
   );
 }
diff --git a/packages/checkout/widgets-lib/src/components/Transactions/NoTransactions.tsx b/packages/checkout/widgets-lib/src/components/Transactions/NoTransactions.tsx
@@ -1,28 +1,31 @@
-import { Box, Body, Link } from '@biom3/react';
-import { BridgeWidgetViews } from 'context/view-context/BridgeViewContextTypes';
-import { text } from 'resources/text/textConfig';
+import {
+  Box, Body, Link,
+} from '@biom3/react';
 import { Checkout } from '@imtbl/checkout-sdk';
 import { useState, useEffect } from 'react';
 import { UserJourney, useAnalytics } from 'context/analytics-provider/SegmentAnalyticsProvider';
 import { PASSPORT_URL } from 'lib';
-import { containerStyle, noTransactionsBodyStyle, passportBodyStyle } from './noTransactionStyles';
+import { useTranslation } from 'react-i18next';
+import {
+  noTransactionsBodyStyle, noTransactionsContainerStyle, passportBodyStyle, containerStyles,
+} from './noTransactionStyles';
+import { ChangeWallet } from './ChangeWallet';
 
 type NoTransactionsProps = {
   checkout: Checkout,
-  isPassport: boolean
+  isPassport: boolean,
+  changeWallet: () => void
 };
 
 export function NoTransactions(
   {
     checkout,
     isPassport,
+    changeWallet,
   }: NoTransactionsProps,
 ) {
   const { page } = useAnalytics();
-
-  const {
-    status: { noTransactions },
-  } = text.views[BridgeWidgetViews.TRANSACTIONS];
+  const { t } = useTranslation();
 
   const [passportLink, setPassportLink] = useState('');
 
@@ -39,29 +42,31 @@ export function NoTransactions(
   }, []);
 
   return (
-    <Box sx={containerStyle}>
-      <Body
-        size="small"
-        sx={noTransactionsBodyStyle}
-      >
-        {noTransactions.body}
-
-      </Body>
-      {isPassport && (
+    <Box sx={containerStyles}>
+      <ChangeWallet onChangeWalletClick={changeWallet} />
+      <Box sx={noTransactionsContainerStyle}>
         <Body
           size="small"
-          sx={passportBodyStyle}
+          sx={noTransactionsBodyStyle}
         >
-          {noTransactions.passport.body}
-          {' '}
-          <Link
+          {t('views.TRANSACTIONS.status.noTransactions.body')}
+        </Body>
+        {isPassport && (
+          <Body
             size="small"
-            rc={<a target="_blank" href={passportLink} rel="noreferrer" />}
+            sx={passportBodyStyle}
           >
-            {noTransactions.passport.link}
-          </Link>
-        </Body>
-      )}
+            {t('views.TRANSACTIONS.status.noTransactions.passport.body')}
+            {' '}
+            <Link
+              size="small"
+              rc={<a target="_blank" href={passportLink} rel="noreferrer" />}
+            >
+              {t('views.TRANSACTIONS.status.noTransactions.passport.link')}
+            </Link>
+          </Body>
+        )}
+      </Box>
     </Box>
   );
 }
diff --git a/packages/checkout/widgets-lib/src/components/Transactions/Shimmer.tsx b/packages/checkout/widgets-lib/src/components/Transactions/Shimmer.tsx
@@ -14,10 +14,7 @@ export function Shimmer() {
         mt: 'base.spacing.x2',
       }}
       />
-      <Box sx={{ mb: 'base.spacing.x5' }}>
-        {' '}
-        <MenuItem shimmer emphasized size="small" />
-      </Box>
+      <Box sx={{ mb: 'base.spacing.x5' }}><MenuItem shimmer emphasized size="small" /></Box>
       <Box sx={{ mb: 'base.spacing.x5' }}><MenuItem shimmer emphasized size="small" /></Box>
       <Box sx={{ mb: 'base.spacing.x5' }}><MenuItem shimmer emphasized size="small" /></Box>
     </Box>

diff --git a/packages/checkout/widgets-lib/src/components/Transactions/TransactionItemWithdrawPending.tsx b/packages/checkout/widgets-lib/src/components/Transactions/TransactionItemWithdrawPending.tsx
@@ -9,8 +9,10 @@ import {
 } from '@biom3/react';
 import { UserJourney, useAnalytics } from 'context/analytics-provider/SegmentAnalyticsProvider';
 import { Transaction, TransactionStatus } from 'lib/clients/checkoutApiType';
-import { useMemo } from 'react';
+import { useContext, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { BridgeWidgetViews } from 'context/view-context/BridgeViewContextTypes';
+import { ViewActions, ViewContext } from 'context/view-context/ViewContext';
 import { actionsContainerStyles, actionsLayoutStyles, containerStyles } from './transactionItemStyles';
 import { TransactionDetails } from './TransactionDetails';
 
@@ -27,6 +29,7 @@ export function TransactionItemWithdrawPending({
   fiatAmount,
   amount,
 }: TransactionItemWithdrawPendingProps) {
+  const { viewDispatch } = useContext(ViewContext);
   const { track } = useAnalytics();
   const translation = useTranslation();
 
@@ -69,8 +72,15 @@ export function TransactionItemWithdrawPending({
   );
 
   const handleWithdrawalClaimClick = () => {
-    // WT-2053 - https://immutable.atlassian.net/browse/WT-2053
-    // entrypoint for claim withdrawal
+    viewDispatch({
+      payload: {
+        type: ViewActions.UPDATE_VIEW,
+        view: {
+          type: BridgeWidgetViews.CLAIM_WITHDRAWAL,
+          transaction,
+        },
+      },
+    });
   };
 
   return (

diff --git a/packages/checkout/widgets-lib/src/components/Transactions/TransactionList.tsx b/packages/checkout/widgets-lib/src/components/Transactions/TransactionList.tsx
@@ -1,6 +1,5 @@
 import {
   Box,
-  EllipsizedText,
 } from '@biom3/react';
 import { BridgeWidgetViews } from 'context/view-context/BridgeViewContextTypes';
 import { text } from 'resources/text/textConfig';
@@ -17,23 +16,24 @@ import { formatUnits } from 'ethers/lib/utils';
 import { useTranslation } from 'react-i18next';
 import { TransactionItem } from './TransactionItem';
 import { KnownNetworkMap } from './transactionsType';
-import { containerStyles, headingStyles, transactionsListStyle } from './TransactionListStyles';
+import { containerStyles, transactionsListStyle } from './TransactionListStyles';
 import { TransactionItemWithdrawPending } from './TransactionItemWithdrawPending';
+import { ChangeWallet } from './ChangeWallet';
 
 type TransactionListProps = {
   checkout: Checkout,
   transactions: Transaction[],
   knownTokenMap: KnownNetworkMap,
   isPassport: boolean;
-  walletAddress: string;
+  changeWallet: () => void,
 };
 
 export function TransactionList({
   checkout,
   transactions,
   knownTokenMap,
   isPassport,
-  walletAddress,
+  changeWallet,
 }: TransactionListProps) {
   const { cryptoFiatState } = useContext(CryptoFiatContext);
   const { t } = useTranslation();
@@ -60,9 +60,7 @@ export function TransactionList({
 
   return (
     <Box sx={transactionsListStyle(isPassport)}>
-      <Box sx={headingStyles}>
-        <EllipsizedText leftSideLength={6} rightSideLength={4} text={walletAddress} />
-      </Box>
+      <ChangeWallet onChangeWalletClick={changeWallet} />
       <Box
         testId="move-transaction-list"
         sx={containerStyles}