@arcblock/ux 2.13.61 → 2.13.63

package/lib/DIDConnect/did-connect-container.js

@@ -98,7 +98,7 @@ export default function DIDConnectContainer({
     return `hsla(${h}, ${s}%, ${finalL}%, ${finalAlpha})`;
   });
   const backgroundGlow = `linear-gradient(45deg, ${colorListGlow.join(', ')})`;
-  const glowStyle = {
+  const glowStyle = open ? {
     overflow: 'visible',
     '&::before, &::after': {
       content: '""',
@@ -129,7 +129,7 @@ export default function DIDConnectContainer({
         backgroundPosition: '0 0'
       }
     }
-  };
+  } : {};
   if (openVariant === 'page') {
     return /*#__PURE__*/_jsx(Box, {
       className: "did-connect__container-page",
@@ -179,11 +179,11 @@ export default function DIDConnectContainer({
           borderBottomLeftRadius: 0,
           borderBottomRightRadius: 0,
           p: '2px',
-          animation: 'glowBreathe 7s linear infinite',
           '.did-connect__root': {
             backgroundColor: 'transparent'
           },
           overflow: 'hidden',
+          animation: open ? 'glowBreathe 7s linear infinite' : 'none',
           '@keyframes glowBreathe': {
             '0%, 100%': {
               boxShadow: `

package/lib/DIDConnect/did-connect-footer.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '@mui/material';
 import { useCreation, useSize } from 'ahooks';
 import { useRef } from 'react';
+import useBrowser from '@arcblock/react-hooks/lib/useBrowser';
 import PoweredBy from './powered-by';
 import AppInfoItem from './app-info-item';
 import AppIcon from './app-icon';
@@ -13,6 +14,7 @@ export default function DIDConnectFooter({
   currentAppColor = globalThis.blocklet?.appPid ? getDIDColor(globalThis.blocklet?.appPid) : '#fff',
   sx
 }) {
+  const browser = useBrowser();
   const rootRef = useRef(null);
   const size = useSize(rootRef);
   const isSmallView = useCreation(() => {
@@ -32,7 +34,8 @@ export default function DIDConnectFooter({
       backgroundColor: hexToRgba(currentAppColor, 0.08),
       // 需要保持跟 .did-connect__root 的规则一样
       mx: isSmallView ? -2 : -3,
-      px: isSmallView ? 2 : 3,
+      // eslint-disable-next-line no-nested-ternary
+      px: isSmallView ? browser.arcSphere ? 1 : 2 : 3,
       py: 1.5,
       // HACK: 极限条件下，footer 会溢出，使用隐藏的滚动条来处理这种情况（屏幕宽度小于 360 时会出现）
       overflow: 'auto',

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.61",
+  "version": "2.13.63",
   "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": "af211a24eb0d7f0b24a3e15b8d7acff49edd7494",
+  "gitHead": "3ba664fa67f707517df7ba1958bc13870c253ac0",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.13.61",
-    "@arcblock/nft-display": "^2.13.61",
-    "@arcblock/react-hooks": "^2.13.61",
+    "@arcblock/icons": "^2.13.63",
+    "@arcblock/nft-display": "^2.13.63",
+    "@arcblock/react-hooks": "^2.13.63",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@blocklet/theme": "^2.13.61",
+    "@blocklet/theme": "^2.13.63",
     "@fontsource/roboto": "~5.1.1",
     "@fontsource/ubuntu-mono": "^5.0.18",
     "@iconify-icons/logos": "^1.2.36",

package/src/DIDConnect/did-connect-container.tsx

@@ -137,39 +137,41 @@ export default function DIDConnectContainer({
 
   const backgroundGlow = `linear-gradient(45deg, ${colorListGlow.join(', ')})`;
 
-  const glowStyle = {
-    overflow: 'visible',
-    '&::before, &::after': {
-      content: '""',
-      position: 'absolute',
-      top: '-3px',
-      right: '-3px',
-      bottom: '-3px',
-      left: '-3px',
-      background,
-      backgroundSize: '300% 300%',
-      backgroundRepeat: 'no-repeat',
-      animation: 'glowRotate 10s linear infinite',
-      borderRadius: '14px !important',
-      zIndex: 0,
-    },
-    '&::after': {
-      background: backgroundGlow,
-      filter: 'blur(15px)',
-    },
+  const glowStyle = open
+    ? {
+        overflow: 'visible',
+        '&::before, &::after': {
+          content: '""',
+          position: 'absolute',
+          top: '-3px',
+          right: '-3px',
+          bottom: '-3px',
+          left: '-3px',
+          background,
+          backgroundSize: '300% 300%',
+          backgroundRepeat: 'no-repeat',
+          animation: 'glowRotate 10s linear infinite',
+          borderRadius: '14px !important',
+          zIndex: 0,
+        },
+        '&::after': {
+          background: backgroundGlow,
+          filter: 'blur(15px)',
+        },
 
-    '@keyframes glowRotate': {
-      '0%': {
-        backgroundPosition: '0 0',
-      },
-      '50%': {
-        backgroundPosition: '100% 0',
-      },
-      '100%': {
-        backgroundPosition: '0 0',
-      },
-    },
-  };
+        '@keyframes glowRotate': {
+          '0%': {
+            backgroundPosition: '0 0',
+          },
+          '50%': {
+            backgroundPosition: '100% 0',
+          },
+          '100%': {
+            backgroundPosition: '0 0',
+          },
+        },
+      }
+    : {};
 
   if (openVariant === 'page') {
     return (
@@ -223,11 +225,11 @@ export default function DIDConnectContainer({
               borderBottomLeftRadius: 0,
               borderBottomRightRadius: 0,
               p: '2px',
-              animation: 'glowBreathe 7s linear infinite',
               '.did-connect__root': {
                 backgroundColor: 'transparent',
               },
               overflow: 'hidden',
+              animation: open ? 'glowBreathe 7s linear infinite' : 'none',
               '@keyframes glowBreathe': {
                 '0%, 100%': {
                   boxShadow: `

package/src/DIDConnect/did-connect-footer.tsx

@@ -1,6 +1,7 @@
 import { Box, SxProps } from '@mui/material';
 import { useCreation, useSize } from 'ahooks';
 import { useRef } from 'react';
+import useBrowser from '@arcblock/react-hooks/lib/useBrowser';
 
 import PoweredBy from './powered-by';
 import AppInfoItem from './app-info-item';
@@ -18,6 +19,7 @@ export default function DIDConnectFooter({
   currentAppColor?: string;
   sx?: SxProps;
 }) {
+  const browser = useBrowser();
   const rootRef = useRef<HTMLDivElement>(null);
   const size = useSize(rootRef);
   const isSmallView = useCreation(() => {
@@ -40,7 +42,8 @@ export default function DIDConnectFooter({
           backgroundColor: hexToRgba(currentAppColor, 0.08),
           // 需要保持跟 .did-connect__root 的规则一样
           mx: isSmallView ? -2 : -3,
-          px: isSmallView ? 2 : 3,
+          // eslint-disable-next-line no-nested-ternary
+          px: isSmallView ? (browser.arcSphere ? 1 : 2) : 3,
           py: 1.5,
           // HACK: 极限条件下，footer 会溢出，使用隐藏的滚动条来处理这种情况（屏幕宽度小于 360 时会出现）
           overflow: 'auto',

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>