@imtbl/checkout-widgets 2.1.7 → 2.1.8-alpha.0

package/src/widgets/transfer/TransferComplete.tsx

@@ -0,0 +1,73 @@
+import {
+  Stack, Box, Heading, Link, Button,
+} from '@biom3/react';
+import { BlockExplorerService } from '@imtbl/checkout-sdk';
+import { useRive, useStateMachineInput } from '@rive-app/react-canvas-lite';
+import { useEffect, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { SimpleLayout } from '../../components/SimpleLayout/SimpleLayout';
+import { getRemoteRive } from '../../lib/utils';
+import { StrongCheckoutWidgetsConfig } from '../../lib/withDefaultWidgetConfig';
+import { TransferCompleteState } from './context';
+
+export function TransferComplete({
+  config,
+  viewState,
+  onContinue,
+}: {
+  config: StrongCheckoutWidgetsConfig;
+  viewState: TransferCompleteState;
+  onContinue: () => void;
+}) {
+  const { t } = useTranslation();
+
+  const { RiveComponent, rive } = useRive({
+    src: getRemoteRive(config.environment, '/purchasing_items.riv'),
+    stateMachines: 'State',
+    autoplay: true,
+  });
+
+  const input = useStateMachineInput(rive, 'State', 'mode');
+
+  useEffect(() => {
+    if (!input) return;
+    input.value = 3;
+  }, [input]);
+
+  const explorerLink = useMemo(
+    () =>
+      BlockExplorerService.getTransactionLink(
+        viewState.chainId,
+        viewState.receipt.hash,
+      ),
+    [viewState.chainId, viewState.receipt.hash],
+  );
+
+  return (
+    <SimpleLayout containerSx={{ bg: 'transparent' }}>
+      <Stack
+        justifyContent="space-between"
+        sx={{
+          height: '100%',
+          mb: 'base.spacing.x10',
+          textAlign: 'center',
+        }}
+      >
+        <Box>
+          <Box sx={{ height: '240px' }} rc={<RiveComponent />} />
+          <Heading sx={{ my: 'base.spacing.x4', mx: 'base.spacing.x4' }}>
+            {t('views.TRANSFER.content.tokensSentSuccessfully')}
+          </Heading>
+          <Link rc={<a target="_blank" href={explorerLink} rel="noreferrer" />}>
+            {t('views.TRANSFER.content.seeTransactionOnImmutableZkEVM')}
+          </Link>
+        </Box>
+        <Box sx={{ mx: 'base.spacing.x4' }}>
+          <Button sx={{ width: '100%' }} onClick={onContinue} size="large">
+            {t('views.TRANSFER.form.continueButtonText')}
+          </Button>
+        </Box>
+      </Stack>
+    </SimpleLayout>
+  );
+}

package/src/widgets/transfer/TransferForm.tsx

@@ -0,0 +1,236 @@
+import {
+  OptionKey, Stack, Heading, Box, Body, Button,
+} from '@biom3/react';
+import { IMTBLWidgetEvents } from '@imtbl/checkout-sdk';
+import {
+  Dispatch, SetStateAction, useContext, useMemo, useCallback,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+import { CoinSelectorOptionProps } from '../../components/CoinSelector/CoinSelectorOption';
+import { SelectInput } from '../../components/FormComponents/SelectInput/SelectInput';
+import { TextInputForm } from '../../components/FormComponents/TextInputForm/TextInputForm';
+import { HeaderNavigation } from '../../components/Header/HeaderNavigation';
+import { SimpleLayout } from '../../components/SimpleLayout/SimpleLayout';
+import { useAnalytics, UserJourney } from '../../context/analytics-provider/SegmentAnalyticsProvider';
+import { CryptoFiatContext } from '../../context/crypto-fiat-context/CryptoFiatContext';
+import { EventTargetContext } from '../../context/event-target-context/EventTargetContext';
+import { orchestrationEvents } from '../../lib/orchestrationEvents';
+import {
+  tokenValueFormat, getDefaultTokenImage, calculateCryptoToFiat, formatZeroAmount,
+} from '../../lib/utils';
+import { amountInputValidation } from '../../lib/validations/amountInputValidations';
+import { StrongCheckoutWidgetsConfig } from '../../lib/withDefaultWidgetConfig';
+import { TransferFormState, TransferState } from './context';
+import { getOptionKey, getFiatAmount, validatePartialAddress } from './functions';
+import { sendCloseWidgetEvent } from '../connect/connectWidgetEvents';
+
+export function TransferForm({
+  config,
+  viewState,
+  setViewState,
+  onSend,
+  showBackButton,
+}: {
+  config: StrongCheckoutWidgetsConfig;
+  viewState: TransferFormState;
+  setViewState: Dispatch<SetStateAction<TransferState>>;
+  onSend: () => void;
+  showBackButton: boolean | undefined;
+}) {
+  const { t } = useTranslation();
+  const { track } = useAnalytics();
+  const { eventTargetState: { eventTarget } } = useContext(EventTargetContext);
+  const { cryptoFiatState } = useContext(CryptoFiatContext);
+
+  const tokenOptions = useMemo(
+    () =>
+      viewState.allowedBalances.map<CoinSelectorOptionProps>(
+        (tokenBalance) => ({
+          id: getOptionKey(tokenBalance.token),
+          name: tokenBalance.token.name,
+          symbol: tokenBalance.token.symbol,
+          defaultTokenImage: tokenBalance.token.icon || 'TODO',
+          balance: {
+            formattedAmount: tokenValueFormat(tokenBalance.formattedBalance),
+            formattedFiatAmount: getFiatAmount(cryptoFiatState, tokenBalance),
+          },
+        }),
+      ),
+    [viewState.allowedBalances, cryptoFiatState],
+  );
+
+  const token = useMemo(
+    () => tokenOptions.find((option) => option.id === viewState.tokenAddress),
+    [tokenOptions, viewState.tokenAddress],
+  );
+
+  const defaultTokenImage = useMemo(
+    () =>
+      getDefaultTokenImage(viewState.checkout.config.environment, config.theme),
+    [viewState.checkout.config.environment, config.theme],
+  );
+
+  const fromFiatValue = useMemo(
+    () =>
+      calculateCryptoToFiat(
+        viewState.amount,
+        token?.symbol || '',
+        cryptoFiatState.conversions,
+      ),
+    [viewState.amount, token, cryptoFiatState.conversions],
+  );
+
+  const handleTokenChange = useCallback(
+    (optionKey: OptionKey) => {
+      track({
+        screen: 'TransferToken',
+        userJourney: UserJourney.TRANSFER,
+        control: 'SelectToken',
+        controlType: 'Select',
+        extras: { token: optionKey },
+      });
+      if (typeof optionKey !== 'string') throw new Error('Invalid token address');
+      setViewState((s) => ({ ...s, tokenAddress: optionKey, amountError: '' }));
+    },
+    [tokenOptions, token],
+  );
+
+  const handleMaxButtonClick = useCallback(() => {
+    if (!token) throw new Error('Token not found');
+    if (!token.balance) throw new Error('Token balance not found');
+
+    track({
+      screen: 'TransferToken',
+      userJourney: UserJourney.TRANSFER,
+      control: 'Max',
+      controlType: 'Button',
+      extras: { token: token.id, amount: token.balance.formattedAmount },
+    });
+
+    setViewState((s) => {
+      if (!token.balance) throw new Error('Token balance not found');
+      return { ...s, amount: token.balance.formattedAmount };
+    });
+  }, [tokenOptions, token]);
+
+  const handleRecipientAddressChange = useCallback((value: string) => {
+    setViewState((s) => ({ ...s, toAddress: value, toAddressError: '' }));
+  }, []);
+
+  const handleAmountChange = useCallback((value: string) => {
+    setViewState((s) => ({ ...s, amount: value, amountError: '' }));
+  }, []);
+
+  const selectSubtext = useMemo(() => {
+    if (!token) return '';
+    return `${t('views.TRANSFER.content.availableBalancePrefix')} ${
+      token.balance?.formattedAmount
+    }`;
+  }, [token]);
+
+  const isButtonDisabled = useMemo(
+    () => !viewState.amount || !viewState.toAddress || !token,
+    [viewState.amount, viewState.toAddress, token],
+  );
+
+  return (
+    <SimpleLayout
+      header={(
+        <HeaderNavigation
+          title={t('views.TRANSFER.header.title')}
+          onCloseButtonClick={() => sendCloseWidgetEvent(eventTarget)}
+          showBack={showBackButton}
+          onBackButtonClick={() => {
+            orchestrationEvents.sendRequestGoBackEvent(
+              eventTarget,
+              IMTBLWidgetEvents.IMTBL_TRANSFER_WIDGET_EVENT,
+              {},
+            );
+          }}
+        />
+      )}
+    >
+      <Stack
+        justifyContent="space-between"
+        sx={{
+          height: '100%',
+          mt: 'base.spacing.x6',
+          mx: 'base.spacing.x4',
+          mb: 'base.spacing.x10',
+        }}
+      >
+        <Stack gap="base.spacing.x9">
+          <Stack gap="base.spacing.x1">
+            <Heading size="xSmall">
+              {t('views.TRANSFER.form.coinAmountHeading')}
+            </Heading>
+            <SelectInput
+              testId="transfer-token-select"
+              options={tokenOptions}
+              textInputValue={viewState.amount}
+              textInputPlaceholder="0"
+              textInputTextAlign="right"
+              coinSelectorHeading={t('views.TRANSFER.form.coinSelectorHeading')}
+              textInputMaxButtonClick={token ? handleMaxButtonClick : undefined}
+              textInputValidator={amountInputValidation}
+              textInputErrorMessage={viewState.amountError}
+              selectSubtext={selectSubtext}
+              textInputSubtext={`${t(
+                'views.TRANSFER.content.fiatPricePrefix',
+              )} $${formatZeroAmount(fromFiatValue, true)}`}
+              onTextInputChange={handleAmountChange}
+              onSelectChange={handleTokenChange}
+              selectedOption={token?.id}
+              defaultTokenImage={defaultTokenImage}
+              userJourney={UserJourney.TRANSFER}
+              screen="TransferToken"
+              control="Token"
+            />
+          </Stack>
+          <Stack gap="base.spacing.x1">
+            <Heading size="xSmall">
+              {t('views.TRANSFER.form.toAddressHeading')}
+            </Heading>
+            <TextInputForm
+              testId="transfer-to-address-input"
+              value={viewState.toAddress}
+              placeholder="0x"
+              validator={validatePartialAddress}
+              onTextInputChange={handleRecipientAddressChange}
+              errorMessage={viewState.toAddressError}
+            />
+          </Stack>
+        </Stack>
+        <Box>
+          <Body
+            rc={<div />}
+            size="xSmall"
+            weight="bold"
+            sx={{ color: 'base.color.text.status.fatal.primary' }}
+          >
+            {t('views.TRANSFER.content.notAllExchangesSupportImmutableZkEVM')}
+          </Body>
+          <Body
+            rc={<div />}
+            size="xxSmall"
+            weight="regular"
+            sx={{ mb: 'base.spacing.x4' }}
+          >
+            {t(
+              'views.TRANSFER.content.notAllExchangesSupportImmutableZkEVMDescription',
+            )}
+          </Body>
+          <Button
+            sx={{ width: '100%' }}
+            variant="primary"
+            size="large"
+            disabled={isButtonDisabled}
+            onClick={onSend}
+          >
+            {t('views.TRANSFER.form.buttonText')}
+          </Button>
+        </Box>
+      </Stack>
+    </SimpleLayout>
+  );
+}

package/src/widgets/transfer/TransferWidget.tsx

@@ -0,0 +1,264 @@
+/* eslint-disable react/destructuring-assignment */
+/* eslint-disable max-len */
+import { TransferWidgetParams } from '@imtbl/checkout-sdk';
+import {
+  useCallback, useContext, useEffect, useState,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+import { CloudImage, Stack, useTheme } from '@biom3/react';
+
+import { isAddress, isError, parseUnits } from 'ethers';
+import { StrongCheckoutWidgetsConfig } from '../../lib/withDefaultWidgetConfig';
+import { LoadingView } from '../../views/loading/LoadingView';
+import {
+  useAnalytics,
+  UserJourney,
+} from '../../context/analytics-provider/SegmentAnalyticsProvider';
+import { ConnectLoaderContext } from '../../context/connect-loader-context/ConnectLoaderContext';
+import { getRemoteImage } from '../../lib/utils';
+import {
+  CryptoFiatActions,
+  CryptoFiatContext,
+} from '../../context/crypto-fiat-context/CryptoFiatContext';
+import { CryptoFiatProvider } from '../../context/crypto-fiat-context/CryptoFiatProvider';
+import { sendTokens, loadBalances } from './functions';
+import { getL2ChainId } from '../../lib';
+import { TransferComplete } from './TransferComplete';
+import { SendingTokens } from './SendingTokens';
+import { AwaitingApproval } from './AwaitingApproval';
+import { TransferState } from './context';
+import { TransferForm } from './TransferForm';
+import { sendFailedEvent, sendRejectedEvent, sendSuccessEvent } from './events';
+import { EventTargetContext } from '../../context/event-target-context/EventTargetContext';
+
+export type TransferWidgetInputs = TransferWidgetParams & {
+  config: StrongCheckoutWidgetsConfig;
+};
+
+const TRANSACTION_CANCELLED_ERROR_CODE = -32003;
+
+function TransferWidgetInner(props: TransferWidgetInputs) {
+  const { t } = useTranslation();
+  const { cryptoFiatDispatch } = useContext(CryptoFiatContext);
+  const { eventTargetState: { eventTarget } } = useContext(EventTargetContext);
+  const { track } = useAnalytics();
+
+  const {
+    connectLoaderState: { checkout, provider },
+  } = useContext(ConnectLoaderContext);
+
+  const [viewState, setViewState] = useState<TransferState>({
+    type: 'INITIALISING',
+  });
+
+  useEffect(() => {
+    const x = async () => {
+      if (viewState.type !== 'INITIALISING') return;
+      if (!checkout || !provider) return;
+
+      const tokensAndBalances = await loadBalances(checkout, provider);
+
+      cryptoFiatDispatch({
+        payload: {
+          type: CryptoFiatActions.SET_TOKEN_SYMBOLS,
+          tokenSymbols: tokensAndBalances.allowedBalances.map(
+            (tb) => tb.token.symbol,
+          ),
+        },
+      });
+
+      setViewState({
+        type: 'FORM',
+        allowedBalances: tokensAndBalances.allowedBalances,
+        checkout,
+        provider,
+        amount: props.amount || '',
+        amountError: '',
+        tokenAddress: props.tokenAddress || '',
+        toAddress: props.toAddress || '',
+        toAddressError: '',
+      });
+    };
+
+    x();
+  }, [checkout]);
+
+  const resetForm = useCallback(() => {
+    if (viewState.type === 'INITIALISING') return;
+
+    setViewState({
+      type: 'FORM',
+      allowedBalances: viewState.allowedBalances,
+      checkout: viewState.checkout,
+      provider: viewState.provider,
+      amount: '',
+      amountError: '',
+      tokenAddress: '',
+      toAddress: '',
+      toAddressError: '',
+    });
+  }, [checkout, provider, viewState]);
+
+  const onSend = useCallback(async () => {
+    if (viewState.type !== 'FORM') throw new Error('Unexpected state');
+
+    track({
+      screen: 'TransferToken',
+      userJourney: UserJourney.TRANSFER,
+      control: 'Send',
+      controlType: 'Button',
+      extras: { token: viewState.tokenAddress, amount: viewState.amount },
+    });
+
+    if (!isAddress(viewState.toAddress)) {
+      setViewState((s) => ({ ...s, toAddressError: 'Invalid wallet address' }));
+      return;
+    }
+
+    const tokenInfo = viewState.allowedBalances.find(
+      (tb) => tb.token.address === viewState.tokenAddress,
+    );
+    if (!tokenInfo) throw new Error('Token not found');
+
+    if (
+      tokenInfo.balance < parseUnits(viewState.amount, tokenInfo.token.decimals)
+    ) {
+      setViewState((s) => ({ ...s, amountError: 'Insufficient balance' }));
+      return;
+    }
+
+    setViewState({
+      type: 'AWAITING_APPROVAL',
+      checkout: viewState.checkout,
+      provider: viewState.provider,
+      allowedBalances: viewState.allowedBalances,
+    });
+
+    try {
+      const txResponse = await sendTokens(
+        viewState.provider,
+        tokenInfo,
+        viewState.toAddress,
+        viewState.amount,
+      );
+
+      setViewState({
+        type: 'TRANSFERRING',
+        checkout: viewState.checkout,
+        provider: viewState.provider,
+        allowedBalances: viewState.allowedBalances,
+      });
+
+      const receipt = await txResponse.wait();
+      if (!receipt) {
+        sendFailedEvent(eventTarget, 'Transaction failed');
+        setViewState({ ...viewState, type: 'FORM' }); // TODO: We should be showing a failed view here
+        return;
+      }
+
+      sendSuccessEvent(eventTarget, receipt.hash);
+
+      setViewState({
+        type: 'COMPLETE',
+        receipt,
+        chainId: getL2ChainId(viewState.checkout.config),
+        checkout: viewState.checkout,
+        provider: viewState.provider,
+        allowedBalances: viewState.allowedBalances,
+      });
+    } catch (e) {
+      setViewState({
+        type: 'FORM',
+        allowedBalances: viewState.allowedBalances,
+        checkout: viewState.checkout,
+        provider: viewState.provider,
+        amount: viewState.amount,
+        amountError: viewState.amountError,
+        tokenAddress: viewState.tokenAddress,
+        toAddress: viewState.toAddress,
+        toAddressError: viewState.toAddressError,
+      });
+      if (
+        isError(e, 'UNKNOWN_ERROR')
+        && e.error
+        && 'code' in e.error
+        && e.error.code === TRANSACTION_CANCELLED_ERROR_CODE
+      ) {
+        track({
+          screen: 'TransferToken',
+          userJourney: UserJourney.TRANSFER,
+          control: 'TranactionCancel',
+          controlType: 'Event',
+          extras: { token: viewState.tokenAddress, amount: viewState.amount },
+        });
+        sendRejectedEvent(eventTarget, 'Transaction cancelled');
+      } else {
+        // eslint-disable-next-line no-console
+        console.error(e); // TODO: where can we send these?
+        sendFailedEvent(eventTarget, 'Transaction failed');
+        setViewState({ ...viewState, type: 'FORM' }); // TODO: We should be showing a failed view here
+      }
+    }
+  }, [viewState, eventTarget]);
+
+  switch (viewState.type) {
+    case 'INITIALISING':
+      return <LoadingView loadingText={t('views.LOADING_VIEW.text')} />;
+    case 'FORM':
+      return (
+        <TransferForm
+          config={props.config}
+          viewState={viewState}
+          setViewState={setViewState}
+          onSend={onSend}
+          showBackButton={props.showBackButton}
+        />
+      );
+    case 'AWAITING_APPROVAL':
+      return <AwaitingApproval config={props.config} />;
+    case 'TRANSFERRING':
+      return <SendingTokens config={props.config} />;
+    case 'COMPLETE':
+      return (
+        <TransferComplete
+          config={props.config}
+          viewState={viewState}
+          onContinue={resetForm}
+        />
+      );
+    default:
+      throw new Error('Invalid view state');
+  }
+}
+
+export default function TransferWidget(props: TransferWidgetInputs) {
+  const {
+    base: { colorMode },
+  } = useTheme();
+
+  return (
+    <CryptoFiatProvider environment={props.config.environment}>
+      <Stack sx={{ pos: 'relative' }}>
+        <CloudImage
+          use={(
+            <img
+              src={getRemoteImage(
+                props.config.environment,
+                `/add-tokens-bg-texture-${colorMode}.webp`,
+              )}
+              alt="blurry bg texture"
+            />
+          )}
+          sx={{
+            pos: 'absolute',
+            h: '100%',
+            w: '100%',
+            objectFit: 'cover',
+            objectPosition: 'center',
+          }}
+        />
+        <TransferWidgetInner {...props} />
+      </Stack>
+    </CryptoFiatProvider>
+  );
+}

package/src/widgets/transfer/context.ts

@@ -0,0 +1,53 @@
+import { Checkout, WrappedBrowserProvider, GetBalanceResult } from '@imtbl/checkout-sdk';
+import { TransactionReceipt } from 'ethers';
+import { createContext, useContext } from 'react';
+
+export type TransferFormState = {
+  type: 'FORM';
+  allowedBalances: GetBalanceResult[];
+  checkout: Checkout;
+  provider: WrappedBrowserProvider;
+  amount: string;
+  amountError: string;
+  tokenAddress: string;
+  toAddress: string;
+  toAddressError: string;
+};
+
+export type TransferCompleteState = {
+  type: 'COMPLETE';
+  receipt: TransactionReceipt;
+  chainId: number;
+  checkout: Checkout;
+  provider: WrappedBrowserProvider;
+  allowedBalances: GetBalanceResult[];
+};
+
+export type TransferState =
+  | { type: 'INITIALISING' }
+  | TransferFormState
+  | {
+    type: 'AWAITING_APPROVAL';
+    checkout: Checkout;
+    provider: WrappedBrowserProvider;
+    allowedBalances: GetBalanceResult[];
+  }
+  | {
+    type: 'TRANSFERRING';
+    checkout: Checkout;
+    provider: WrappedBrowserProvider;
+    allowedBalances: GetBalanceResult[];
+  }
+  | TransferCompleteState;
+
+const transferContext = createContext<TransferState | null>(null);
+
+export const useTransferContext = () => {
+  const context = useContext(transferContext);
+  if (!context) {
+    throw new Error(
+      'useTransferContext must be used within a TransferContextProvider',
+    );
+  }
+  return context;
+};

package/src/widgets/transfer/events.ts

@@ -0,0 +1,59 @@
+import {
+  WidgetEvent,
+  TransferEventType,
+  IMTBLWidgetEvents,
+  WidgetType,
+} from '@imtbl/checkout-sdk';
+
+export const sendSuccessEvent = (eventTarget: Window | EventTarget, transactionHash: string) => {
+  const successEvent = new CustomEvent<WidgetEvent<WidgetType.TRANSFER, TransferEventType.SUCCESS>>(
+    IMTBLWidgetEvents.IMTBL_TRANSFER_WIDGET_EVENT,
+    {
+      detail: {
+        type: TransferEventType.SUCCESS,
+        data: {
+          transactionHash,
+        },
+      },
+    },
+  );
+  // eslint-disable-next-line no-console
+  console.log('transfer success event:', eventTarget, successEvent);
+  if (eventTarget !== undefined) eventTarget.dispatchEvent(successEvent);
+};
+
+export const sendFailedEvent = (eventTarget: Window | EventTarget, reason: string) => {
+  const failedEvent = new CustomEvent<WidgetEvent<WidgetType.TRANSFER, TransferEventType.FAILURE>>(
+    IMTBLWidgetEvents.IMTBL_TRANSFER_WIDGET_EVENT,
+    {
+      detail: {
+        type: TransferEventType.FAILURE,
+        data: {
+          reason,
+          timestamp: new Date().getTime(),
+        },
+      },
+    },
+  );
+  // eslint-disable-next-line no-console
+  console.log('transfer failed event:', eventTarget, failedEvent);
+  if (eventTarget !== undefined) eventTarget.dispatchEvent(failedEvent);
+};
+
+export const sendRejectedEvent = (eventTarget: Window | EventTarget, reason: string) => {
+  const rejectedEvent = new CustomEvent<WidgetEvent<WidgetType.TRANSFER, TransferEventType.REJECTED>>(
+    IMTBLWidgetEvents.IMTBL_TRANSFER_WIDGET_EVENT,
+    {
+      detail: {
+        type: TransferEventType.REJECTED,
+        data: {
+          reason,
+          timestamp: new Date().getTime(),
+        },
+      },
+    },
+  );
+  // eslint-disable-next-line no-console
+  console.log('transfer rejected event:', eventTarget, rejectedEvent);
+  if (eventTarget !== undefined) eventTarget.dispatchEvent(rejectedEvent);
+};