feat(checkout): Add optional param to display Send title on Transfer widget (#2734)

Author: allan-almeida-imtbl

packages/checkout/sdk/src/widgets/definitions/configurations/transfer.ts

@@ -5,5 +5,6 @@ import { WidgetConfiguration } from './widget';
  */
 export type TransferWidgetConfiguration = {
   customTitle?: string;
+  customCoinAmountTitle?: string;
   showHeader?: boolean;
 } & WidgetConfiguration;

packages/checkout/widgets-lib/src/widgets/transfer/TransferForm.tsx

@@ -31,6 +31,7 @@ export function TransferForm({
   showBackButton,
   showHeader,
   title,
+  coinAmountTitle,
 }: {
   config: StrongCheckoutWidgetsConfig;
   viewState: TransferFormState;
@@ -39,6 +40,7 @@ export function TransferForm({
   showBackButton: boolean | undefined;
   showHeader: boolean;
   title: string;
+  coinAmountTitle: string;
 }) {
   const { t } = useTranslation();
   const { track } = useAnalytics();
@@ -166,7 +168,7 @@ export function TransferForm({
         <Stack gap="base.spacing.x9">
           <Stack gap="base.spacing.x1">
             <Heading size="xSmall">
-              {t('views.TRANSFER.form.coinAmountHeading')}
+              {coinAmountTitle}
             </Heading>
             <SelectInput
               testId="transfer-token-select"

packages/checkout/widgets-lib/src/widgets/transfer/TransferWidget.tsx

@@ -207,6 +207,7 @@ function TransferWidgetInner(props: TransferWidgetInputs) {
           showBackButton={props.showBackButton}
           showHeader={props.transferConfig.showHeader ?? true}
           title={props.transferConfig.customTitle ?? t('views.TRANSFER.header.title')}
+          coinAmountTitle={props.transferConfig.customCoinAmountTitle ?? t('views.TRANSFER.form.coinAmountHeading')}
         />
       );
     case 'AWAITING_APPROVAL':

packages/checkout/widgets-sample-app/src/components/ui/checkout/checkout.tsx

@@ -301,6 +301,8 @@ function CheckoutUI() {
         },
         TRANSFER: {
           customTitle: "Dromedary Transfer",
+          customCoinAmountTitle: "Send dromedary",
+          // showHeader: false,
         },
         /*
         ONRAMP: {