@arcblock/ux 2.13.60 → 2.13.62

package/lib/DIDConnect/auth-apps/auth-apps-info.d.ts

@@ -8,7 +8,7 @@ export type CurrentAppInfo = {
     appName: string;
     appUrl: string;
 };
-export default function AuthApps({ requestAppInfo, currentAppInfo, }: {
+export default function AuthAppsInfo({ requestAppInfo, currentAppInfo, }: {
     requestAppInfo: RequestAppInfo;
     currentAppInfo: CurrentAppInfo;
 }): import("react/jsx-runtime").JSX.Element;

package/lib/DIDConnect/auth-apps/auth-apps-info.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Typography } from '@mui/material';
 import Img from '../../Img';
-export default function AuthApps({
+export default function AuthAppsInfo({
   requestAppInfo,
   currentAppInfo
 }) {

package/lib/DIDConnect/auth-apps/index.d.ts

@@ -1,9 +1,10 @@
+import { BoxProps } from '@mui/material';
 import type { UserPublicInfo } from '@blocklet/js-sdk';
 import { type RequestAppInfo, type CurrentAppInfo } from './auth-apps-info';
 /**
  * @example app/connect-to-did-space?appPid=zNKp8tdZUanWKnvhwZWvF2hKRutwM9ykLaY8&appDid=zNKp8tdZUanWKnvhwZWvF2hKRutwM9ykLaY8&appName=233&appDescription=456&appUrl=https://bbqaw5mgxc6fnihrwqcejcxvukkdgkk4anwxwk5msvm.did.abtnet.io/zh
  */
-export default function AuthApps({ session, requestAppInfo, currentAppInfo, children, userInfo, hideSwitchConnect, hideAuthorize, hideCancel, notThisText, authorizeText, connectText, cancelText, useAnotherText, onConnect, onAuthorize, onSwitchConnect, onCancel, }: {
+export default function AuthApps({ session, requestAppInfo, currentAppInfo, children, userInfo, hideSwitchConnect, hideAuthorize, hideCancel, notThisText, authorizeText, connectText, cancelText, useAnotherText, slotProps, onConnect, onAuthorize, onSwitchConnect, onCancel, }: {
     session: any;
     requestAppInfo: RequestAppInfo;
     currentAppInfo: CurrentAppInfo;
@@ -17,6 +18,11 @@ export default function AuthApps({ session, requestAppInfo, currentAppInfo, chil
     connectText?: string;
     cancelText?: string;
     useAnotherText?: string;
+    slotProps?: {
+        root?: BoxProps;
+        didConnectContainer?: object;
+        contentContainer?: BoxProps;
+    };
     onConnect?: (done: () => void) => void;
     onAuthorize?: (done: () => void) => void;
     onSwitchConnect?: (done: () => void) => void;

package/lib/DIDConnect/auth-apps/index.js

@@ -10,6 +10,7 @@ import { translate } from '../../Locale/util';
 import { useLocaleContext } from '../../Locale/context';
 import UserCard from '../../UserCard';
 import { CardType, InfoType } from '../../UserCard/types';
+import { mergeSx } from '../../Util/style';
 const translations = {
   en: {
     notThis: 'Not this?',
@@ -44,6 +45,7 @@ export default function AuthApps({
   connectText,
   cancelText,
   useAnotherText,
+  slotProps,
   onConnect = noop,
   onAuthorize = noop,
   onSwitchConnect = noop,
@@ -84,14 +86,17 @@ export default function AuthApps({
     did: window.blocklet?.appPid,
     standalone: true,
     children: /*#__PURE__*/_jsx(Box, {
-      sx: {
+      ...slotProps?.root,
+      sx: mergeSx({
         width: 420,
         maxWidth: '100%'
-      },
+      }, slotProps?.root?.sx),
       children: /*#__PURE__*/_jsx(DIDConnectContainer, {
         hideCloseButton: true,
+        ...slotProps?.didConnectContainer,
         children: /*#__PURE__*/_jsxs(Box, {
-          sx: {
+          ...slotProps?.contentContainer,
+          sx: mergeSx({
             display: 'flex',
             flexDirection: 'column',
             gap: 1.5,
@@ -105,7 +110,7 @@ export default function AuthApps({
               xl: 4
             },
             bgcolor: 'background.paper'
-          },
+          }, slotProps?.contentContainer?.sx),
           children: [/*#__PURE__*/_jsx(AuthAppsInfo, {
             requestAppInfo: requestAppInfo,
             currentAppInfo: currentAppInfo

package/lib/NavMenu/products.js

@@ -1535,7 +1535,7 @@ export default function Products({
     return [{
       type: 'Group',
       label: t('groups.applications'),
-      children: [[{
+      children: [{
         label: /*#__PURE__*/_jsx(Link, {
           to: `https://www.nftstudio.rocks/${locale}`,
           target: "_blank",
@@ -1553,7 +1553,16 @@ export default function Products({
         }),
         description: t('products.creatorStudio.description'),
         icon: /*#__PURE__*/_jsx(CreatorStudioSvg, {})
-      }], [{
+      }, {
+        label: /*#__PURE__*/_jsx(Link, {
+          to: `https://www.aistro.io/${locale}`,
+          target: "_blank",
+          rel: "noreferrer noopener",
+          children: "Aistro"
+        }),
+        description: t('products.aistro.description'),
+        icon: /*#__PURE__*/_jsx(AistroSvg, {})
+      }, {
         label: /*#__PURE__*/_jsx(Link, {
           to: "https://www.aigne.io/",
           target: "_blank",
@@ -1575,20 +1584,11 @@ export default function Products({
         }),
         description: t('products.arcsphere.description'),
         icon: /*#__PURE__*/_jsx(ArcSphereSvg, {})
-      }, {
-        label: /*#__PURE__*/_jsx(Link, {
-          to: `https://www.aistro.io/${locale}`,
-          target: "_blank",
-          rel: "noreferrer noopener",
-          children: "Aistro"
-        }),
-        description: t('products.aistro.description'),
-        icon: /*#__PURE__*/_jsx(AistroSvg, {})
-      }]]
+      }]
     }, {
       type: 'Group',
       label: t('groups.components'),
-      children: [[{
+      children: [{
         label: /*#__PURE__*/_jsx(Link, {
           to: `https://launcher.arcblock.io/${locale}`,
           target: "_blank",
@@ -1618,7 +1618,7 @@ export default function Products({
           src: PaymentKitPng,
           alt: "Payment Kit"
         })
-      }], [{
+      }, {
         label: /*#__PURE__*/_jsx(Link, {
           to: `https://store.blocklet.dev/?locale=${locale}`,
           target: "_blank",
@@ -1636,11 +1636,11 @@ export default function Products({
         }),
         description: t('products.web3Kit.description'),
         icon: /*#__PURE__*/_jsx(Web3KitSvg, {})
-      }]]
+      }]
     }, {
       type: 'Group',
       label: t('groups.computeStorage'),
-      children: [[{
+      children: [{
         label: /*#__PURE__*/_jsx(Link, {
           to: `https://www.arcblock.io/content/collections/${locale}/blocklet`,
           target: "_blank",
@@ -1667,7 +1667,7 @@ export default function Products({
         }),
         description: t('products.abtNetwork.description'),
         icon: /*#__PURE__*/_jsx(AbtNetworkSvg, {})
-      }], [{
+      }, {
         label: /*#__PURE__*/_jsx(Link, {
           to: `https://www.blocklet.io/${locale}/blocklet-server`,
           target: "_blank",
@@ -1685,11 +1685,11 @@ export default function Products({
         }),
         description: t('products.ocap.description'),
         icon: /*#__PURE__*/_jsx(OCAPSvg, {})
-      }]]
+      }]
     }, {
       type: 'Group',
       label: t('groups.identity'),
-      children: [[{
+      children: [{
         label: /*#__PURE__*/_jsx(Link, {
           to: `https://www.arcblock.io/content/collections/${locale}/did`,
           target: "_blank",
@@ -1716,7 +1716,7 @@ export default function Products({
         }),
         description: t('products.didNameService.description'),
         icon: /*#__PURE__*/_jsx(DidNameServiceSvg, {})
-      }], [{
+      }, {
         label: /*#__PURE__*/_jsx(Link, {
           to: `https://www.arcblock.io/content/collections/${locale}/verifiable-credential`,
           target: "_blank",
@@ -1734,7 +1734,7 @@ export default function Products({
         }),
         description: t('products.didConnect.description'),
         icon: /*#__PURE__*/_jsx(DidConnectSvg, {})
-      }]]
+      }]
     }];
   }, [t, locale, palette]);
   return /*#__PURE__*/_jsx(Wrapper, {
@@ -1743,11 +1743,11 @@ export default function Products({
     ...rest,
     children: groups.map(group => /*#__PURE__*/_jsx(SubItemGroup, {
       label: group.label,
-      children: group.children.map((rows, i) => /*#__PURE__*/_jsx(Grid, {
+      children: /*#__PURE__*/_jsx(Grid, {
         container: true,
         columnSpacing: 1,
         rowSpacing: 1,
-        children: rows.map((item, j) => /*#__PURE__*/_jsx(Grid, {
+        children: group.children.map(item => /*#__PURE__*/_jsx(Grid, {
           item: true,
           xs: 12,
           md: 6,
@@ -1759,8 +1759,8 @@ export default function Products({
             },
             ...item
           })
-        }, j))
-      }, i))
+        }, item.description))
+      })
     }, group.label))
   });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.13.60",
+  "version": "2.13.62",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -71,14 +71,14 @@
     "react": ">=18.2.0",
     "react-router-dom": ">=6.22.3"
   },
-  "gitHead": "76eb26b12d8ccc1190e5fce847372babca7515c5",
+  "gitHead": "36a4594299167a1bff28fc11cb590e552576f687",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.13.60",
-    "@arcblock/nft-display": "^2.13.60",
-    "@arcblock/react-hooks": "^2.13.60",
+    "@arcblock/icons": "^2.13.62",
+    "@arcblock/nft-display": "^2.13.62",
+    "@arcblock/react-hooks": "^2.13.62",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@blocklet/theme": "^2.13.60",
+    "@blocklet/theme": "^2.13.62",
     "@fontsource/roboto": "~5.1.1",
     "@fontsource/ubuntu-mono": "^5.0.18",
     "@iconify-icons/logos": "^1.2.36",

package/src/DIDConnect/auth-apps/auth-apps-info.tsx

@@ -13,7 +13,7 @@ export type CurrentAppInfo = {
   appUrl: string;
 };
 
-export default function AuthApps({
+export default function AuthAppsInfo({
   requestAppInfo,
   currentAppInfo,
 }: {

package/src/DIDConnect/auth-apps/index.tsx

@@ -1,4 +1,4 @@
-import { Box, Button, CircularProgress, Link, Stack, Typography } from '@mui/material';
+import { Box, BoxProps, Button, CircularProgress, Link, Stack, SxProps, Typography } from '@mui/material';
 import { useMemoizedFn, useReactive } from 'ahooks';
 import noop from 'lodash/noop';
 import type { UserPublicInfo } from '@blocklet/js-sdk';
@@ -11,6 +11,7 @@ import { translate } from '../../Locale/util';
 import { useLocaleContext } from '../../Locale/context';
 import UserCard from '../../UserCard';
 import { CardType, InfoType } from '../../UserCard/types';
+import { mergeSx } from '../../Util/style';
 
 const translations = {
   en: {
@@ -49,6 +50,8 @@ export default function AuthApps({
   cancelText,
   useAnotherText,
 
+  slotProps,
+
   onConnect = noop,
   onAuthorize = noop,
   onSwitchConnect = noop,
@@ -70,6 +73,12 @@ export default function AuthApps({
   cancelText?: string;
   useAnotherText?: string;
 
+  slotProps?: {
+    root?: BoxProps;
+    didConnectContainer?: object;
+    contentContainer?: BoxProps;
+  };
+
   onConnect?: (done: () => void) => void;
   onAuthorize?: (done: () => void) => void;
   onSwitchConnect?: (done: () => void) => void;
@@ -114,27 +123,35 @@ export default function AuthApps({
   return (
     <LandingPage did={window.blocklet?.appPid} standalone>
       <Box
-        sx={{
-          width: 420,
-          maxWidth: '100%',
-        }}>
-        <DIDConnectContainer hideCloseButton>
+        {...slotProps?.root}
+        sx={mergeSx(
+          {
+            width: 420,
+            maxWidth: '100%',
+          },
+          slotProps?.root?.sx as SxProps
+        )}>
+        <DIDConnectContainer hideCloseButton {...slotProps?.didConnectContainer}>
           <Box
-            sx={{
-              display: 'flex',
-              flexDirection: 'column',
-              gap: 1.5,
-              p: {
-                xs: 2,
-                lg: 3,
-                xl: 4,
-              },
-              pt: {
-                xs: 3,
-                xl: 4,
+            {...slotProps?.contentContainer}
+            sx={mergeSx(
+              {
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 1.5,
+                p: {
+                  xs: 2,
+                  lg: 3,
+                  xl: 4,
+                },
+                pt: {
+                  xs: 3,
+                  xl: 4,
+                },
+                bgcolor: 'background.paper',
               },
-              bgcolor: 'background.paper',
-            }}>
+              slotProps?.contentContainer?.sx as SxProps
+            )}>
             <AuthAppsInfo requestAppInfo={requestAppInfo} currentAppInfo={currentAppInfo} />
 
             {user ? (

package/src/NavMenu/products.tsx

@@ -213,238 +213,219 @@ export default function Products({ className, isOpen, ...rest }: ProductsProps)
         type: 'Group',
         label: t('groups.applications'),
         children: [
-          [
-            {
-              label: (
-                <Link to={`https://www.nftstudio.rocks/${locale}`} target="_blank" rel="noreferrer noopener">
-                  NFT Studio
-                </Link>
-              ),
-              description: t('products.nftStudio.description'),
-              icon: <NftStudioSvg />,
-            },
-            {
-              label: (
-                <Link
-                  to={`https://www.arcblock.io/content/collections/${locale}/creator-studio`}
-                  target="_blank"
-                  rel="noreferrer noopener">
-                  Creator Studio
-                </Link>
-              ),
-              description: t('products.creatorStudio.description'),
-              icon: <CreatorStudioSvg />,
-            },
-          ],
-          [
-            {
-              label: (
-                <Link to="https://www.aigne.io/" target="_blank" rel="noreferrer noopener">
-                  AIGNE
-                </Link>
-              ),
-              description: t('products.aigne.description'),
-              icon: <AigneSvg style={{ filter: palette.mode === 'dark' ? 'invert(1)' : 'none' }} />,
-            },
-            {
-              label: (
-                <Link to={`https://www.arcsphere.io/${locale}`} target="_blank" rel="noreferrer noopener">
-                  ArcSphere
-                </Link>
-              ),
-              description: t('products.arcsphere.description'),
-              icon: <ArcSphereSvg />,
-            },
-            {
-              label: (
-                <Link to={`https://www.aistro.io/${locale}`} target="_blank" rel="noreferrer noopener">
-                  Aistro
-                </Link>
-              ),
-              description: t('products.aistro.description'),
-              icon: <AistroSvg />,
-            },
-          ],
+          {
+            label: (
+              <Link to={`https://www.nftstudio.rocks/${locale}`} target="_blank" rel="noreferrer noopener">
+                NFT Studio
+              </Link>
+            ),
+            description: t('products.nftStudio.description'),
+            icon: <NftStudioSvg />,
+          },
+          {
+            label: (
+              <Link
+                to={`https://www.arcblock.io/content/collections/${locale}/creator-studio`}
+                target="_blank"
+                rel="noreferrer noopener">
+                Creator Studio
+              </Link>
+            ),
+            description: t('products.creatorStudio.description'),
+            icon: <CreatorStudioSvg />,
+          },
+          {
+            label: (
+              <Link to={`https://www.aistro.io/${locale}`} target="_blank" rel="noreferrer noopener">
+                Aistro
+              </Link>
+            ),
+            description: t('products.aistro.description'),
+            icon: <AistroSvg />,
+          },
+          {
+            label: (
+              <Link to="https://www.aigne.io/" target="_blank" rel="noreferrer noopener">
+                AIGNE
+              </Link>
+            ),
+            description: t('products.aigne.description'),
+            icon: <AigneSvg style={{ filter: palette.mode === 'dark' ? 'invert(1)' : 'none' }} />,
+          },
+          {
+            label: (
+              <Link to={`https://www.arcsphere.io/${locale}`} target="_blank" rel="noreferrer noopener">
+                ArcSphere
+              </Link>
+            ),
+            description: t('products.arcsphere.description'),
+            icon: <ArcSphereSvg />,
+          },
         ],
       },
       {
         type: 'Group',
         label: t('groups.components'),
         children: [
-          [
-            {
-              label: (
-                <Link to={`https://launcher.arcblock.io/${locale}`} target="_blank" rel="noreferrer noopener">
-                  Blocklet Launcher
-                </Link>
-              ),
-              description: t('products.blockletLauncher.description'),
-              icon: <BlockletLauncherSvg />,
-            },
-            {
-              label: (
-                <Link to={`https://www.aikit.rocks/${locale}`} target="_blank" rel="noreferrer noopener">
-                  AI Kit
-                </Link>
-              ),
-              description: t('products.aiKit.description'),
-              icon: <AIKitSvg />,
-            },
-            {
-              label: (
-                <Link to={`https://www.blocklet.io/${locale}/payment-kit`} target="_blank" rel="noreferrer noopener">
-                  Payment Kit
-                </Link>
-              ),
-              description: t('products.paymentKit.description'),
-              icon: <img src={PaymentKitPng} alt="Payment Kit" />,
-            },
-          ],
-          [
-            {
-              label: (
-                <Link to={`https://store.blocklet.dev/?locale=${locale}`} target="_blank" rel="noreferrer noopener">
-                  Blocklet Store
-                </Link>
-              ),
-              description: t('products.blockletStore.description'),
-              icon: <BlockletStoreSvg />,
-            },
-            {
-              label: (
-                <Link to={`https://www.web3kit.rocks/${locale}`} target="_blank" rel="noreferrer noopener">
-                  Web3 Kit
-                </Link>
-              ),
-              description: t('products.web3Kit.description'),
-              icon: <Web3KitSvg />,
-            },
-          ],
+          {
+            label: (
+              <Link to={`https://launcher.arcblock.io/${locale}`} target="_blank" rel="noreferrer noopener">
+                Blocklet Launcher
+              </Link>
+            ),
+            description: t('products.blockletLauncher.description'),
+            icon: <BlockletLauncherSvg />,
+          },
+          {
+            label: (
+              <Link to={`https://www.aikit.rocks/${locale}`} target="_blank" rel="noreferrer noopener">
+                AI Kit
+              </Link>
+            ),
+            description: t('products.aiKit.description'),
+            icon: <AIKitSvg />,
+          },
+          {
+            label: (
+              <Link to={`https://www.blocklet.io/${locale}/payment-kit`} target="_blank" rel="noreferrer noopener">
+                Payment Kit
+              </Link>
+            ),
+            description: t('products.paymentKit.description'),
+            icon: <img src={PaymentKitPng} alt="Payment Kit" />,
+          },
+          {
+            label: (
+              <Link to={`https://store.blocklet.dev/?locale=${locale}`} target="_blank" rel="noreferrer noopener">
+                Blocklet Store
+              </Link>
+            ),
+            description: t('products.blockletStore.description'),
+            icon: <BlockletStoreSvg />,
+          },
+          {
+            label: (
+              <Link to={`https://www.web3kit.rocks/${locale}`} target="_blank" rel="noreferrer noopener">
+                Web3 Kit
+              </Link>
+            ),
+            description: t('products.web3Kit.description'),
+            icon: <Web3KitSvg />,
+          },
         ],
       },
       {
         type: 'Group',
         label: t('groups.computeStorage'),
         children: [
-          [
-            {
-              label: (
-                <Link
-                  to={`https://www.arcblock.io/content/collections/${locale}/blocklet`}
-                  target="_blank"
-                  rel="noreferrer noopener">
-                  Blocklet Framework
-                </Link>
-              ),
-              description: t('products.blockletFramework.description'),
-              icon: <BlockletFrameworkSvg />,
-            },
-            {
-              label: (
-                <Link to={`https://www.didspaces.com/${locale}`} target="_blank" rel="noreferrer noopener">
-                  DID Spaces
-                </Link>
-              ),
-              description: t('products.didSpaces.description'),
-              icon: <DidSvg />,
-            },
-            {
-              label: (
-                <Link to="https://main.abtnetwork.io/" target="_blank" rel="noreferrer noopener">
-                  ABT Network
-                </Link>
-              ),
-              description: t('products.abtNetwork.description'),
-              icon: <AbtNetworkSvg />,
-            },
-          ],
-          [
-            {
-              label: (
-                <Link
-                  to={`https://www.blocklet.io/${locale}/blocklet-server`}
-                  target="_blank"
-                  rel="noreferrer noopener">
-                  Blocklet Server
-                </Link>
-              ),
-              description: t('products.blockletServer.description'),
-              icon: <BlockletServerSvg />,
-            },
-            {
-              label: (
-                <Link
-                  to={`https://www.arcblock.io/content/collections/${locale}/ocap`}
-                  target="_blank"
-                  rel="noreferrer noopener">
-                  ОСАР
-                </Link>
-              ),
-              description: t('products.ocap.description'),
-              icon: <OCAPSvg />,
-            },
-          ],
+          {
+            label: (
+              <Link
+                to={`https://www.arcblock.io/content/collections/${locale}/blocklet`}
+                target="_blank"
+                rel="noreferrer noopener">
+                Blocklet Framework
+              </Link>
+            ),
+            description: t('products.blockletFramework.description'),
+            icon: <BlockletFrameworkSvg />,
+          },
+          {
+            label: (
+              <Link to={`https://www.didspaces.com/${locale}`} target="_blank" rel="noreferrer noopener">
+                DID Spaces
+              </Link>
+            ),
+            description: t('products.didSpaces.description'),
+            icon: <DidSvg />,
+          },
+          {
+            label: (
+              <Link to="https://main.abtnetwork.io/" target="_blank" rel="noreferrer noopener">
+                ABT Network
+              </Link>
+            ),
+            description: t('products.abtNetwork.description'),
+            icon: <AbtNetworkSvg />,
+          },
+          {
+            label: (
+              <Link to={`https://www.blocklet.io/${locale}/blocklet-server`} target="_blank" rel="noreferrer noopener">
+                Blocklet Server
+              </Link>
+            ),
+            description: t('products.blockletServer.description'),
+            icon: <BlockletServerSvg />,
+          },
+          {
+            label: (
+              <Link
+                to={`https://www.arcblock.io/content/collections/${locale}/ocap`}
+                target="_blank"
+                rel="noreferrer noopener">
+                ОСАР
+              </Link>
+            ),
+            description: t('products.ocap.description'),
+            icon: <OCAPSvg />,
+          },
         ],
       },
       {
         type: 'Group',
         label: t('groups.identity'),
         children: [
-          [
-            {
-              label: (
-                <Link
-                  to={`https://www.arcblock.io/content/collections/${locale}/did`}
-                  target="_blank"
-                  rel="noreferrer noopener">
-                  DID
-                </Link>
-              ),
-              description: t('products.did.description'),
-              icon: <DidSvg />,
-            },
-            {
-              label: (
-                <Link to={`https://www.didwallet.io/${locale}`} target="_blank" rel="noreferrer noopener">
-                  DID Wallet
-                </Link>
-              ),
-              description: t('products.didWallet.description'),
-              icon: <DidWalletSvg />,
-            },
-            {
-              label: (
-                <Link to={`https://www.didnames.io/${locale}`} target="_blank" rel="noreferrer noopener">
-                  DID Names
-                </Link>
-              ),
-              description: t('products.didNameService.description'),
-              icon: <DidNameServiceSvg />,
-            },
-          ],
-          [
-            {
-              label: (
-                <Link
-                  to={`https://www.arcblock.io/content/collections/${locale}/verifiable-credential`}
-                  target="_blank"
-                  rel="noreferrer noopener">
-                  VC
-                </Link>
-              ),
-              description: t('products.vc.description'),
-              icon: <VCSvg />,
-            },
-            {
-              label: (
-                <Link to={`https://www.didconnect.io/${locale}`} target="_blank" rel="noreferrer noopener">
-                  DID Connect
-                </Link>
-              ),
-              description: t('products.didConnect.description'),
-              icon: <DidConnectSvg />,
-            },
-          ],
+          {
+            label: (
+              <Link
+                to={`https://www.arcblock.io/content/collections/${locale}/did`}
+                target="_blank"
+                rel="noreferrer noopener">
+                DID
+              </Link>
+            ),
+            description: t('products.did.description'),
+            icon: <DidSvg />,
+          },
+          {
+            label: (
+              <Link to={`https://www.didwallet.io/${locale}`} target="_blank" rel="noreferrer noopener">
+                DID Wallet
+              </Link>
+            ),
+            description: t('products.didWallet.description'),
+            icon: <DidWalletSvg />,
+          },
+          {
+            label: (
+              <Link to={`https://www.didnames.io/${locale}`} target="_blank" rel="noreferrer noopener">
+                DID Names
+              </Link>
+            ),
+            description: t('products.didNameService.description'),
+            icon: <DidNameServiceSvg />,
+          },
+          {
+            label: (
+              <Link
+                to={`https://www.arcblock.io/content/collections/${locale}/verifiable-credential`}
+                target="_blank"
+                rel="noreferrer noopener">
+                VC
+              </Link>
+            ),
+            description: t('products.vc.description'),
+            icon: <VCSvg />,
+          },
+          {
+            label: (
+              <Link to={`https://www.didconnect.io/${locale}`} target="_blank" rel="noreferrer noopener">
+                DID Connect
+              </Link>
+            ),
+            description: t('products.didConnect.description'),
+            icon: <DidConnectSvg />,
+          },
         ],
       },
     ];
@@ -454,15 +435,13 @@ export default function Products({ className, isOpen, ...rest }: ProductsProps)
     <Wrapper ref={wrapperRef} className={`is-${mode} ${className}`} {...rest}>
       {groups.map((group) => (
         <SubItemGroup key={group.label} label={group.label}>
-          {group.children.map((rows, i) => (
-            <Grid container key={i} columnSpacing={1} rowSpacing={1}>
-              {rows.map((item, j) => (
-                <Grid item xs={12} md={6} lg={4} key={j}>
-                  <Item variant="panel" style={{ padding: '8px' }} {...item} />
-                </Grid>
-              ))}
-            </Grid>
-          ))}
+          <Grid container columnSpacing={1} rowSpacing={1}>
+            {group.children.map((item) => (
+              <Grid item xs={12} md={6} lg={4} key={item.description}>
+                <Item variant="panel" style={{ padding: '8px' }} {...item} />
+              </Grid>
+            ))}
+          </Grid>
         </SubItemGroup>
       ))}
     </Wrapper>