feat: + alert modal for external website (#2632)

_raw/locales/en/messages.json

@@ -2441,6 +2441,11 @@
       "fast": "Fast",
       "normal": "Normal",
       "doNotReserve": "Don't reserve Gas"
+    },
+    "OpenExternalWebsiteModal": {
+      "title": "You're Leaving Rabby Wallet",
+      "content": "You're about to visit an external website. Rabby Wallet is not responsible for the content or security of this site.",
+      "button": "Continue"
     }
   },
   "global": {

src/ui/assets/component/external-link-alert.svg

@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 52 52" fill="none">
+  <g clip-path="url(#clip0_111822_38430)">
+    <path
+      d="M26 46.8C37.4875 46.8 46.8 37.4875 46.8 26C46.8 14.5125 37.4875 5.2 26 5.2C14.5125 5.2 5.20001 14.5125 5.20001 26C5.20001 37.4875 14.5125 46.8 26 46.8Z"
+      fill="#E0E5EC" />
+    <path d="M26 27.625V16.25" stroke="#6A7587" stroke-width="3.25" stroke-linecap="round"
+      stroke-linejoin="round" />
+    <path
+      d="M26 37.375C27.3462 37.375 28.4375 36.2837 28.4375 34.9375C28.4375 33.5913 27.3462 32.5 26 32.5C24.6538 32.5 23.5625 33.5913 23.5625 34.9375C23.5625 36.2837 24.6538 37.375 26 37.375Z"
+      fill="#6A7587" />
+  </g>
+  <defs>
+    <clipPath id="clip0_111822_38430">
+      <rect width="52" height="52" fill="white" />
+    </clipPath>
+  </defs>
+</svg>

src/ui/style/index.less

@@ -423,3 +423,19 @@ button:focus {
   background-clip: text;
   color: transparent;
 }
+
+.external-link-alert-modal {
+  background: var(--r-neutral-bg-1);
+  border-radius: 16px;
+  overflow: hidden;
+  padding-bottom: 0;
+  .ant-modal-confirm-content {
+    padding: 0;
+  }
+  .ant-modal-confirm-content, .ant-modal-content {
+    background: var(--r-neutral-bg-1);
+  }
+  .ant-modal-content {
+    box-shadow: none;
+  }
+}

src/ui/utils/webapi.ts

@@ -1,55 +0,0 @@
-import browser, { Tabs, Windows } from 'webextension-polyfill';
-import { WalletController, WalletControllerType } from './index';
-import { getOriginFromUrl } from '@/utils';
-
-export const getCurrentTab = async (): Promise<Tabs.Tab> => {
-  const tabs = await browser.tabs.query({ active: true, currentWindow: true });
-
-  return tabs[0];
-};
-
-export const getCurrentConnectSite = async (
-  wallet: WalletController | WalletControllerType
-) => {
-  const { id, url } = await getCurrentTab();
-  if (!id || !url) return null;
-
-  return (wallet as WalletControllerType).getCurrentConnectedSite(
-    id,
-    getOriginFromUrl(url)
-  );
-};
-
-export const openInTab = async (
-  url?: string,
-  needClose = true
-): Promise<Tabs.Tab> => {
-  const tab = await browser.tabs.create({
-    active: true,
-    url,
-  });
-
-  if (needClose) window.close();
-
-  return tab;
-};
-
-export const getCurrentWindow = async (): Promise<number | undefined> => {
-  const { id } = await browser.windows.getCurrent({
-    windowTypes: ['popup'],
-  } as Windows.GetInfo);
-
-  return id;
-};
-
-export const openInternalPageInTab = (
-  path: string,
-  useWebapi = true,
-  needClose = true
-) => {
-  if (useWebapi) {
-    openInTab(`./index.html#/${path}`, needClose);
-  } else {
-    window.open(`./index.html#/${path}`);
-  }
-};

src/ui/utils/webapi.tsx

@@ -0,0 +1,106 @@
+import React from 'react';
+import browser, { Tabs, Windows } from 'webextension-polyfill';
+import { t } from 'i18next';
+import { Button } from 'antd';
+import { WalletController, WalletControllerType } from './index';
+import { getOriginFromUrl } from '@/utils';
+import Modal from '../component/Modal';
+import { ReactComponent as ExternalLinkAlert } from 'ui/assets/component/external-link-alert.svg';
+
+export const getCurrentTab = async (): Promise<Tabs.Tab> => {
+  const tabs = await browser.tabs.query({ active: true, currentWindow: true });
+
+  return tabs[0];
+};
+
+export const getCurrentConnectSite = async (
+  wallet: WalletController | WalletControllerType
+) => {
+  const { id, url } = await getCurrentTab();
+  if (!id || !url) return null;
+
+  return (wallet as WalletControllerType).getCurrentConnectedSite(
+    id,
+    getOriginFromUrl(url)
+  );
+};
+
+export const openInTab = async (
+  url?: string,
+  needClose = true
+): Promise<Tabs.Tab> => {
+  const tab = await browser.tabs.create({
+    active: true,
+    url,
+  });
+
+  if (needClose) window.close();
+
+  return tab;
+};
+
+export const getCurrentWindow = async (): Promise<number | undefined> => {
+  const { id } = await browser.windows.getCurrent({
+    windowTypes: ['popup'],
+  } as Windows.GetInfo);
+
+  return id;
+};
+
+export const openInternalPageInTab = (
+  path: string,
+  useWebapi = true,
+  needClose = true
+) => {
+  if (useWebapi) {
+    openInTab(`./index.html#/${path}`, needClose);
+  } else {
+    window.open(`./index.html#/${path}`);
+  }
+};
+
+export const openExternalWebsiteInTab = async (
+  url?: string,
+  needClose = true
+) => {
+  return new Promise((resolve, reject) => {
+    const modal = Modal.info({
+      closable: true,
+      className: 'external-link-alert-modal',
+      content: (
+        <div>
+          <div className="flex justify-center mb-16">
+            <ExternalLinkAlert className="w-[52px]" />
+          </div>
+          <h1 className="text-r-neutral-title1 text-center mb-8">
+            {t('component.OpenExternalWebsiteModal.title')}
+          </h1>
+          <p className="text-r-neutral-body text-center text-15 mb-[52px]">
+            {t('component.OpenExternalWebsiteModal.content')}
+          </p>
+          <div className="footer">
+            <Button
+              type="primary"
+              block
+              className="h-40 text-15 font-medium"
+              onClick={async () => {
+                const tab = await browser.tabs.create({
+                  active: true,
+                  url,
+                });
+                if (needClose) window.close();
+                resolve(tab);
+                modal.destroy();
+              }}
+            >
+              {t('component.OpenExternalWebsiteModal.button')}
+            </Button>
+          </div>
+        </div>
+      ),
+      onCancel() {
+        reject('user cancel');
+      },
+    });
+  });
+};