[TAS-1816] 🚸 Display the reset password hint when hiding social options

src/components/authcore-dialog.tsx

@@ -1,4 +1,5 @@
 import React, { FC, useEffect } from 'react';
+import { FormattedMessage } from 'react-intl';
 
 import { Dialog } from './dialog';
 
@@ -7,11 +8,13 @@ const AUTHCORE_DIALOG_ID = 'authcore-dialog';
 export interface AuthcoreDialogProps {
   onMount?: (payload: { containerId: string }) => void;
   onClose?: () => void;
+  isHideSocialLogin?: boolean;
 }
 
 export const AuthcoreDialog: FC<AuthcoreDialogProps> = ({
   onMount,
   onClose,
+  isHideSocialLogin,
 }) => {
   const [isDialogOpen, setDialogOpen] = React.useState(true);
   const closeDialog = React.useCallback(() => {
@@ -28,6 +31,18 @@ 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>,
+              }}
+            />
+          </p>
+        </div>
+      )}
     </Dialog>
   );
 };

src/i18n/translations/en.json

@@ -22,6 +22,7 @@
   "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_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",

src/i18n/translations/zh.json

@@ -22,6 +22,7 @@
   "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_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 掃描二維碼",

src/index.tsx

@@ -349,7 +349,8 @@ export class LikeCoinWalletConnector {
 
   init = async (
     methodType: LikeCoinWalletConnectorMethodType,
-    params?: any
+    params?: any,
+    language = this.options.language,
   ) => {
     let initiator: Promise<LikeCoinWalletConnectorInitResponse>;
 
@@ -359,16 +360,19 @@ export class LikeCoinWalletConnector {
         if (!accessToken) {
           initiator = new Promise(resolve => {
             this._renderingRoot.render(
-              <AuthcoreDialog
-                onMount={({ containerId }) => {
-                  initAuthcore(this.options, { containerId });
-                }}
-                onClose={() => {
-                  this.closeDialog();
-                  resolve(undefined);
-                  this._events.emit('authcore_auth_closed');
-                }}
-              />
+              <IntlProvider language={language}>
+                <AuthcoreDialog
+                  onMount={({ containerId }) => {
+                    initAuthcore(this.options, { containerId });
+                  }}
+                  onClose={() => {
+                    this.closeDialog();
+                    resolve(undefined);
+                    this._events.emit('authcore_auth_closed');
+                  }}
+                  isHideSocialLogin={!!(this.options.authcoreClientId === 'likecoin-app-hidesocial')}
+                />
+              </IntlProvider>
             );
           });
         } else {