@arcblock/did-connect-react 3.3.4 → 3.3.6

package/src/Connect/index.jsx

@@ -98,6 +98,8 @@ function Connect({
     selectedPlugin,
     blocklet,
     masterBlocklet,
+    showWalletOptions,
+    setShowWalletOptions,
   } = useStateContext();
   const { state, generate, cancelWhenScanned } = useToken({
     action,
@@ -292,24 +294,29 @@ function Connect({
   // 防止二维码抖动，使用 useCreation 进行缓存
   const qrcode = useCreation(() => {
     const backgroundColor = theme.mode === 'dark' ? theme.palette.grey[600] : 'white';
+
+    let qrcodeSize = hideChooseList ? 240 - getSpacingNumber(3) * 2 : 196 - getSpacingNumber(2) * 2;
+    let padding = hideChooseList ? 3 : 2;
+    // 如果显示钱包登录，将 download tips 移动到顶部，调整间距，增加二维码的尺寸和内边距
+    if (showWalletOptions) {
+      padding = 1;
+      qrcodeSize += getSpacingNumber(padding) * 2;
+    }
     return (
       <Box
+        className="did-connect__qrcode"
         sx={{
-          p: hideChooseList ? 3 : 2,
+          p: padding,
           width: (hideChooseList ? 240 : 196) + getSpacingNumber(1) * 2,
           height: (hideChooseList ? 240 : 196) + getSpacingNumber(1) * 2,
         }}>
         {state.url ? (
           <QRCode
             data={urlWithParams}
-            size={hideChooseList ? 240 - getSpacingNumber(3) * 2 : 196 - getSpacingNumber(2) * 2}
+            size={qrcodeSize}
             sx={{
-              width:
-                (hideChooseList ? 240 - getSpacingNumber(3) * 2 : 196 - getSpacingNumber(2) * 2) +
-                getSpacingNumber(1) * 2,
-              height:
-                (hideChooseList ? 240 - getSpacingNumber(3) * 2 : 196 - getSpacingNumber(2) * 2) +
-                getSpacingNumber(1) * 2,
+              width: qrcodeSize + getSpacingNumber(1) * 2,
+              height: qrcodeSize + getSpacingNumber(1) * 2,
               flex: 1,
               backgroundColor,
               p: 1,
@@ -345,7 +352,7 @@ function Connect({
         )}
       </Box>
     );
-  }, [urlWithParams, hideChooseList]);
+  }, [urlWithParams, hideChooseList, showWalletOptions]);
 
   const didConnectFlexDirection = useCreation(() => {
     if (hideChooseList) {
@@ -357,6 +364,60 @@ function Connect({
     return 'row';
   }, [hideChooseList, isInitSmallView, hideQRCode]);
 
+  const qrcodeContent = useCreation(() => {
+    if (!qrcode) return null;
+    return (
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          overflowX: 'auto',
+          overflowY: 'visible',
+          maxWidth: '100%',
+          margin: 'auto',
+        }}>
+        <Box
+          sx={{
+            fontSize: 0,
+            position: 'relative',
+            ...(showWalletOptions
+              ? {
+                  mt: hideChooseList ? 4 : 2.5,
+                  mb: hideChooseList ? 0 : 0,
+                }
+              : {
+                  mb: hideChooseList ? 4 : 2.5,
+                  mt: 0,
+                }),
+          }}>
+          {qrcode}
+          <Box
+            sx={{
+              position: 'absolute',
+              color: 'text.secondary',
+              fontSize: 12,
+              zIndex: 1,
+              whiteSpace: 'nowrap',
+              ...(showWalletOptions
+                ? {
+                    top: hideChooseList ? -8 : -4,
+                    transform: 'translateY(-100%)',
+                  }
+                : {
+                    bottom: hideChooseList ? -8 : -4,
+                    transform: 'translateY(100%)',
+                  }),
+              left: 0,
+              right: 0,
+              textAlign: 'center',
+            }}>
+            {t('scanWithWallet1')} <DownloadTips /> {t('scanWithWallet2')}
+          </Box>
+        </Box>
+      </Box>
+    );
+  }, [qrcode, hideChooseList, showWalletOptions]);
+
   const fallbackContent = (
     <Box
       className="did-connect__body"
@@ -372,37 +433,7 @@ function Connect({
       }}>
       {!showStatus && !hideQRCode ? (
         <>
-          <Box
-            sx={{
-              display: 'flex',
-              alignItems: 'center',
-              overflowX: 'auto',
-              overflowY: 'visible',
-              maxWidth: '100%',
-              margin: 'auto',
-            }}>
-            <Box
-              sx={{
-                fontSize: 0,
-                position: 'relative',
-                mb: hideChooseList ? 4 : 2.5,
-              }}>
-              {qrcode}
-              <Box
-                sx={{
-                  position: 'absolute',
-                  color: 'text.secondary',
-                  fontSize: 12,
-                  bottom: hideChooseList ? 8 : 4,
-                  transform: 'translateY(100%)',
-                  left: 0,
-                  right: 0,
-                  textAlign: 'center',
-                }}>
-                {t('scanWithWallet1')} <DownloadTips /> {t('scanWithWallet2')}
-              </Box>
-            </Box>
-          </Box>
+          {qrcodeContent}
           {hideChooseList ? null : (
             <Box>
               <Divider
@@ -450,6 +481,7 @@ function Connect({
           baseUrl={baseUrl}
           customItems={customItems}
           providerList={providerList}
+          qrcode={qrcodeContent}
         />
       </Box>
     </Box>
@@ -466,6 +498,8 @@ function Connect({
     contentResult = fallbackContent;
   }
 
+  const containerWidth = hideQRCode || showStatus ? DID_CONNECT_SMALL_WIDTH : DID_CONNECT_MEDIUM_WIDTH;
+
   return (
     <Box
       ref={rootRef}
@@ -479,7 +513,7 @@ function Connect({
         maxWidth: '100%',
         width:
           // eslint-disable-next-line no-nested-ternary
-          mode === 'drawer' ? '100%' : hideQRCode || showStatus ? DID_CONNECT_SMALL_WIDTH : DID_CONNECT_MEDIUM_WIDTH,
+          mode === 'drawer' ? '100%' : showWalletOptions ? containerWidth - 20 : containerWidth,
         transition: 'width 0.2s ease-in-out',
         margin: 'auto',
         p: 3,
@@ -492,6 +526,8 @@ function Connect({
         description={messages.scan}
         extraContent={extraContent}
         disableSwitchApp={disableSwitchApp}
+        showWalletOptions={showWalletOptions}
+        onBack={() => setShowWalletOptions(false)}
       />
       <AutoHeight initHeight={24 + 16 + 32}>{contentResult}</AutoHeight>
       <DIDConnectFooter currentAppInfo={currentAppInfo} currentAppColor={currentAppColor} />