@arcblock/did-connect-react 3.3.10 → 3.4.1

package/src/Connect/hooks/provider-list.js

@@ -3,6 +3,7 @@ import { useCreation, useRequest } from 'ahooks';
 import isNil from 'lodash/isNil';
 import { LOGIN_PROVIDER } from '@arcblock/ux/lib/Util/constant';
 import { getBlockletData, getFederatedEnabled, getMaster } from '@arcblock/ux/lib/Util/federated';
+import { useState } from 'react';
 
 const getAuthenticationConfig = async ({ sourceAppPid }) => {
   const blocklet = globalThis?.blocklet;
@@ -55,39 +56,68 @@ export default function useProviderList({
   mode = 'dialog',
   blocklet = globalThis.blocklet,
   isSmallView = false,
+  lastLoginMethod = '',
 }) {
+  const [loadingProviderList, setLoadingProviderList] = useState(false);
   const actionList = ['login', 'invite', 'connect-to-did-space', 'connect-to-did-domain', 'destroy-self'];
   const browser = useBrowser();
 
   const { data: loginProviderList = [] } = useRequest(
     async () => {
+      setLoadingProviderList(true);
       const data = await getLoginProviderList({ sourceAppPid });
+      setLoadingProviderList(false);
       return data;
     },
     { refreshDeps: [sourceAppPid] }
   );
 
   const showedLoginProviderList = useCreation(() => {
-    const result = loginProviderList.filter((item) => {
-      if (item.name === LOGIN_PROVIDER.WALLET) {
-        return allowWallet;
-      }
-      if (item.name === LOGIN_PROVIDER.PASSKEY) {
-        return passkeyBehavior !== 'none' && !browser.wallet && !browser.arcSphere;
-      }
-      if (item.name === LOGIN_PROVIDER.EMAIL) {
-        return blocklet?.settings?.notification?.email?.enabled ?? false;
-      }
+    const result = loginProviderList
+      .filter((item) => {
+        if (item.name === LOGIN_PROVIDER.WALLET) {
+          return allowWallet;
+        }
+        if (item.name === LOGIN_PROVIDER.PASSKEY) {
+          return passkeyBehavior !== 'none' && !browser.wallet && !browser.arcSphere;
+        }
+        if (item.name === LOGIN_PROVIDER.EMAIL) {
+          return blocklet?.settings?.notification?.email?.enabled ?? false;
+        }
 
-      if (item.type === 'oauth') {
-        if (!actionList.includes(action)) {
-          return false;
+        if (item.type === 'oauth') {
+          if (!actionList.includes(action)) {
+            return false;
+          }
         }
-      }
-      return true;
-    });
+        return true;
+      })
+      .sort((a, b) => {
+        // 优先处理 lastLoginMethod：匹配的项目排在最前面
+        if (lastLoginMethod) {
+          const aIsLastMethod = a.provider === lastLoginMethod;
+          const bIsLastMethod = b.provider === lastLoginMethod;
+          if (aIsLastMethod && !bIsLastMethod) {
+            return -1;
+          }
+          if (!aIsLastMethod && bIsLastMethod) {
+            return 1;
+          }
+        }
+        // 然后按照 order 属性排序
+        if (!isNil(a?.order) && !isNil(b?.order)) {
+          return a.order - b.order;
+        }
+        if (!isNil(a?.order)) {
+          return -1;
+        }
+        if (!isNil(b?.order)) {
+          return 1;
+        }
+        return 0;
+      });
     return result;
-  }, [loginProviderList]);
+  }, [loginProviderList, lastLoginMethod]);
 
   const hideQRCode = useCreation(() => {
     const isMobileView = mode === 'drawer' || (isSmallView && browser.mobile.any);
@@ -121,6 +151,7 @@ export default function useProviderList({
     hideChooseList,
     hideQRCode,
     providerList: showedLoginProviderList,
+    loadingProviderList,
   };
 
   return result;