🚸 Show hint for browser issues (#62)

likecoin · Jul 21, 2024 · 193864f · 193864f
1 parent b6f5d42
commit 193864f
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 19 deletions.
diff --git a/src/components/authcore-dialog.tsx b/src/components/authcore-dialog.tsx
@@ -31,18 +31,34 @@ export const AuthcoreDialog: FC<AuthcoreDialogProps> = ({
       onClose={closeDialog}
     >
       <div id={AUTHCORE_DIALOG_ID} />
-      {isHideSocialLogin && (
-        <div className="lk-flex lk-flex-col lk-flex-col lk-w-full lk-items-center lk-gap-y-2 lk-mt-[12px]">
-          <p className="lk-text-like-gray lk-text-center lk-w-full lk-text-[12px]">
-            <FormattedMessage
-              id="wallet_connect_hint_reset_password"
-              values={{
-                span: chunks => <span className="lk-text-like-green">{chunks}</span>,
-              }}
+
+      <aside className="lk-mt-[12px] lk-px-[35px]">
+        <div className="lk-flex lk-flex-col lk-items-center lk-gap-y-1 lk-w-full lk-p-[8px] lk-text-[#F6A721] lk-text-center lk-text-[12px] lk-bg-[#FFFBEB] lk-border lk-border-[#FEF0CF] lk-rounded-[3px]">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            strokeWidth={1.5}
+            stroke="currentColor"
+            className="lk-w-[20px]"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"
             />
+          </svg>
+
+          <p>
+            <FormattedMessage id="wallet_connect_hint_browser_warning" />
           </p>
+          {isHideSocialLogin && (
+            <p>
+              <FormattedMessage id="wallet_connect_hint_reset_password" />
+            </p>
+          )}
         </div>
-      )}
+      </aside>
     </Dialog>
   );
 };
diff --git a/src/i18n/translations/en.json b/src/i18n/translations/en.json
@@ -22,7 +22,10 @@
   "wallet_connect_header_title_open_app": "Launch App",
   "wallet_connect_header_title_scan_qrcode": "Scan QR Code",
   "wallet_connect_hint_approve": "Please approve the connection request in the app by clicking the button below.",
-  "wallet_connect_hint_reset_password": "If you can't find your login method,<span>reset your password</span>.",
+  "wallet_connect_hint_browser_warning": "Third-party browsers, VPN, or private browsing may cause issue.",
+
+  "wallet_connect_hint_reset_password": "If your login method is not available here, please reset your password.",
+
   "wallet_connect_hint_scan_qrcode_cosmostation_mobile": "Please scan the QR code with Cosmostation Mobile Wallet app",
   "wallet_connect_hint_scan_qrcode_keplr_mobile": "Please scan the QR code with Keplr Mobile Wallet app",
   "wallet_connect_hint_scan_qrcode_liker_land_app": "Please scan the QR code with Liker Land app",

diff --git a/src/i18n/translations/zh.json b/src/i18n/translations/zh.json
@@ -12,8 +12,8 @@
   "connect_wallet_method_description_keplr": "使用 Keplr 瀏覽器外掛",
   "connect_wallet_method_description_keplr_mobile": "使用 Keplr Mobile app 掃描二維碼",
   "connect_wallet_method_description_leap": "使用 Leap 瀏覽器外掛",
-  "connect_wallet_method_description_metamask": "使用 MetaMask 瀏覽器外掛 Snap",
   "connect_wallet_method_description_liker_land_app": "使用 Liker Land app 掃描二維碼",
+  "connect_wallet_method_description_metamask": "使用 MetaMask 瀏覽器外掛 Snap",
   "connect_wallet_method_description_wallet_connect_v2": "使用支援 Wallet Connect V2 的錢包掃描二維碼",
   "connect_wallet_other_methods": "其他連接方法",
   "connect_wallet_title": "連接錢包",
@@ -22,7 +22,8 @@
   "wallet_connect_header_title_open_app": "啟動 App",
   "wallet_connect_header_title_scan_qrcode": "掃描二維碼",
   "wallet_connect_hint_approve": "請點擊以下按鈕打開 App 並批准連接請求。",
-  "wallet_connect_hint_reset_password": "若找不到您原先的登入方式，請<span>重設密碼</span>。",
+  "wallet_connect_hint_browser_warning": "使用第三方瀏覽器、 VPN 或私密瀏覽可能無法登入。",
+  "wallet_connect_hint_reset_password": "找不到登入方式？請嘗試重設密碼。",
   "wallet_connect_hint_scan_qrcode_cosmostation_mobile": "請使用 Cosmostation Mobile Wallet app 掃描二維碼",
   "wallet_connect_hint_scan_qrcode_keplr_mobile": "請使用 Keplr Mobile app 掃描二維碼",
   "wallet_connect_hint_scan_qrcode_liker_land_app": "請使用 Liker Land app 掃描二維碼",

diff --git a/src/index.tsx b/src/index.tsx
@@ -138,7 +138,8 @@ export class LikeCoinWalletConnector {
           : true,
 
       language: options.language || 'en',
-      authcoreClientId: options.authcoreClientId || SOCIAL_LOGIN_OPTIONS.DEFAULT,
+      authcoreClientId:
+        options.authcoreClientId || SOCIAL_LOGIN_OPTIONS.DEFAULT,
       authcoreApiHost: options.authcoreApiHost || 'https://authcore.like.co',
       authcoreRedirectUrl: options.authcoreRedirectUrl || '',
 
@@ -371,9 +372,14 @@ export class LikeCoinWalletConnector {
                 <AuthcoreDialog
                   onMount={({ containerId }) => {
                     const intervalId = setInterval(() => {
-                      const containerElement = document.getElementById(containerId);
+                      const containerElement = document.getElementById(
+                        containerId
+                      );
                       if (containerElement) {
-                        initAuthcore(this.options, { containerId, initialScreen });
+                        initAuthcore(this.options, {
+                          containerId,
+                          initialScreen,
+                        });
                         clearInterval(intervalId);
                       }
                     }, 200);
@@ -394,7 +400,10 @@ export class LikeCoinWalletConnector {
             );
           });
         } else {
-          initiator = initAuthcore(this.options, { accessToken, initialScreen });
+          initiator = initAuthcore(this.options, {
+            accessToken,
+            initialScreen,
+          });
         }
         break;
 

diff --git a/src/types.ts b/src/types.ts
@@ -49,7 +49,7 @@ export type LikeCoinWalletConnectorEvent =
       method: LikeCoinWalletConnectorMethodType;
     };
 
-export type AuthCoreInitialScreen = 'signin' | 'register'
+export type AuthCoreInitialScreen = 'signin' | 'register';
 
 export interface LikeCoinWalletConnectorConfig {
   chainId: string;

diff --git a/src/utils/authcore.ts b/src/utils/authcore.ts
@@ -15,7 +15,7 @@ import { AuthCoreAuthClient, AuthCoreWidgets } from '@likecoin/authcore-js';
 import {
   LikeCoinWalletConnectorInitResponse,
   LikeCoinWalletConnectorOptions,
-  AuthCoreInitialScreen
+  AuthCoreInitialScreen,
 } from '../types';
 import { convertAddressPrefix } from './wallet';
 
@@ -32,7 +32,7 @@ export async function initAuthcore(
     accessToken?: string;
     containerId?: string;
     initialScreen?: AuthCoreInitialScreen;
-  } = {},
+  } = {}
 ): Promise<LikeCoinWalletConnectorInitResponse> {
   const authcoreApiHost = options.authcoreApiHost;