Playground: Revamp

Author: MananTank

apps/dashboard/src/@/icons/TokenIcon.tsx

@@ -0,0 +1,21 @@
+export function TokenIcon(props: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      role="presentation"
+      className={props.className}
+    >
+      <path
+        d="M15.9377 15.9377C19.3603 15.4795 22 12.548 22 9C22 5.13401 18.866 2 15 2C11.452 2 8.52049 4.63967 8.06227 8.06227M16 15C16 18.866 12.866 22 9 22C5.13401 22 2 18.866 2 15C2 11.134 5.13401 8 9 8C12.866 8 16 11.134 16 15Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

apps/dashboard/src/@/icons/WalletProductIcon.tsx

@@ -0,0 +1,21 @@
+export function WalletProductIcon(props: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      role="presentation"
+      className={props.className}
+    >
+      <path
+        d="M16 7.99995V4.5006C16 3.66887 16 3.253 15.8248 2.99742C15.6717 2.77413 15.4346 2.62245 15.1678 2.57703C14.8623 2.52505 14.4847 2.69932 13.7295 3.04787L4.85901 7.14194C4.18551 7.45279 3.84875 7.60822 3.60211 7.84927C3.38406 8.06237 3.21762 8.3225 3.1155 8.60978C3 8.93474 3 9.30563 3 10.0474V14.9999M16.5 14.4999H16.51M3 11.2L3 17.7999C3 18.9201 3 19.4801 3.21799 19.9079C3.40973 20.2843 3.71569 20.5902 4.09202 20.782C4.51984 20.9999 5.07989 20.9999 6.2 20.9999H17.8C18.9201 20.9999 19.4802 21 19.908 20.782C20.2843 20.5902 20.5903 20.2843 20.782 19.9079C21 19.4801 21 18.9201 21 17.7999V11.2C21 10.0798 21 9.51979 20.782 9.09197C20.5903 8.71565 20.2843 8.40969 19.908 8.21794C19.4802 7.99995 18.9201 7.99995 17.8 7.99995L6.2 7.99995C5.0799 7.99995 4.51984 7.99995 4.09202 8.21794C3.7157 8.40968 3.40973 8.71564 3.21799 9.09197C3 9.51979 3 10.0798 3 11.2ZM17 14.4999C17 14.7761 16.7761 14.9999 16.5 14.9999C16.2239 14.9999 16 14.7761 16 14.4999C16 14.2238 16.2239 13.9999 16.5 13.9999C16.7761 13.9999 17 14.2238 17 14.4999Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/TeamSidebarLayout.tsx

@@ -1,5 +1,6 @@
 "use client";
 import {
+  AtomIcon,
   BookTextIcon,
   BoxIcon,
   ChartNoAxesColumnIcon,
@@ -51,7 +52,7 @@ export function TeamSidebarLayout(props: {
             },
           ],
           subMenu: {
-            icon: WalletCardsIcon,
+            icon: AtomIcon,
             label: "Ecosystems",
           },
         },

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectSidebarLayout.tsx

@@ -4,19 +4,19 @@ import {
   BellIcon,
   BookTextIcon,
   BoxIcon,
-  CoinsIcon,
   HomeIcon,
   LockIcon,
   RssIcon,
   SettingsIcon,
-  WalletIcon,
 } from "lucide-react";
 import { FullWidthSidebarLayout } from "@/components/blocks/full-width-sidebar-layout";
 import { Badge } from "@/components/ui/badge";
 import { ContractIcon } from "@/icons/ContractIcon";
 import { InsightIcon } from "@/icons/InsightIcon";
 import { PayIcon } from "@/icons/PayIcon";
 import { SmartAccountIcon } from "@/icons/SmartAccountIcon";
+import { TokenIcon } from "@/icons/TokenIcon";
+import { WalletProductIcon } from "@/icons/WalletProductIcon";
 
 export function ProjectSidebarLayout(props: {
   layoutPath: string;
@@ -48,7 +48,7 @@ export function ProjectSidebarLayout(props: {
           links: [
             {
               href: `${layoutPath}/wallets`,
-              icon: WalletIcon,
+              icon: WalletProductIcon,
               label: "Wallets",
             },
             {
@@ -85,7 +85,7 @@ export function ProjectSidebarLayout(props: {
             },
             {
               href: `${layoutPath}/tokens`,
-              icon: CoinsIcon,
+              icon: TokenIcon,
               label: (
                 <span className="flex items-center gap-2">
                   Tokens <Badge>New</Badge>

apps/playground-web/next.config.mjs

@@ -113,17 +113,37 @@ const nextConfig = {
       },
       {
         source: "/wallets/account-abstraction/sponsor",
-        destination: "/wallets/account-abstraction/eip-4337",
+        destination: "/account-abstraction/eip-4337",
         permanent: false,
       },
       {
         source: "/wallets/account-abstraction/7702",
-        destination: "/wallets/account-abstraction/eip-7702",
+        destination: "/account-abstraction/eip-7702",
         permanent: false,
       },
       {
         source: "/wallets/account-abstraction/5792",
-        destination: "/wallets/account-abstraction/eip-5792",
+        destination: "/account-abstraction/eip-5792",
+        permanent: false,
+      },
+      {
+        source: "/wallets/account-abstraction/native-aa",
+        destination: "/account-abstraction/native-aa",
+        permanent: false,
+      },
+      {
+        source: "/wallets/headless/token-components",
+        destination: "/tokens/token-components",
+        permanent: false,
+      },
+      {
+        source: "/wallets/headless/nft-components",
+        destination: "/tokens/nft-components",
+        permanent: false,
+      },
+      {
+        source: "/wallets/in-app-wallet/ecosystem",
+        destination: "/wallets/ecosystem-wallet",
         permanent: false,
       },
     ];

apps/playground-web/package.json

@@ -3,6 +3,8 @@
     "@abstract-foundation/agw-react": "^1.6.4",
     "@hookform/resolvers": "^3.9.1",
     "@radix-ui/react-checkbox": "^1.3.2",
+    "@radix-ui/react-collapsible": "^1.1.11",
+    "@radix-ui/react-dialog": "1.1.14",
     "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-popover": "^1.1.14",
     "@radix-ui/react-progress": "^1.1.7",