diff --git a/packages/checkout/widgets-lib/src/assets/Sanctions.svg b/packages/checkout/widgets-lib/src/assets/Sanctions.svg
new file mode 100644
index 0000000000..330e610e87
--- /dev/null
+++ b/packages/checkout/widgets-lib/src/assets/Sanctions.svg
@@ -0,0 +1,38 @@
+
diff --git a/packages/checkout/widgets-lib/src/components/Hero/SanctionsHero.tsx b/packages/checkout/widgets-lib/src/components/Hero/SanctionsHero.tsx
new file mode 100644
index 0000000000..dfd1d45c56
--- /dev/null
+++ b/packages/checkout/widgets-lib/src/components/Hero/SanctionsHero.tsx
@@ -0,0 +1,54 @@
+/* eslint-disable max-len */
+import { Box } from '@biom3/react';
+import { heroBackGroundStyles, heroImageStyles } from './HeroImageStyles';
+
+export function SanctionsHero() {
+ return (
+
+
+
+
+
+ );
+}
diff --git a/packages/checkout/widgets-lib/src/locales/en.json b/packages/checkout/widgets-lib/src/locales/en.json
index aa12d231d7..397054221c 100644
--- a/packages/checkout/widgets-lib/src/locales/en.json
+++ b/packages/checkout/widgets-lib/src/locales/en.json
@@ -80,6 +80,10 @@
"addTokens": "Please add tokens another way"
}
},
+ "SERVICE_UNAVAILABLE_SANCTIONS_ERROR_VIEW": {
+ "heading": "This service is not available",
+ "actionText": "Go back"
+ },
"LOADING_VIEW": {
"text": "Loading"
},
diff --git a/packages/checkout/widgets-lib/src/locales/ja.json b/packages/checkout/widgets-lib/src/locales/ja.json
index e7f6daf8f9..2890c82e06 100644
--- a/packages/checkout/widgets-lib/src/locales/ja.json
+++ b/packages/checkout/widgets-lib/src/locales/ja.json
@@ -84,6 +84,10 @@
"addTokens": "別の方法でトークンを追加してください。"
}
},
+ "SERVICE_UNAVAILABLE_SANCTIONS_ERROR_VIEW": {
+ "heading": "このサービスは利用できません。",
+ "actionText": "戻る"
+ },
"LOADING_VIEW": {
"text": "読み込み中"
},
diff --git a/packages/checkout/widgets-lib/src/locales/ko.json b/packages/checkout/widgets-lib/src/locales/ko.json
index cb18e98a6a..fc71af00b9 100644
--- a/packages/checkout/widgets-lib/src/locales/ko.json
+++ b/packages/checkout/widgets-lib/src/locales/ko.json
@@ -80,6 +80,10 @@
"addTokens": "다른 방법으로 토큰을 추가해 주세요."
}
},
+ "SERVICE_UNAVAILABLE_SANCTIONS_ERROR_VIEW": {
+ "heading": "이 서비스는 제공되지 않습니다.",
+ "actionText": "돌아가기"
+ },
"LOADING_VIEW": {
"text": "로딩 중"
},
diff --git a/packages/checkout/widgets-lib/src/locales/zh.json b/packages/checkout/widgets-lib/src/locales/zh.json
index a6b608517f..a232b41f4b 100644
--- a/packages/checkout/widgets-lib/src/locales/zh.json
+++ b/packages/checkout/widgets-lib/src/locales/zh.json
@@ -80,6 +80,10 @@
"addTokens": "请通过其他方式添加代币。"
}
},
+ "SERVICE_UNAVAILABLE_SANCTIONS_ERROR_VIEW": {
+ "heading": "此服务不可用。",
+ "actionText": "返回"
+ },
"LOADING_VIEW": {
"text": "加载中"
},
diff --git a/packages/checkout/widgets-lib/src/views/error/ServiceUnavailableErrorView.tsx b/packages/checkout/widgets-lib/src/views/error/ServiceUnavailableErrorView.tsx
index d068b6b465..26397cfc14 100644
--- a/packages/checkout/widgets-lib/src/views/error/ServiceUnavailableErrorView.tsx
+++ b/packages/checkout/widgets-lib/src/views/error/ServiceUnavailableErrorView.tsx
@@ -1,28 +1,17 @@
-import { Box, Button, Link } from '@biom3/react';
-import { Trans, useTranslation } from 'react-i18next';
+import { Box, Button, Heading } from '@biom3/react';
+import { useTranslation } from 'react-i18next';
import { SimpleLayout } from '../../components/SimpleLayout/SimpleLayout';
import { HeaderNavigation } from '../../components/Header/HeaderNavigation';
-import { SimpleTextBody } from '../../components/Body/SimpleTextBody';
-import { NoServiceHero } from '../../components/Hero/NoServiceHero';
-import { FooterLogo } from '../../components/Footer/FooterLogo';
-import { ServiceType } from './serviceTypes';
+import { SanctionsHero } from '../../components/Hero/SanctionsHero';
export interface ServiceUnavailableErrorViewProps {
- service: ServiceType;
onCloseClick: () => void;
- primaryActionText?: string;
- onPrimaryButtonClick?: () => void;
- secondaryActionText?: string;
- onSecondaryButtonClick?: () => void;
+ onBackButtonClick?: () => void;
}
export function ServiceUnavailableErrorView({
- service,
onCloseClick,
- primaryActionText,
- onPrimaryButtonClick,
- secondaryActionText,
- onSecondaryButtonClick,
+ onBackButtonClick,
}: ServiceUnavailableErrorViewProps) {
const { t } = useTranslation();
@@ -31,26 +20,20 @@ export function ServiceUnavailableErrorView({
header={
}
- heroContent={}
+ heroContent={}
floatHeader
- footer={}
testId="service-unavailable-error-view"
>
-
- }
- />,
- immutableSupport: }
- />,
- }}
- />
-
+
+ {t('views.SERVICE_UNAVAILABLE_SANCTIONS_ERROR_VIEW.heading')}
+
- {primaryActionText && onPrimaryButtonClick && (
+ {onBackButtonClick && (
-
- )}
-
- {secondaryActionText && onSecondaryButtonClick && (
-
-
)}
diff --git a/packages/checkout/widgets-lib/src/views/error/ServiceUnavailableToRegionErrorView.tsx b/packages/checkout/widgets-lib/src/views/error/ServiceUnavailableToRegionErrorView.tsx
new file mode 100644
index 0000000000..4e21dbe8ce
--- /dev/null
+++ b/packages/checkout/widgets-lib/src/views/error/ServiceUnavailableToRegionErrorView.tsx
@@ -0,0 +1,105 @@
+import { Box, Button, Link } from '@biom3/react';
+import { Trans, useTranslation } from 'react-i18next';
+import { SimpleLayout } from '../../components/SimpleLayout/SimpleLayout';
+import { HeaderNavigation } from '../../components/Header/HeaderNavigation';
+import { SimpleTextBody } from '../../components/Body/SimpleTextBody';
+import { NoServiceHero } from '../../components/Hero/NoServiceHero';
+import { FooterLogo } from '../../components/Footer/FooterLogo';
+import { ServiceType } from './serviceTypes';
+
+export interface ServiceUnavailableToRegionErrorViewProps {
+ service: ServiceType;
+ onCloseClick: () => void;
+ primaryActionText?: string;
+ onPrimaryButtonClick?: () => void;
+ secondaryActionText?: string;
+ onSecondaryButtonClick?: () => void;
+}
+
+export function ServiceUnavailableToRegionErrorView({
+ service,
+ onCloseClick,
+ primaryActionText,
+ onPrimaryButtonClick,
+ secondaryActionText,
+ onSecondaryButtonClick,
+}: ServiceUnavailableToRegionErrorViewProps) {
+ const { t } = useTranslation();
+
+ return (
+
+ }
+ heroContent={}
+ floatHeader
+ footer={}
+ testId="service-unavailable-to-region-error-view"
+ >
+
+ }
+ />,
+ immutableSupport: }
+ />,
+ }}
+ />
+
+
+
+
+ {primaryActionText && onPrimaryButtonClick && (
+
+
+
+ )}
+
+ {secondaryActionText && onSecondaryButtonClick && (
+
+
+
+ )}
+
+
+ );
+}
diff --git a/packages/checkout/widgets-lib/src/widgets/add-tokens/AddTokensWidget.tsx b/packages/checkout/widgets-lib/src/widgets/add-tokens/AddTokensWidget.tsx
index e00caac87a..42d386dd91 100644
--- a/packages/checkout/widgets-lib/src/widgets/add-tokens/AddTokensWidget.tsx
+++ b/packages/checkout/widgets-lib/src/widgets/add-tokens/AddTokensWidget.tsx
@@ -35,7 +35,7 @@ import { Review } from './views/Review';
import { fetchBalances } from './functions/fetchBalances';
import { useTokens } from './hooks/useTokens';
import { useProvidersContext } from '../../context/providers-context/ProvidersContext';
-import { ServiceUnavailableErrorView } from '../../views/error/ServiceUnavailableErrorView';
+import { ServiceUnavailableToRegionErrorView } from '../../views/error/ServiceUnavailableToRegionErrorView';
import { ServiceType } from '../../views/error/serviceTypes';
import { orchestrationEvents } from '../../lib/orchestrationEvents';
import { getRemoteImage } from '../../lib/utils';
@@ -265,7 +265,7 @@ export default function AddTokensWidget({
)}
{viewState.view.type
=== SharedViews.SERVICE_UNAVAILABLE_ERROR_VIEW && (
- sendAddTokensCloseEvent(eventTarget)}
/>
diff --git a/packages/checkout/widgets-lib/src/widgets/bridge/BridgeWidget.tsx b/packages/checkout/widgets-lib/src/widgets/bridge/BridgeWidget.tsx
index 7b30bb3cdb..f8f92e33d1 100644
--- a/packages/checkout/widgets-lib/src/widgets/bridge/BridgeWidget.tsx
+++ b/packages/checkout/widgets-lib/src/widgets/bridge/BridgeWidget.tsx
@@ -62,7 +62,6 @@ import {
BridgeWidgetViews,
} from '../../context/view-context/BridgeViewContextTypes';
import { ClaimWithdrawal } from './views/ClaimWithdrawal';
-import { ServiceType } from '../../views/error/serviceTypes';
import { ServiceUnavailableErrorView } from '../../views/error/ServiceUnavailableErrorView';
export type BridgeWidgetInputs = BridgeWidgetParams & {
@@ -342,8 +341,15 @@ export default function BridgeWidget({
)}
{viewState.view.type === SharedViews.SERVICE_UNAVAILABLE_ERROR_VIEW && (
sendBridgeWidgetCloseEvent(eventTarget)}
+ onBackButtonClick={() => {
+ viewDispatch({
+ payload: {
+ type: ViewActions.UPDATE_VIEW,
+ view: { type: BridgeWidgetViews.WALLET_NETWORK_SELECTION },
+ },
+ });
+ }}
/>
)}
diff --git a/packages/checkout/widgets-lib/src/widgets/connect/ConnectWidget.tsx b/packages/checkout/widgets-lib/src/widgets/connect/ConnectWidget.tsx
index bfea631412..3041121b4b 100644
--- a/packages/checkout/widgets-lib/src/widgets/connect/ConnectWidget.tsx
+++ b/packages/checkout/widgets-lib/src/widgets/connect/ConnectWidget.tsx
@@ -38,7 +38,6 @@ import { isL1EthChainId, isZkEvmChainId } from '../../lib/utils';
import { WalletConnectManager, walletConnectProviderInfo } from '../../lib/walletConnect';
import { StrongCheckoutWidgetsConfig } from '../../lib/withDefaultWidgetConfig';
import { ErrorView } from '../../views/error/ErrorView';
-import { ServiceType } from '../../views/error/serviceTypes';
import { ServiceUnavailableErrorView } from '../../views/error/ServiceUnavailableErrorView';
import { LoadingView } from '../../views/loading/LoadingView';
import {
@@ -275,8 +274,17 @@ export default function ConnectWidget({
)}
{view.type === SharedViews.SERVICE_UNAVAILABLE_ERROR_VIEW && (
{
+ viewDispatch({
+ payload: {
+ type: ViewActions.UPDATE_VIEW,
+ view: {
+ type: ConnectWidgetViews.CONNECT_WALLET,
+ } as ConnectWidgetView,
+ },
+ });
+ }}
/>
)}
diff --git a/packages/checkout/widgets-lib/src/widgets/swap/SwapWidgetRoot.tsx b/packages/checkout/widgets-lib/src/widgets/swap/SwapWidgetRoot.tsx
index 85f8ea20f2..6e4484501b 100644
--- a/packages/checkout/widgets-lib/src/widgets/swap/SwapWidgetRoot.tsx
+++ b/packages/checkout/widgets-lib/src/widgets/swap/SwapWidgetRoot.tsx
@@ -14,7 +14,7 @@ import { Base } from '../BaseWidgetRoot';
import { ConnectLoader, ConnectLoaderParams } from '../../components/ConnectLoader/ConnectLoader';
import { getL2ChainId } from '../../lib';
import { isPassportProvider } from '../../lib/provider';
-import { ServiceUnavailableErrorView } from '../../views/error/ServiceUnavailableErrorView';
+import { ServiceUnavailableToRegionErrorView } from '../../views/error/ServiceUnavailableToRegionErrorView';
import { ServiceType } from '../../views/error/serviceTypes';
import { isValidAddress, isValidAmount, isValidWalletProvider } from '../../lib/validations/widgetValidators';
import { ThemeProvider } from '../../components/ThemeProvider/ThemeProvider';
@@ -146,7 +146,7 @@ export class Swap extends Base {
}
serviceUnavailableView={
(
- sendSwapWidgetCloseEvent(window)}
primaryActionText={