From adf97ffe5d5d058e9da02fa8fa3cfa9d26c41480 Mon Sep 17 00:00:00 2001 From: Ji Young Lee <641712+jiyounglee@users.noreply.github.com> Date: Wed, 23 Oct 2024 10:46:44 +1100 Subject: [PATCH] [NO CHANGELOG] [Add Funds Widget] Add Geo Block error for AU and USA (#2339) --- .../view-context/AddFundsViewContextTypes.ts | 7 ++- .../checkout/widgets-lib/src/locales/en.json | 10 +++- .../checkout/widgets-lib/src/locales/ja.json | 51 ++++++++++++++++- .../checkout/widgets-lib/src/locales/ko.json | 55 +++++++++++++++++-- .../checkout/widgets-lib/src/locales/zh.json | 55 +++++++++++++++++-- .../src/views/error/serviceTypes.ts | 1 + .../src/widgets/add-funds/AddFundsWidget.tsx | 52 ++++++++++++++++++ .../src/components/ui/add-funds/addFunds.tsx | 28 ++++++++-- 8 files changed, 241 insertions(+), 18 deletions(-) diff --git a/packages/checkout/widgets-lib/src/context/view-context/AddFundsViewContextTypes.ts b/packages/checkout/widgets-lib/src/context/view-context/AddFundsViewContextTypes.ts index 6819154679..186a0b6c86 100644 --- a/packages/checkout/widgets-lib/src/context/view-context/AddFundsViewContextTypes.ts +++ b/packages/checkout/widgets-lib/src/context/view-context/AddFundsViewContextTypes.ts @@ -4,9 +4,10 @@ import { ViewType } from './ViewType'; export enum AddFundsWidgetViews { ADD_FUNDS = 'ADD_FUNDS', REVIEW = 'REVIEW', + GEO_BLOCK_ERROR = 'GEO_BLOCK_ERROR', } -export type AddFundsWidgetView = AddFundsView | AddFundsReview; +export type AddFundsWidgetView = AddFundsView | AddFundsReview | GeoBlockErrorView; interface AddFundsView extends ViewType { type: AddFundsWidgetViews.ADD_FUNDS; @@ -17,6 +18,10 @@ interface AddFundsReview extends ViewType { data: AddFundsReviewData; } +interface GeoBlockErrorView extends ViewType { + type: AddFundsWidgetViews.GEO_BLOCK_ERROR; +} + export interface AddFundsReviewData { balance: TokenBalance; toAmount: string; diff --git a/packages/checkout/widgets-lib/src/locales/en.json b/packages/checkout/widgets-lib/src/locales/en.json index c241aed494..8fc7af899f 100644 --- a/packages/checkout/widgets-lib/src/locales/en.json +++ b/packages/checkout/widgets-lib/src/locales/en.json @@ -71,11 +71,13 @@ "SERVICE_UNAVAILABLE_ERROR_VIEW": { "heading": { "swap": "Swapping is not available in your region", - "generic": "This service is not available in your region" + "generic": "This service is not available in your region", + "addFunds": "This is not available in your region" }, "body": { "swap": "Please refer to Quickswap’s website for further information.", - "generic": "For further assistance visit the Immutable support page." + "generic": "For further assistance visit the Immutable support page.", + "addFunds": "Please add tokens another way" } }, "LOADING_VIEW": { @@ -679,6 +681,10 @@ }, "footer": { "body": "Swap functionality is powered by a third party, Squid. Immutable neither builds, owns, operates or deploys Squid." + }, + "geoBlockError": { + "buyTokenButton": "Buy tokens", + "bridgeTokenButton": "Bridge tokens" } } }, diff --git a/packages/checkout/widgets-lib/src/locales/ja.json b/packages/checkout/widgets-lib/src/locales/ja.json index da86bd4839..8c9309efac 100644 --- a/packages/checkout/widgets-lib/src/locales/ja.json +++ b/packages/checkout/widgets-lib/src/locales/ja.json @@ -75,11 +75,13 @@ "SERVICE_UNAVAILABLE_ERROR_VIEW": { "heading": { "swap": "お住まいの地域では交換が利用できません", - "generic": "このサービスはお住まいの地域では利用できません" + "generic": "このサービスはお住まいの地域では利用できません", + "addFunds": "このサービスはお住まいの地域では利用できません" }, "body": { "swap": "Quickswapのウェブサイトで詳細情報をご覧ください。", - "generic": "詳しいサポートについては、Immutableサポートページをご覧ください." + "generic": "詳しいサポートについては、Immutableサポートページをご覧ください.", + "addFunds": "別の方法でトークンを追加してください。" } }, "LOADING_VIEW": { @@ -626,6 +628,51 @@ "actionText": "再試行" } } + }, + "ADD_FUNDS": { + "drawer": { + "options": { + "swap": { + "heading": "スワップ", + "caption": "このネットワークでトークンをスワップします。", + "disabledCaption": "現在利用できません。" + }, + "debit": { + "heading": "デビットカード", + "caption": "", + "disabledCaption": "選択した内容には利用できません。トークンを追加することをお勧めします。" + }, + "credit": { + "heading": "クレジットカード", + "caption": "失敗や追加手数料が発生する可能性があります。", + "disabledCaption": "選択した内容には利用できません。トークンを追加することをお勧めします。" + } + } + }, + "onboarding": { + "screen1": { + "title": "Immutableでの支払いが進化しました", + "caption": "よく聞いてください", + "buttonText": "次へ" + }, + "screen2": { + "title": "トークンをPassportに転送し、\n任意のウォレットから支払います", + "caption": "進化した内容", + "buttonText": "次へ" + }, + "screen3": { + "title": "他のチェーンでトークンを使用して支払う、\n最適なオプションを見つけます", + "caption": "進化", + "buttonText": "支払いに使用するウォレットを選択" + } + }, + "footer": { + "body": "スワップ機能はサードパーティであるSquidによって提供されています。ImmutableはSquidを構築、所有、運営、またはデプロイしていません。" + }, + "geoBlockError": { + "buyTokenButton": "トークンを購入する", + "bridgeTokenButton": "トークンをブリッジする" + } } }, "footers": { diff --git a/packages/checkout/widgets-lib/src/locales/ko.json b/packages/checkout/widgets-lib/src/locales/ko.json index 99a0aafba9..7e17a83125 100644 --- a/packages/checkout/widgets-lib/src/locales/ko.json +++ b/packages/checkout/widgets-lib/src/locales/ko.json @@ -70,12 +70,14 @@ }, "SERVICE_UNAVAILABLE_ERROR_VIEW": { "heading": { - "swap": "귀하의 지역에서는 스왑이 가능하지 않습니다", - "generic": "이 서비스는 귀하의 지역에서 이용할 수 없습니다" + "swap": "해당 지역에서는 스왑을 이용할 수 없습니다", + "generic": "이 서비스는 귀하의 지역에서 사용할 수 없습니다", + "addFunds": "이 서비스는 귀하의 지역에서 사용할 수 없습니다" }, "body": { - "swap": "자세한 정보는 Quickswap 웹사이트를 참조하십시오.", - "generic": "추가 지원이 필요하시면 Immutable 지원 페이지를 방문하세요." + "swap": "Quickswap 웹사이트에서 자세한 내용을 확인하세요.", + "generic": "자세한 내용은 Immutable 지원 페이지를 참조하세요.", + "addFunds": "다른 방법으로 토큰을 추가해 주세요." } }, "LOADING_VIEW": { @@ -619,6 +621,51 @@ "actionText": "다시 시도" } } + }, + "ADD_FUNDS": { + "drawer": { + "options": { + "swap": { + "heading": "스왑", + "caption": "이 네트워크에서 토큰을 스왑합니다.", + "disabledCaption": "현재 이용할 수 없습니다." + }, + "debit": { + "heading": "직불카드", + "caption": "", + "disabledCaption": "선택한 항목에서 사용할 수 없습니다. 토큰 추가를 권장합니다." + }, + "credit": { + "heading": "신용카드", + "caption": "실패하거나 추가 수수료가 발생할 수 있습니다.", + "disabledCaption": "선택한 항목에서 사용할 수 없습니다. 토큰 추가를 권장합니다." + } + } + }, + "onboarding": { + "screen1": { + "title": "Immutable에서 결제가 진화했습니다", + "caption": "잘 들으세요", + "buttonText": "다음" + }, + "screen2": { + "title": "토큰을 Passport로 전달하고,\n어떤 지갑에서든지 결제하세요", + "caption": "진화된 내용", + "buttonText": "다음" + }, + "screen3": { + "title": "다른 체인의 토큰으로 결제하고,\n최적의 옵션을 찾아드립니다", + "caption": "진화", + "buttonText": "결제할 지갑을 선택하세요" + } + }, + "footer": { + "body": "스왑 기능은 제3자인 Squid에 의해 제공됩니다. Immutable은 Squid를 구축, 소유, 운영 또는 배포하지 않습니다." + }, + "geoBlockError": { + "buyTokenButton": "토큰 구매", + "bridgeTokenButton": "토큰 브릿지" + } } }, "footers": { diff --git a/packages/checkout/widgets-lib/src/locales/zh.json b/packages/checkout/widgets-lib/src/locales/zh.json index 856eb65e02..5186e03768 100644 --- a/packages/checkout/widgets-lib/src/locales/zh.json +++ b/packages/checkout/widgets-lib/src/locales/zh.json @@ -70,12 +70,14 @@ }, "SERVICE_UNAVAILABLE_ERROR_VIEW": { "heading": { - "swap": "您所在的地区不支持兑换", - "generic": "该服务在您的地区不可用" + "swap": "您的地区无法使用兑换功能", + "generic": "该服务在您的地区不可用", + "addFunds": "该服务在您的地区不可用" }, "body": { - "swap": "请参考Quickswap的网站了解更多信息。", - "generic": "如需进一步帮助，请访问Immutable支持页面。" + "swap": "请访问Quickswap网站了解更多信息。", + "generic": "更多帮助，请访问Immutable支持页面。", + "addFunds": "请通过其他方式添加代币。" } }, "LOADING_VIEW": { @@ -619,6 +621,51 @@ "actionText": "请重试" } } + }, + "ADD_FUNDS": { + "drawer": { + "options": { + "swap": { + "heading": "兑换", + "caption": "在此网络上兑换代币。", + "disabledCaption": "当前不可用。" + }, + "debit": { + "heading": "借记卡", + "caption": "", + "disabledCaption": "您的选择不可用。我们建议添加代币。" + }, + "credit": { + "heading": "信用卡", + "caption": "可能会发生失败或额外费用。", + "disabledCaption": "您的选择不可用。我们建议添加代币。" + } + } + }, + "onboarding": { + "screen1": { + "title": "Immutable的支付方式已进化", + "caption": "请注意", + "buttonText": "下一步" + }, + "screen2": { + "title": "将代币传输到Passport，\n并从任何钱包付款", + "caption": "进化了什么", + "buttonText": "下一步" + }, + "screen3": { + "title": "使用其他链上的代币支付，\n我们会为您找到最佳选择", + "caption": "进化", + "buttonText": "选择要使用的付款钱包" + } + }, + "footer": { + "body": "交换功能由第三方 Squid 提供。Immutable 不构建、拥有、运营或部署 Squid。" + }, + "geoBlockError": { + "buyTokenButton": "购买代币", + "bridgeTokenButton": "桥接代币" + } } }, "footers": { diff --git a/packages/checkout/widgets-lib/src/views/error/serviceTypes.ts b/packages/checkout/widgets-lib/src/views/error/serviceTypes.ts index 2b618a1512..43166af5f0 100644 --- a/packages/checkout/widgets-lib/src/views/error/serviceTypes.ts +++ b/packages/checkout/widgets-lib/src/views/error/serviceTypes.ts @@ -1,4 +1,5 @@ export enum ServiceType { SWAP = 'swap', GENERIC = 'generic', + ADD_FUNDS = 'addFunds', } diff --git a/packages/checkout/widgets-lib/src/widgets/add-funds/AddFundsWidget.tsx b/packages/checkout/widgets-lib/src/widgets/add-funds/AddFundsWidget.tsx index 9953fed873..2c2a9c5754 100644 --- a/packages/checkout/widgets-lib/src/widgets/add-funds/AddFundsWidget.tsx +++ b/packages/checkout/widgets-lib/src/widgets/add-funds/AddFundsWidget.tsx @@ -128,6 +128,20 @@ export default function AddFundsWidget({ })(); }, []); + useEffect(() => { + if (!checkout) return; + (async () => { + if (!(await checkout.isSwapAvailable())) { + viewDispatch({ + payload: { + type: ViewActions.UPDATE_VIEW, + view: { type: AddFundsWidgetViews.GEO_BLOCK_ERROR }, + }, + }); + } + })(); + }, [checkout]); + useEffect(() => { if (!squid || !chains || !fromProvider || fetchingBalances.current) return; @@ -260,6 +274,44 @@ export default function AddFundsWidget({ onCloseClick={() => sendAddFundsCloseEvent(eventTarget)} /> )} + {viewState.view.type === AddFundsWidgetViews.GEO_BLOCK_ERROR && ( + sendAddFundsCloseEvent(eventTarget)} + primaryActionText={ + checkout.config.isOnRampEnabled + ? t('views.ADD_FUNDS.geoBlockError.buyTokenButton') : undefined + } + onPrimaryButtonClick={ + () => { + orchestrationEvents.sendRequestOnrampEvent( + eventTarget, + IMTBLWidgetEvents.IMTBL_ADD_FUNDS_WIDGET_EVENT, + { + tokenAddress: '', + amount: '', + }, + ); + } + } + secondaryActionText={ + checkout.config.isBridgeEnabled + ? t('views.ADD_FUNDS.geoBlockError.bridgeTokenButton') : undefined + } + onSecondaryButtonClick={ + () => { + orchestrationEvents.sendRequestBridgeEvent( + eventTarget, + IMTBLWidgetEvents.IMTBL_ADD_FUNDS_WIDGET_EVENT, + { + tokenAddress: '', + amount: '', + }, + ); + } + } + /> + )} diff --git a/packages/checkout/widgets-sample-app/src/components/ui/add-funds/addFunds.tsx b/packages/checkout/widgets-sample-app/src/components/ui/add-funds/addFunds.tsx index 81a3e48acb..c912af88aa 100644 --- a/packages/checkout/widgets-sample-app/src/components/ui/add-funds/addFunds.tsx +++ b/packages/checkout/widgets-sample-app/src/components/ui/add-funds/addFunds.tsx @@ -1,12 +1,13 @@ import { - Checkout, - WidgetTheme, - WidgetType, - WidgetLanguage, AddFundsEventType, + BridgeEventType, + Checkout, OnRampEventType, OrchestrationEventType, WalletProviderName, + WidgetLanguage, + WidgetTheme, + WidgetType, } from "@imtbl/checkout-sdk"; import { WidgetsFactory } from "@imtbl/checkout-widgets"; import { Environment } from "@imtbl/config"; @@ -130,9 +131,24 @@ function AddFundsUI() { addFunds.addListener(AddFundsEventType.CONNECT_SUCCESS, (data: any) => { console.log("CONNECT_SUCCESS", data); }); + addFunds.addListener(OrchestrationEventType.REQUEST_BRIDGE, (data: any) => { + console.log("REQUEST_BRIDGE", data); + addFunds.unmount(); + bridge.addListener(BridgeEventType.CLOSE_WIDGET, (data: any) => { + console.log("CLOSE_WIDGET", data); + bridge.unmount(); + }); + bridge.mount(ADD_FUNDS_TARGET_ID, { + ...data, + showBackButton: true, + }); + }); onRamp.addListener(OrchestrationEventType.REQUEST_GO_BACK, () => { goBack(); }); + bridge.addListener(OrchestrationEventType.REQUEST_GO_BACK, () => { + goBack(); + }); return () => { addFunds.removeListener(AddFundsEventType.CLOSE_WIDGET); @@ -140,6 +156,8 @@ function AddFundsUI() { addFunds.removeListener(AddFundsEventType.CONNECT_SUCCESS); onRamp.removeListener(OnRampEventType.CLOSE_WIDGET); onRamp.removeListener(OrchestrationEventType.REQUEST_GO_BACK); + bridge.removeListener(BridgeEventType.CLOSE_WIDGET); + bridge.removeListener(OrchestrationEventType.REQUEST_GO_BACK); } }, [addFunds, toProvider, toTokenAddress, toAmount]); @@ -187,7 +205,7 @@ function AddFundsUI() { - + ); }