From a7b461aaa7feed0e51f6e0b33374f6906380d275 Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <75730405+AuroraHuang22@users.noreply.github.com>
Date: Thu, 18 Jul 2024 22:18:10 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=B8=20Enable=20opening=20of=20register?=
 =?UTF-8?q?=20screen=20for=20AuthCore=20users=20(#61)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 🎨 Add initialScreen param for initAuthcore

* 🎨 Improve params format

* 🐛 Delay initAuthcore to ensure DOM is loaded

* 🚸 Use setInterval to check if the DOM is fully loaded
---
 src/index.tsx         | 14 +++++++++++---
 src/types.ts          |  2 ++
 src/utils/authcore.ts |  7 +++++--
 3 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/index.tsx b/src/index.tsx
index d79cebf..e0fefc6 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -51,6 +51,7 @@ import {
   LikeCoinWalletConnectorMethodType,
   LikeCoinWalletConnectorOptions,
   LikeCoinWalletConnectorSession,
+  AuthCoreInitialScreen,
 } from './types';
 
 import './style.css';
@@ -355,7 +356,8 @@ export class LikeCoinWalletConnector {
   init = async (
     methodType: LikeCoinWalletConnectorMethodType,
     params?: any,
-    language = this.options.language
+    language = this.options.language,
+    initialScreen?: AuthCoreInitialScreen
   ) => {
     let initiator: Promise<LikeCoinWalletConnectorInitResponse>;
 
@@ -368,7 +370,13 @@ export class LikeCoinWalletConnector {
               <IntlProvider language={language}>
                 <AuthcoreDialog
                   onMount={({ containerId }) => {
-                    initAuthcore(this.options, { containerId });
+                    const intervalId = setInterval(() => {
+                      const containerElement = document.getElementById(containerId);
+                      if (containerElement) {
+                        initAuthcore(this.options, { containerId, initialScreen });
+                        clearInterval(intervalId);
+                      }
+                    }, 200);
                   }}
                   onClose={() => {
                     this.closeDialog();
@@ -386,7 +394,7 @@ export class LikeCoinWalletConnector {
             );
           });
         } else {
-          initiator = initAuthcore(this.options, { accessToken });
+          initiator = initAuthcore(this.options, { accessToken, initialScreen });
         }
         break;
 
diff --git a/src/types.ts b/src/types.ts
index da2f59e..34c0552 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -49,6 +49,8 @@ export type LikeCoinWalletConnectorEvent =
       method: LikeCoinWalletConnectorMethodType;
     };
 
+export type AuthCoreInitialScreen = 'signin' | 'register'
+
 export interface LikeCoinWalletConnectorConfig {
   chainId: string;
   chainName: string;
diff --git a/src/utils/authcore.ts b/src/utils/authcore.ts
index ab8eff2..aa73d37 100644
--- a/src/utils/authcore.ts
+++ b/src/utils/authcore.ts
@@ -15,6 +15,7 @@ import { AuthCoreAuthClient, AuthCoreWidgets } from '@likecoin/authcore-js';
 import {
   LikeCoinWalletConnectorInitResponse,
   LikeCoinWalletConnectorOptions,
+  AuthCoreInitialScreen
 } from '../types';
 import { convertAddressPrefix } from './wallet';
 
@@ -26,10 +27,12 @@ export async function initAuthcore(
   {
     accessToken,
     containerId,
+    initialScreen = 'signin',
   }: {
     accessToken?: string;
     containerId?: string;
-  } = {}
+    initialScreen?: AuthCoreInitialScreen;
+  } = {},
 ): Promise<LikeCoinWalletConnectorInitResponse> {
   const authcoreApiHost = options.authcoreApiHost;
 
@@ -66,7 +69,7 @@ export async function initAuthcore(
       primaryColour: '#28646e',
       container: containerId,
       root: `${authcoreApiHost}/widgets`,
-      initialScreen: 'signin',
+      initialScreen: initialScreen,
       socialLoginPaneStyle: 'top',
       socialLoginPaneOption: 'grid',
       internal: true,