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() {
-
+
);
}