From ad8c95947c73f9b2c169926e688fc580c7565719 Mon Sep 17 00:00:00 2001 From: Jhonatan Gonzalez Date: Wed, 6 Mar 2024 15:22:56 +1100 Subject: [PATCH] Fix: [GPR-468/468/470][Sale widget] speed up payment flow by removing unnecessary views (#1569) --- .../checkout/widgets-lib/src/locales/en.json | 21 +++++++++++-------- .../checkout/widgets-lib/src/locales/ja.json | 7 +++---- .../checkout/widgets-lib/src/locales/ko.json | 13 ++++-------- .../checkout/widgets-lib/src/locales/zh.json | 5 ++--- .../src/views/loading/LoadingView.tsx | 13 +++++++++--- .../src/widgets/sale/SaleWidgetRoot.tsx | 7 ++++--- .../src/widgets/sale/views/PayWithCoins.tsx | 20 +++++++----------- 7 files changed, 43 insertions(+), 43 deletions(-) diff --git a/packages/checkout/widgets-lib/src/locales/en.json b/packages/checkout/widgets-lib/src/locales/en.json index 33ad852642..1510594d7c 100644 --- a/packages/checkout/widgets-lib/src/locales/en.json +++ b/packages/checkout/widgets-lib/src/locales/en.json @@ -56,11 +56,7 @@ }, "ERROR_VIEW": { "heading": "Something's gone wrong", - "body": [ - "You can try again or contact", - "support", - "for help." - ], + "body": ["You can try again or contact", "support", "for help."], "actionText": "Try again" }, "SERVICE_UNAVAILABLE_ERROR_VIEW": { @@ -287,9 +283,16 @@ "captionCTA": "add coins" }, "loading": { - "ready": "Ready to purchase", - "confirm": "Confirm in your wallet", - "processing": "Processing purchase" + "ready": [ + "Collecting your order", + "Talking to wallet", + "Readying assets" + ], + "processing": [ + "Initialising payment", + "Securing your assets", + "Finalising payment" + ] } }, "PAY_WITH_COINS": { @@ -650,4 +653,4 @@ "switchButton": "Switch to {{chain}}" } } -} \ No newline at end of file +} diff --git a/packages/checkout/widgets-lib/src/locales/ja.json b/packages/checkout/widgets-lib/src/locales/ja.json index 55c5f957a2..301b4574be 100644 --- a/packages/checkout/widgets-lib/src/locales/ja.json +++ b/packages/checkout/widgets-lib/src/locales/ja.json @@ -290,9 +290,8 @@ "captionCTA": "コインを追加" }, "loading": { - "ready": "購入準備完了", - "confirm": "ウォレットで確認してください", - "processing": "購入処理中" + "ready": ["注文を受け取り中", "ウォレットと通信中", "資産を準備中"], + "processing": ["支払いを初期化中", "資産を確保中", "支払いを完了中"] } }, "PAY_WITH_COINS": { @@ -643,4 +642,4 @@ "switchButton": "{{chain}}に切り替える" } } -} \ No newline at end of file +} diff --git a/packages/checkout/widgets-lib/src/locales/ko.json b/packages/checkout/widgets-lib/src/locales/ko.json index 5ed349d65c..a3449b78b6 100644 --- a/packages/checkout/widgets-lib/src/locales/ko.json +++ b/packages/checkout/widgets-lib/src/locales/ko.json @@ -56,11 +56,7 @@ }, "ERROR_VIEW": { "heading": "문제가 발생했습니다", - "body": [ - "다시 시도하거나", - "지원팀에", - "도움을 요청하세요." - ], + "body": ["다시 시도하거나", "지원팀에", "도움을 요청하세요."], "actionText": "다시 시도" }, "SERVICE_UNAVAILABLE_ERROR_VIEW": { @@ -287,9 +283,8 @@ "captionCTA": "코인 추가" }, "loading": { - "ready": "구매 준비 완료", - "confirm": "지갑에서 확인하세요", - "processing": "구매 처리 중" + "ready": ["주문 수집 중", "지갑과 대화 중", "자산 준비 중"], + "processing": ["결제 초기화 중", "자산 보호 중", "결제 완료 중"] } }, "PAY_WITH_COINS": { @@ -640,4 +635,4 @@ "switchButton": "{{chain}}로 전환하기" } } -} \ No newline at end of file +} diff --git a/packages/checkout/widgets-lib/src/locales/zh.json b/packages/checkout/widgets-lib/src/locales/zh.json index 7ca88df3b7..b8a06f08d1 100644 --- a/packages/checkout/widgets-lib/src/locales/zh.json +++ b/packages/checkout/widgets-lib/src/locales/zh.json @@ -283,9 +283,8 @@ "captionCTA": "添加硬币" }, "loading": { - "ready": "准备购买", - "confirm": "在您的钱包中确认", - "processing": "正在处理购买" + "ready": ["正在收集您的订单", "正在与钱包交流", "正在准备资产"], + "processing": ["正在初始化支付", "正在保护您的资产", "正在完成支付"] } }, "PAY_WITH_COINS": { diff --git a/packages/checkout/widgets-lib/src/views/loading/LoadingView.tsx b/packages/checkout/widgets-lib/src/views/loading/LoadingView.tsx index a2624aaeb5..5e44f67ee9 100644 --- a/packages/checkout/widgets-lib/src/views/loading/LoadingView.tsx +++ b/packages/checkout/widgets-lib/src/views/loading/LoadingView.tsx @@ -2,14 +2,21 @@ import { LoadingOverlay } from '@biom3/react'; import { SimpleLayout } from '../../components/SimpleLayout/SimpleLayout'; export interface LoadingViewProps { - loadingText: string; + loadingText: string | string[]; + textDuration?: number; } -export function LoadingView({ loadingText }: LoadingViewProps) { +export function LoadingView({ loadingText, textDuration }: LoadingViewProps) { + const text = Array.isArray(loadingText) ? loadingText : [loadingText]; + const duration = textDuration || 2500; + return ( - + diff --git a/packages/checkout/widgets-lib/src/widgets/sale/SaleWidgetRoot.tsx b/packages/checkout/widgets-lib/src/widgets/sale/SaleWidgetRoot.tsx index 713fd0d4d9..94a896816d 100644 --- a/packages/checkout/widgets-lib/src/widgets/sale/SaleWidgetRoot.tsx +++ b/packages/checkout/widgets-lib/src/widgets/sale/SaleWidgetRoot.tsx @@ -103,13 +103,14 @@ export class Sale extends Base { checkout: this.checkout, allowedChains: [getL2ChainId(this.checkout!.config)], }; + const config = this.strongConfig(); this.reactRoot.render( - + { sendSaleWidgetCloseEvent(window); @@ -117,7 +118,7 @@ export class Sale extends Base { > }> 0 && executedTxns === expectedTxns) { + if (executedTxns >= 1) { loadingText = t('views.PAYMENT_METHODS.loading.processing'); } - if (signResponse !== undefined) { - loadingText = `${loadingText} ${executedTxns}/${expectedTxns}`; - } - const sendTransaction = async () => { execute( signResponse, @@ -48,7 +44,7 @@ export function PayWithCoins() { useEffect(() => { if (executeResponse?.done === true) { - goToSuccessView(); + sendCloseEvent(SaleWidgetViews.SALE_SUCCESS); } }, [executeResponse]);