Remove connect playground in dashboard (#4243)

## Problem solved Short description of the bug fixed or feature added  --- ## PR-Codex overview The focus of this PR is to update links and paths related to the Connect Wallet Playground feature. ### Detailed summary - Updated links to direct to `https://playground.thirdweb.com/connect/sign-in/button` - Removed references to the deleted Connect Wallet Playground feature - Updated sidebar and navigation links - Updated redirects to new playground URL > The following files were skipped due to too many changes: `apps/dashboard/src/components/wallets/ConnectWalletMiniPlayground/MiniPlayground.tsx`, `pnpm-lock.yaml` > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`
2024-08-22 21:09:21 +00:00
parent c49bbd3389
commit 0417ab45f1
23 changed files with 56 additions and 2228 deletions
@@ -82,7 +82,6 @@
    "pluralize": "^8.0.0",
    "posthog-js": "1.128.3",
    "posthog-js-opensource": "npm:[email protected]",
-    "prettier": "^3.3.2",
    "prism-react-renderer": "^2.3.1",
    "prismjs": "^1.29.0",
    "qrcode": "^1.5.3",
@@ -137,10 +136,8 @@
    "dotenv": "^16.4.5",
    "eslint": "8.57.0",
    "eslint-config-biome": "^1.7.3",
-    "eslint-config-prettier": "9.1.0",
    "eslint-plugin-import": "^2.29.1",
    "eslint-plugin-inclusive-language": "^2.2.1",
-    "eslint-plugin-prettier": "^5.1.3",
    "eslint-plugin-promise": "^6.2.0",
    "eslint-plugin-react": "7.34.3",
    "eslint-plugin-react-compiler": "0.0.0-experimental-51a85ea-20240601",
@@ -164,16 +161,8 @@
      "tw-components",
      "contract-ui"
    ],
-    "exclude": [
-      "node_modules",
-      "types",
-      "tw-components"
-    ],
+    "exclude": ["node_modules", "types", "tw-components"],
    "entrypoints": []
  },
-  "browserslist": [
-    "defaults",
-    "unreleased versions",
-    "not UCAndroid > 0"
-  ]
+  "browserslist": ["defaults", "unreleased versions", "not UCAndroid > 0"]
 }
@@ -131,12 +131,17 @@ function redirects() {
    },
    {
      source: "/dashboard/connect",
-      destination: "/dashboard/connect/playground",
+      destination: "/dashboard/connect/in-app-wallets",
+      permanent: false,
+    },
+    {
+      source: "/dashboard/connect/playground",
+      destination: "https://playground.thirdweb.com/connect/sign-in/button",
      permanent: false,
    },
    {
      source: "/dashboard/wallet",
-      destination: "/dashboard/connect/playground",
+      destination: "https://playground.thirdweb.com/connect/sign-in/button",
      permanent: false,
    },
    {
@@ -161,7 +166,7 @@ function redirects() {
    },
    {
      source: "/dashboard/wallets",
-      destination: "/dashboard/connect/playground",
+      destination: "https://playground.thirdweb.com/connect/sign-in/button",
      permanent: false,
    },
    {
@@ -181,7 +186,7 @@ function redirects() {
    },
    {
      source: "/dashboard/wallets/connect",
-      destination: "/dashboard/connect/playground",
+      destination: "https://playground.thirdweb.com/connect/sign-in/button",
      permanent: false,
    },
    {
@@ -8,10 +8,5 @@ const LOGGED_IN_ONLY_PATHS = [
 ];

 export function isLoginRequired(pathname: string) {
-  // exceptions from LOGGED_IN_ONLY_PATHS
-  if (pathname.startsWith("/dashboard/connect/playground")) {
-    return false;
-  }
-
  return LOGGED_IN_ONLY_PATHS.some((path) => pathname.startsWith(path));
 }
@@ -7,20 +7,15 @@ const SIDEBAR_SECTIONS = [
    title: "Connect",
    items: [
      {
-        id: "playground",
-        title: "Playground",
-        href: "/dashboard/connect/playground",
+        id: "embedded-wallets",
+        title: "In-App Wallets",
+        href: "/dashboard/connect/in-app-wallets",
      },
      {
        id: "analytics",
        title: "Analytics",
        href: "/dashboard/connect/analytics",
      },
-      {
-        id: "embedded-wallets",
-        title: "In-App Wallets",
-        href: "/dashboard/connect/in-app-wallets",
-      },
      {
        id: "ecosystem",
        title: "Ecosystem Wallets",
@@ -36,6 +31,11 @@ const SIDEBAR_SECTIONS = [
        title: "Pay",
        href: "/dashboard/connect/pay",
      },
+      {
+        id: "playground",
+        title: "Playground",
+        href: "https://playground.thirdweb.com/connect/sign-in/button",
+      },
    ],
  },
 ] satisfies Array<SidebarNavSection>;
@@ -79,7 +79,7 @@ export const slides: Slide[] = [
          <ListItem>
            <TrackedLink
              category={TRACK_CATEGORY}
-              href="/dashboard/connect/playground"
+              href="https://playground.thirdweb.com/connect/sign-in/button"
              isExternal
              label="auth"
              color="blue.500"
@@ -10,7 +10,7 @@ const showcaseMenus = [
  {
    id: "connect-icon",
    title: "Onboard users",
-    href: "/dashboard/connect/playground",
+    href: "https://playground.thirdweb.com/connect/sign-in/button",
    description: "Onboard anyone with every sign-in option for web2 & web3.",
    image: require("../../../public/assets/product-pages/connect/icon-connect.png"),
  },
@@ -203,7 +203,7 @@ const AppHeader: React.FC = () => {
            Home
          </LinkButton>
          <LinkButton
-            href="/dashboard/connect/playground"
+            href="/dashboard/connect"
            isActive={
              pathname.startsWith("/dashboard/connect") ||
              pathname.startsWith("/dashboard/payments")
@@ -111,7 +111,7 @@ export const PRODUCTS: SectionItemProps[] = [
    description:
      "Flexible user sign-up flow with wallet and social sign-in methods",
    link: "/connect",
-    dashboardLink: "/dashboard/connect/playground",
+    dashboardLink: "https://playground.thirdweb.com/connect/sign-in/button",
    icon: require("../../../../../public/assets/product-icons/wallet-sdk.png"),
    section: "connect",
    inLandingPage: true,
@@ -28,7 +28,6 @@ import { FormItem } from "../ConnectWalletPlayground/FormItem";
 import { ModalSizeButton } from "../ConnectWalletPlayground/ModalSizeButton";
 import { PreviewThirdwebProvider } from "../ConnectWalletPlayground/PreviewThirdwebProvider";
 import { ThemeButton } from "../ConnectWalletPlayground/ThemeButton";
-import { socialIconMapV2 } from "../ConnectWalletPlayground/WalletButton";
 import { usePlaygroundTheme } from "../ConnectWalletPlayground/usePlaygroundTheme";
 import { usePlaygroundWallets } from "../ConnectWalletPlayground/usePlaygroundWallets";
 import {
@@ -36,6 +35,17 @@ import {
  walletInfoRecord,
 } from "../ConnectWalletPlayground/walletInfoRecord";

+const phoneIcon =
+  "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgMCA0OCA0OCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzM1ODlfODYwMikiPgo8cmVjdCB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHJ4PSI4IiBmaWxsPSJ1cmwoI3BhaW50MF9saW5lYXJfMzU4OV84NjAyKSIvPgo8cmVjdCB4PSItMSIgeT0iLTEiIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIgcng9IjkuOCIgZmlsbD0idXJsKCNwYWludDFfbGluZWFyXzM1ODlfODYwMikiLz4KPHBhdGggZD0iTTE4Ljg2MjIgMjYuODY0NkwxOS41MTk0IDI3LjUxODlDMTkuNTE5NCAyNy41MTg5IDIxLjA4MzcgMjkuMDczMSAyNS4zNTIxIDI0LjgyOTNDMjkuNjIwNSAyMC41ODU1IDI4LjA1NjEgMTkuMDMxMyAyOC4wNTYxIDE5LjAzMTNMMjcuNjQzIDE4LjYxODFDMjYuNjIxOCAxNy42MDQxIDI2LjUyNSAxNS45NzQ4IDI3LjQxNjIgMTQuNzg0NkwyOS4yMzYyIDEyLjM1MzVDMzAuMzM5OCAxMC44ODAyIDMyLjQ3MDQgMTAuNjg1MiAzMy43MzQzIDExLjk0MTlMMzYuMDAyMSAxNC4xOTUyQzM2LjYyNzUgMTQuODE5MiAzNy4wNDY0IDE1LjYyNTIgMzYuOTk1OSAxNi41MjA4QzM2Ljg2NTkgMTguODEzMSAzNS44Mjg4IDIzLjc0MzEgMzAuMDQ1MSAyOS40OTQ5QzIzLjkxMDUgMzUuNTkzNCAxOC4xNTQ0IDM1LjgzNjEgMTUuODAxNCAzNS42MTY1QzE1LjA1NiAzNS41NDcyIDE0LjQwODkgMzUuMTY4NyAxMy44ODc0IDM0LjY0ODdMMTEuODM2MyAzMi42MDkyQzEwLjQ0OTYgMzEuMjMyNiAxMC44Mzk2IDI4Ljg3MDkgMTIuNjEzNCAyNy45MDc0TDE1LjM3MjMgMjYuNDA2N0MxNi41MzY2IDI1Ljc3NCAxNy45NTIxIDI1Ljk2MDMgMTguODYyMiAyNi44NjQ2WiIgZmlsbD0id2hpdGUiLz4KPC9nPgo8ZGVmcz4KPGxpbmVhckdyYWRpZW50IGlkPSJwYWludDBfbGluZWFyXzM1ODlfODYwMiIgeDE9IjI1LjUiIHkxPSItNi4yOTU3MmUtMDYiIHgyPSIzMC4yMDE2IiB5Mj0iNDcuNTM1IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CjxzdG9wIHN0b3AtY29sb3I9IiM4MzU4QkEiLz4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjN0IxQ0Y3Ii8+CjwvbGluZWFyR3JhZGllbnQ+CjxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQxX2xpbmVhcl8zNTg5Xzg2MDIiIHgxPSIyNS41NjI1IiB5MT0iLTEuMDAwMDEiIHgyPSIzMC40NiIgeTI9IjQ4LjUxNTYiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KPHN0b3Agc3RvcC1jb2xvcj0iIzgzNThCQSIvPgo8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM3QjFDRjciLz4KPC9saW5lYXJHcmFkaWVudD4KPGNsaXBQYXRoIGlkPSJjbGlwMF8zNTg5Xzg2MDIiPgo8cmVjdCB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHJ4PSI4IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=";
+
+const socialIconMapV2 = {
+  email: "/assets/connect/email.png",
+  google: "assets/connect/google.png",
+  facebook: "assets/connect/facebook.png",
+  apple: "assets/connect/apple.png",
+  phone: phoneIcon,
+};
+
 // If loading a variable font, you don't need to specify the font weight
 const nounsDaoFont = londrinaSolidConstructor({
  subsets: ["latin"],
@@ -287,7 +297,7 @@ export const MiniPlayground: React.FC<{

            <Flex alignItems="center" gap={1}>
              <TrackedLink
-                href="/dashboard/connect/playground"
+                href="https://playground.thirdweb.com/connect/sign-in/button"
                color="blue.500"
                category={trackingCategory}
                label="see-all-wallets"
@@ -449,7 +459,7 @@ export const MiniPlayground: React.FC<{

                <Button
                  as={Link}
-                  href="/dashboard/connect/playground"
+                  href="https://playground.thirdweb.com/connect/sign-in/button"
                  fontSize={20}
                  leftIcon={<Icon as={MdOutlineElectricBolt} />}
                  color="black"
@@ -505,7 +515,7 @@ export const MiniPlayground: React.FC<{
                    as={TrackedLink}
                    category={trackingCategory}
                    label="build-your-own"
-                    href="/dashboard/connect/playground"
+                    href="https://playground.thirdweb.com/connect/sign-in/button"
                    fontSize={20}
                    leftIcon={<Icon as={MdOutlineElectricBolt} />}
                    color="black"
@@ -1,31 +0,0 @@
-.ColorInput {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  width: 40px;
-  height: 40px;
-  background-color: transparent;
-  display: block;
-  border: none;
-  cursor: pointer;
-  border-radius: 50%;
-  flex-shrink: 0;
-}
-
-.ColorInput::-webkit-color-swatch {
-  border-radius: 50%;
-  border: none;
-  padding: 0;
-}
-
-.ColorInput::-webkit-color-swatch-wrapper {
-  border: none;
-  border-radius: 50%;
-  padding: 0;
-}
-
-.ColorInput::-moz-color-swatch {
-  border-radius: 50%;
-  border: none;
-  padding: 0;
-}
@@ -1,65 +0,0 @@
-import { Box, Flex, Input, Spacer } from "@chakra-ui/react";
-import { FormLabel } from "tw-components";
-import styles from "./ColorInput.module.css";
-
-function hslToHex(h: number, s: number, l: number) {
-  // biome-ignore lint/style/noParameterAssign: FIXME
-  l /= 100;
-  const a = (s * Math.min(l, 1 - l)) / 100;
-  const f = (n: number) => {
-    const k = (n + h / 30) % 12;
-    const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
-    return Math.round(255 * color)
-      .toString(16)
-      .padStart(2, "0");
-  };
-  return `#${f(0)}${f(8)}${f(4)}`;
-}
-
-export function ColorInput(props: {
-  value: string;
-  name: string;
-  onChange: (value: string) => void;
-  onClick?: () => void;
-}) {
-  let hexColor = props.value;
-  if (props.value.startsWith("hsl(") && props.value.endsWith(")")) {
-    const [h, s, l] = props.value
-      .replace(/[^0-9.]/g, " ")
-      .split(/\s+/)
-      .filter((value) => value)
-      .map(Number);
-
-    // if all three are numbers
-    if (!Number.isNaN(h) && !Number.isNaN(s) && !Number.isNaN(l)) {
-      hexColor = hslToHex(h, s, l);
-    } else {
-      // give up
-      hexColor = props.value;
-    }
-  }
-
-  return (
-    <Box>
-      <FormLabel>{props.name}</FormLabel>
-      <Spacer height={2} />
-      <Flex alignItems="center" gap={3} onClick={props.onClick}>
-        <input
-          onChange={(e) => {
-            props.onChange(e.target.value);
-          }}
-          type="color"
-          className={styles.ColorInput}
-          value={hexColor}
-        />
-
-        <Input
-          value={hexColor}
-          onChange={(e) => {
-            props.onChange(e.target.value);
-          }}
-        />
-      </Flex>
-    </Box>
-  );
-}
@@ -1,31 +0,0 @@
-import { Box, Flex, FormControl, Spacer, Switch } from "@chakra-ui/react";
-import { FormLabel, Text } from "tw-components";
-
-export const SwitchFormItem: React.FC<{
-  label: string;
-  description: React.ReactNode;
-  isChecked: boolean;
-  onCheck: (isChecked: boolean) => void;
-}> = (props) => {
-  return (
-    <FormControl>
-      <Flex gap={4} justifyContent="space-between" alignItems="center">
-        <Box flex={1}>
-          <FormLabel m={0}>{props.label}</FormLabel>
-          <Spacer height={2} />
-          <Text color="faded" fontSize={14} lineHeight={1.4}>
-            {props.description}
-          </Text>
-        </Box>
-
-        <Switch
-          size="lg"
-          isChecked={props.isChecked}
-          onChange={() => {
-            props.onCheck(!props.isChecked);
-          }}
-        />
-      </Flex>
-    </FormControl>
-  );
-};
@@ -1,186 +0,0 @@
-import { Flex, Icon, Image, Tooltip } from "@chakra-ui/react";
-import { replaceIpfsUrl } from "lib/sdk";
-import { AiFillStar, AiOutlineStar } from "react-icons/ai";
-import { Text } from "tw-components";
-
-export function WalletButton(props: {
-  name: string;
-  subtitle?: string;
-  icon: string;
-  isChecked: boolean;
-  onSelect: () => void;
-  recommended?: boolean;
-  onRecommendedClick?: () => void;
-}) {
-  const { isChecked, onSelect, name, icon, subtitle } = props;
-  return (
-    <Flex
-      borderRadius="lg"
-      border="1px solid transparent"
-      bg={isChecked ? "hsl(215.88deg 100% 60% / 15%)" : "inputBg"}
-      _hover={
-        !isChecked
-          ? {
-              bg: "inputBg",
-              borderColor: "borderColor",
-            }
-          : {
-              borderColor: "blue.500",
-            }
-      }
-      transition="background 100ms ease, border-color 100ms ease"
-      alignItems="center"
-      userSelect={"none"}
-      pr={1}
-      gap={1}
-    >
-      <Flex
-        gap={3}
-        alignItems="center"
-        flexGrow={1}
-        p={2}
-        onClick={() => {
-          onSelect();
-        }}
-        cursor="pointer"
-      >
-        <Image width={7} height={7} alt={name} src={replaceIpfsUrl(icon)} />
-
-        <Flex
-          flexDir="column"
-          justifyContent="center"
-          flexGrow={1}
-          alignSelf="stretch"
-        >
-          <Text
-            fontWeight={500}
-            fontSize={14}
-            color={isChecked || subtitle ? "heading" : "paragraph"}
-          >
-            {name}
-          </Text>
-          {subtitle && (
-            <Text fontSize={12} color="faded">
-              {subtitle}
-            </Text>
-          )}
-        </Flex>
-      </Flex>
-
-      <RecommendedIconButton
-        onClick={props.onRecommendedClick}
-        isRecommended={props.recommended}
-      />
-    </Flex>
-  );
-}
-
-export function RecommendedIconButton(props: {
-  isRecommended?: boolean;
-  onClick?: () => void;
-}) {
-  return (
-    <Tooltip
-      hasArrow
-      label={props.isRecommended ? "Recommended" : "Not Recommended"}
-      placement="top"
-    >
-      <Flex
-        justifyContent="center"
-        alignItems="center"
-        onClick={props.onClick}
-        cursor="pointer"
-        role="button"
-        aria-label="Toggle Recommended"
-      >
-        <Icon
-          as={props.isRecommended ? AiFillStar : AiOutlineStar}
-          w={4}
-          h={4}
-          color={props.isRecommended ? "blue.500" : "faded"}
-        />
-      </Flex>
-    </Tooltip>
-  );
-}
-
-export function SocialButton(props: {
-  name: string;
-  icon: "email" | "google" | "facebook" | "apple" | "phone";
-  onClick: () => void;
-  isSelected: boolean;
-}) {
-  return (
-    <Flex
-      borderRadius="lg"
-      border="1px solid transparent"
-      bg={props.isSelected ? "hsl(215.88deg 100% 60% / 15%)" : "inputBg"}
-      _hover={
-        !props.isSelected
-          ? {
-              bg: "inputBg",
-              borderColor: "borderColor",
-            }
-          : {
-              borderColor: "blue.500",
-            }
-      }
-      transition="background 100ms ease, border-color 100ms ease"
-      alignItems="center"
-      userSelect={"none"}
-      pr={1}
-      gap={1}
-    >
-      <Flex
-        gap={3}
-        alignItems="center"
-        flexGrow={1}
-        p={2}
-        onClick={props.onClick}
-        cursor="pointer"
-      >
-        <Image
-          width={7}
-          height={7}
-          alt={props.name}
-          src={socialIconMap[props.icon]}
-        />
-
-        <Text
-          fontWeight={500}
-          fontSize={14}
-          color={props.isSelected ? "heading" : "paragraph"}
-        >
-          {props.name}
-        </Text>
-      </Flex>
-    </Flex>
-  );
-}
-
-const googleIconUri =
-  "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3MDUuNiIgaGVpZ2h0PSI3MjAiIHZpZXdCb3g9IjAgMCAxODYuNjkgMTkwLjUiIHhtbG5zOnY9Imh0dHBzOi8vdmVjdGEuaW8vbmFubyI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTE4NC41ODMgNzY1LjE3MSkiPjxwYXRoIGNsaXAtcGF0aD0ibm9uZSIgbWFzaz0ibm9uZSIgZD0iTS0xMDg5LjMzMy02ODcuMjM5djM2Ljg4OGg1MS4yNjJjLTIuMjUxIDExLjg2My05LjAwNiAyMS45MDgtMTkuMTM3IDI4LjY2MmwzMC45MTMgMjMuOTg2YzE4LjAxMS0xNi42MjUgMjguNDAyLTQxLjA0NCAyOC40MDItNzAuMDUyIDAtNi43NTQtLjYwNi0xMy4yNDktMS43MzItMTkuNDgzeiIgZmlsbD0iIzQyODVmNCIvPjxwYXRoIGNsaXAtcGF0aD0ibm9uZSIgbWFzaz0ibm9uZSIgZD0iTS0xMTQyLjcxNC02NTEuNzkxbC02Ljk3MiA1LjMzNy0yNC42NzkgMTkuMjIzaDBjMTUuNjczIDMxLjA4NiA0Ny43OTYgNTIuNTYxIDg1LjAzIDUyLjU2MSAyNS43MTcgMCA0Ny4yNzgtOC40ODYgNjMuMDM4LTIzLjAzM2wtMzAuOTEzLTIzLjk4NmMtOC40ODYgNS43MTUtMTkuMzEgOS4xNzktMzIuMTI1IDkuMTc5LTI0Ljc2NSAwLTQ1LjgwNi0xNi43MTItNTMuMzQtMzkuMjI2eiIgZmlsbD0iIzM0YTg1MyIvPjxwYXRoIGNsaXAtcGF0aD0ibm9uZSIgbWFzaz0ibm9uZSIgZD0iTS0xMTc0LjM2NS03MTIuNjFjLTYuNDk0IDEyLjgxNS0xMC4yMTcgMjcuMjc2LTEwLjIxNyA0Mi42ODlzMy43MjMgMjkuODc0IDEwLjIxNyA0Mi42ODljMCAuMDg2IDMxLjY5My0yNC41OTIgMzEuNjkzLTI0LjU5Mi0xLjkwNS01LjcxNS0zLjAzMS0xMS43NzYtMy4wMzEtMTguMDk4czEuMTI2LTEyLjM4MyAzLjAzMS0xOC4wOTh6IiBmaWxsPSIjZmJiYzA1Ii8+PHBhdGggZD0iTS0xMDg5LjMzMy03MjcuMjQ0YzE0LjAyOCAwIDI2LjQ5NyA0Ljg0OSAzNi40NTUgMTQuMjAxbDI3LjI3Ni0yNy4yNzZjLTE2LjUzOS0xNS40MTMtMzguMDEzLTI0Ljg1Mi02My43MzEtMjQuODUyLTM3LjIzNCAwLTY5LjM1OSAyMS4zODgtODUuMDMyIDUyLjU2MWwzMS42OTIgMjQuNTkyYzcuNTMzLTIyLjUxNCAyOC41NzUtMzkuMjI2IDUzLjM0LTM5LjIyNnoiIGZpbGw9IiNlYTQzMzUiIGNsaXAtcGF0aD0ibm9uZSIgbWFzaz0ibm9uZSIvPjwvZz48L3N2Zz4=";
-const facebookIconUri =
-  "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGRhdGEtbmFtZT0iRWJlbmUgMSIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgaWQ9ImZhY2Vib29rLWxvZ28tMjAxOSI+PHBhdGggZmlsbD0iIzE4NzdmMiIgZD0iTTEwMjQsNTEyQzEwMjQsMjI5LjIzMDE2LDc5NC43Njk3OCwwLDUxMiwwUzAsMjI5LjIzMDE2LDAsNTEyYzAsMjU1LjU1NCwxODcuMjMxLDQ2Ny4zNzAxMiw0MzIsNTA1Ljc3Nzc3VjY2MEgzMDJWNTEySDQzMlYzOTkuMkM0MzIsMjcwLjg3OTgyLDUwOC40Mzg1NCwyMDAsNjI1LjM4OTIyLDIwMCw2ODEuNDA3NjUsMjAwLDc0MCwyMTAsNzQwLDIxMFYzMzZINjc1LjQzNzEzQzYxMS44MzUwOCwzMzYsNTkyLDM3NS40NjY2Nyw1OTIsNDE1Ljk1NzI4VjUxMkg3MzRMNzExLjMsNjYwSDU5MnYzNTcuNzc3NzdDODM2Ljc2OSw5NzkuMzcwMTIsMTAyNCw3NjcuNTU0LDEwMjQsNTEyWiI+PC9wYXRoPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik03MTEuMyw2NjAsNzM0LDUxMkg1OTJWNDE1Ljk1NzI4QzU5MiwzNzUuNDY2NjcsNjExLjgzNTA4LDMzNiw2NzUuNDM3MTMsMzM2SDc0MFYyMTBzLTU4LjU5MjM1LTEwLTExNC42MTA3OC0xMEM1MDguNDM4NTQsMjAwLDQzMiwyNzAuODc5ODIsNDMyLDM5OS4yVjUxMkgzMDJWNjYwSDQzMnYzNTcuNzc3NzdhNTE3LjM5NjE5LDUxNy4zOTYxOSwwLDAsMCwxNjAsMFY2NjBaIj48L3BhdGg+PC9zdmc+";
-const appleIconUri =
-  "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDM4IiBoZWlnaHQ9IjI1MDAiIHZpZXdCb3g9IjAgMCA0OTYuMjU1IDYwOC43MjgiIGlkPSJhcHBsZSI+PHBhdGggZmlsbD0iIzk5OSIgZD0iTTI3My44MSA1Mi45NzNDMzEzLjgwNi4yNTcgMzY5LjQxIDAgMzY5LjQxIDBzOC4yNzEgNDkuNTYyLTMxLjQ2MyA5Ny4zMDZjLTQyLjQyNiA1MC45OC05MC42NDkgNDIuNjM4LTkwLjY0OSA0Mi42MzhzLTkuMDU1LTQwLjA5NCAyNi41MTItODYuOTcxek0yNTIuMzg1IDE3NC42NjJjMjAuNTc2IDAgNTguNzY0LTI4LjI4NCAxMDguNDcxLTI4LjI4NCA4NS41NjIgMCAxMTkuMjIyIDYwLjg4MyAxMTkuMjIyIDYwLjg4M3MtNjUuODMzIDMzLjY1OS02NS44MzMgMTE1LjMzMWMwIDkyLjEzMyA4Mi4wMSAxMjMuODg1IDgyLjAxIDEyMy44ODVzLTU3LjMyOCAxNjEuMzU3LTEzNC43NjIgMTYxLjM1N2MtMzUuNTY1IDAtNjMuMjE1LTIzLjk2Ny0xMDAuNjg4LTIzLjk2Ny0zOC4xODggMC03Ni4wODQgMjQuODYxLTEwMC43NjYgMjQuODYxQzg5LjMzIDYwOC43MyAwIDQ1NS42NjYgMCAzMzIuNjI4YzAtMTIxLjA1MiA3NS42MTItMTg0LjU1NCAxNDYuNTMzLTE4NC41NTQgNDYuMTA1IDAgODEuODgzIDI2LjU4OCAxMDUuODUyIDI2LjU4OHoiPjwvcGF0aD48L3N2Zz4=";
-const emailIcon =
-  "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgMCA0OCA0OCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzM1ODlfODY0OSkiPgo8cmVjdCB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHJ4PSI4IiBmaWxsPSJ1cmwoI3BhaW50MF9saW5lYXJfMzU4OV84NjQ5KSIvPgo8cmVjdCB4PSItMSIgeT0iLTEiIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIgcng9IjkuOCIgZmlsbD0idXJsKCNwYWludDFfbGluZWFyXzM1ODlfODY0OSkiLz4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAxXzM1ODlfODY0OSkiPgo8cGF0aCBkPSJNMjQgMTQuMjVDMTguNjE3MiAxNC4yNSAxNC4yNSAxOC42MTcyIDE0LjI1IDI0QzE0LjI1IDI5LjM4MjggMTguNjE3MiAzMy43NSAyNCAzMy43NUMyNC44OTg4IDMzLjc1IDI1LjYyNSAzNC40NzYyIDI1LjYyNSAzNS4zNzVDMjUuNjI1IDM2LjI3MzggMjQuODk4OCAzNyAyNCAzN0MxNi44MTk1IDM3IDExIDMxLjE4MDUgMTEgMjRDMTEgMTYuODE5NSAxNi44MTk1IDExIDI0IDExQzMxLjE4MDUgMTEgMzcgMTYuODE5NSAzNyAyNFYyNS42MjVDMzcgMjguMzE2NCAzNC44MTY0IDMwLjUgMzIuMTI1IDMwLjVDMzAuNjM3MSAzMC41IDI5LjMwMTYgMjkuODI5NyAyOC40MDc4IDI4Ljc3ODVDMjcuMjUgMjkuODQ0OSAyNS43MDEyIDMwLjUgMjQgMzAuNUMyMC40MDk4IDMwLjUgMTcuNSAyNy41OTAyIDE3LjUgMjRDMTcuNSAyMC40MDk4IDIwLjQwOTggMTcuNSAyNCAxNy41QzI1LjQxNjggMTcuNSAyNi43MjcgMTcuOTUyIDI3Ljc5MzQgMTguNzIzOEMyOC4wODI4IDE4LjQ2OTkgMjguNDU4NiAxOC4zMTI1IDI4Ljg3NSAxOC4zMTI1QzI5Ljc3MzggMTguMzEyNSAzMC41IDE5LjAzODcgMzAuNSAxOS45Mzc1VjI1LjYyNUMzMC41IDI2LjUyMzggMzEuMjI2MiAyNy4yNSAzMi4xMjUgMjcuMjVDMzMuMDIzOCAyNy4yNSAzMy43NSAyNi41MjM4IDMzLjc1IDI1LjYyNVYyNEMzMy43NSAxOC42MTcyIDI5LjM4MjggMTQuMjUgMjQgMTQuMjVaTTI3LjI1IDI0QzI3LjI1IDIzLjEzOCAyNi45MDc2IDIyLjMxMTQgMjYuMjk4MSAyMS43MDE5QzI1LjY4ODYgMjEuMDkyNCAyNC44NjIgMjAuNzUgMjQgMjAuNzVDMjMuMTM4IDIwLjc1IDIyLjMxMTQgMjEuMDkyNCAyMS43MDE5IDIxLjcwMTlDMjEuMDkyNCAyMi4zMTE0IDIwLjc1IDIzLjEzOCAyMC43NSAyNEMyMC43NSAyNC44NjIgMjEuMDkyNCAyNS42ODg2IDIxLjcwMTkgMjYuMjk4MUMyMi4zMTE0IDI2LjkwNzYgMjMuMTM4IDI3LjI1IDI0IDI3LjI1QzI0Ljg2MiAyNy4yNSAyNS42ODg2IDI2LjkwNzYgMjYuMjk4MSAyNi4yOTgxQzI2LjkwNzYgMjUuNjg4NiAyNy4yNSAyNC44NjIgMjcuMjUgMjRaIiBmaWxsPSJ3aGl0ZSIvPgo8L2c+CjwvZz4KPGRlZnM+CjxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQwX2xpbmVhcl8zNTg5Xzg2NDkiIHgxPSIyNS41IiB5MT0iLTYuMjk1NzJlLTA2IiB4Mj0iMzAuMjAxNiIgeTI9IjQ3LjUzNSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgo8c3RvcCBzdG9wLWNvbG9yPSIjODM1OEJBIi8+CjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzdCMUNGNyIvPgo8L2xpbmVhckdyYWRpZW50Pgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MV9saW5lYXJfMzU4OV84NjQ5IiB4MT0iMjUuNTYyNSIgeTE9Ii0xLjAwMDAxIiB4Mj0iMzAuNDYiIHkyPSI0OC41MTU2IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CjxzdG9wIHN0b3AtY29sb3I9IiM4MzU4QkEiLz4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjN0IxQ0Y3Ii8+CjwvbGluZWFyR3JhZGllbnQ+CjxjbGlwUGF0aCBpZD0iY2xpcDBfMzU4OV84NjQ5Ij4KPHJlY3Qgd2lkdGg9IjQ4IiBoZWlnaHQ9IjQ4IiByeD0iOCIgZmlsbD0id2hpdGUiLz4KPC9jbGlwUGF0aD4KPGNsaXBQYXRoIGlkPSJjbGlwMV8zNTg5Xzg2NDkiPgo8cmVjdCB3aWR0aD0iMjYiIGhlaWdodD0iMjYiIGZpbGw9IndoaXRlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMSAxMSkiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K";
-const phoneIcon =
-  "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgMCA0OCA0OCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzM1ODlfODYwMikiPgo8cmVjdCB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHJ4PSI4IiBmaWxsPSJ1cmwoI3BhaW50MF9saW5lYXJfMzU4OV84NjAyKSIvPgo8cmVjdCB4PSItMSIgeT0iLTEiIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIgcng9IjkuOCIgZmlsbD0idXJsKCNwYWludDFfbGluZWFyXzM1ODlfODYwMikiLz4KPHBhdGggZD0iTTE4Ljg2MjIgMjYuODY0NkwxOS41MTk0IDI3LjUxODlDMTkuNTE5NCAyNy41MTg5IDIxLjA4MzcgMjkuMDczMSAyNS4zNTIxIDI0LjgyOTNDMjkuNjIwNSAyMC41ODU1IDI4LjA1NjEgMTkuMDMxMyAyOC4wNTYxIDE5LjAzMTNMMjcuNjQzIDE4LjYxODFDMjYuNjIxOCAxNy42MDQxIDI2LjUyNSAxNS45NzQ4IDI3LjQxNjIgMTQuNzg0NkwyOS4yMzYyIDEyLjM1MzVDMzAuMzM5OCAxMC44ODAyIDMyLjQ3MDQgMTAuNjg1MiAzMy43MzQzIDExLjk0MTlMMzYuMDAyMSAxNC4xOTUyQzM2LjYyNzUgMTQuODE5MiAzNy4wNDY0IDE1LjYyNTIgMzYuOTk1OSAxNi41MjA4QzM2Ljg2NTkgMTguODEzMSAzNS44Mjg4IDIzLjc0MzEgMzAuMDQ1MSAyOS40OTQ5QzIzLjkxMDUgMzUuNTkzNCAxOC4xNTQ0IDM1LjgzNjEgMTUuODAxNCAzNS42MTY1QzE1LjA1NiAzNS41NDcyIDE0LjQwODkgMzUuMTY4NyAxMy44ODc0IDM0LjY0ODdMMTEuODM2MyAzMi42MDkyQzEwLjQ0OTYgMzEuMjMyNiAxMC44Mzk2IDI4Ljg3MDkgMTIuNjEzNCAyNy45MDc0TDE1LjM3MjMgMjYuNDA2N0MxNi41MzY2IDI1Ljc3NCAxNy45NTIxIDI1Ljk2MDMgMTguODYyMiAyNi44NjQ2WiIgZmlsbD0id2hpdGUiLz4KPC9nPgo8ZGVmcz4KPGxpbmVhckdyYWRpZW50IGlkPSJwYWludDBfbGluZWFyXzM1ODlfODYwMiIgeDE9IjI1LjUiIHkxPSItNi4yOTU3MmUtMDYiIHgyPSIzMC4yMDE2IiB5Mj0iNDcuNTM1IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CjxzdG9wIHN0b3AtY29sb3I9IiM4MzU4QkEiLz4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjN0IxQ0Y3Ii8+CjwvbGluZWFyR3JhZGllbnQ+CjxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQxX2xpbmVhcl8zNTg5Xzg2MDIiIHgxPSIyNS41NjI1IiB5MT0iLTEuMDAwMDEiIHgyPSIzMC40NiIgeTI9IjQ4LjUxNTYiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KPHN0b3Agc3RvcC1jb2xvcj0iIzgzNThCQSIvPgo8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM3QjFDRjciLz4KPC9saW5lYXJHcmFkaWVudD4KPGNsaXBQYXRoIGlkPSJjbGlwMF8zNTg5Xzg2MDIiPgo8cmVjdCB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHJ4PSI4IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=";
-
-const socialIconMap = {
-  email: emailIcon,
-  google: googleIconUri,
-  facebook: facebookIconUri,
-  apple: appleIconUri,
-  phone: phoneIcon,
-};
-
-export const socialIconMapV2 = {
-  email: "/assets/connect/email.png",
-  google: "assets/connect/google.png",
-  facebook: "assets/connect/facebook.png",
-  apple: "assets/connect/apple.png",
-  phone: phoneIcon,
-};
@@ -1,75 +0,0 @@
-type WalletSetupOptions = {
-  imports: string[];
-  wallets?: string;
-  recommendedWallets?: string;
-  smartWalletOptions?: {
-    gasless: boolean;
-  };
-  connectWallet: {
-    locale?: string;
-    theme?: string;
-    connectButton?: string;
-    connectModal?: string;
-    // auth?: string;
-    modalTitle?: string;
-    chain?: string;
-    modalTitleIconUrl?: string;
-    welcomeScreen?: string;
-    termsOfServiceUrl?: string;
-    privacyPolicyUrl?: string;
-    showThirdwebBranding?: string;
-  };
-  baseTheme: "light" | "dark";
-  colorOverrides: Record<string, string>;
-};
-
-export function getCode(options: WalletSetupOptions) {
-  const hasThemeOverrides = Object.keys(options.colorOverrides).length > 0;
-  const reactImports = [];
-
-  if (hasThemeOverrides) {
-    const themeFn = options.baseTheme === "dark" ? "darkTheme" : "lightTheme";
-
-    options.connectWallet.theme = `${themeFn}(${JSON.stringify({
-      colors: options.colorOverrides,
-    })})`;
-
-    reactImports.push(themeFn);
-  }
-
-  const imports = [...new Set(options.imports)];
-
-  return `\
-import { ThirdwebProvider, ConnectButton, ${reactImports.join(", ")} } from "thirdweb/react";${options.smartWalletOptions ? `\nimport { sepolia } from "thirdweb/chains"` : ""}
-${imports.length > 0 ? `import { ${imports.join(",")} } from "thirdweb/wallets";` : ""}
-
-const client = createThirdwebClient({
-  clientId: "YOUR_CLIENT_ID",
-});
-
-${options.wallets ? `const wallets = ${options.wallets};` : ""}
-
-export default function App() {
-  return (
-    <ThirdwebProvider>
-      <ConnectButton client={client} ${options.wallets ? "wallets={wallets}" : ""}   ${
-        options.smartWalletOptions
-          ? `accountAbstraction={{
-            chain: sepolia,
-            factoryAddress: 'YOUR_FACTORY_ADDRESS',
-            gasless: ${options.smartWalletOptions.gasless},
-          }}`
-          : ""
-      } ${renderProps(options.connectWallet)} />
-    </ThirdwebProvider>
-  );
-}`;
-}
-function renderProps(obj: Record<string, string | undefined>): string {
-  return Object.entries(obj)
-    .filter((x) => x[1] !== undefined)
-    .map(([key, value]) => {
-      return `${key}={${value}}`;
-    })
-    .join(" ");
-}
@@ -14,20 +14,15 @@ type ConnectSidebarProps = {

 const links: Route[] = [
  {
-    path: "/dashboard/connect/playground",
-    title: "Playground",
-    name: "playground",
+    path: "/dashboard/connect/in-app-wallets",
+    title: "In-App Wallets",
+    name: "embedded-wallets",
  },
  {
    path: "/dashboard/connect/analytics",
    title: "Analytics",
    name: "analytics",
  },
-  {
-    path: "/dashboard/connect/in-app-wallets",
-    title: "In-App Wallets",
-    name: "embedded-wallets",
-  },
  {
    path: "/dashboard/connect/ecosystem",
    title: "Ecosystem Wallets",
@@ -38,12 +33,16 @@ const links: Route[] = [
    title: "Account Abstraction",
    name: "account-abstraction",
  },
-
  {
    path: "/dashboard/connect/pay",
    title: "Pay",
    name: "pay-settings",
  },
+  {
+    name: "playground",
+    title: "Playground",
+    path: "https://playground.thirdweb.com/connect/sign-in/button",
+  },
 ];

 export const ConnectSidebar: React.FC<ConnectSidebarProps> = ({
@@ -57,6 +57,7 @@ export const NavLink: ComponentWithChildren<NavLinkProps> = ({
      height={7}
      display="flex"
      alignItems="center"
+      isExternal={href.startsWith("https")}
    >
      <Skeleton isLoaded={!loading}>
        <Heading
@@ -28,9 +28,6 @@ export enum PageId {
  // thirdweb..com/tos
  ToS = "tos-page",

-  // thirdweb.com/cli/login
-  CliLoginPage = "cli-login-page",
-
  // thirdweb.com/contract-extensions
  // ContractExtensionsLanding = "contract-extensions-landing",

@@ -81,8 +78,6 @@ export enum PageId {
  // thirdweb.com/ui-components
  UIComponentsLanding = "ui-components-landing",

-  // thirdweb.com/build-base
-  BuildBaseLanding = "build-base-landing",
  // thirdweb.com/hackathon/earn
  HackathonEarnLanding = "earn-thirdweb-hacakthon",
  // thirdweb.com/grant/superchain
@@ -100,17 +95,12 @@ export enum PageId {
  // thirdweb.com/dashboard/infrastructure/storage
  DashboardSettingsStorage = "dashboard-storage",

-  // thirdweb.com/dashboard/connect/playground
-  DashboardConnectPlayground = "dashboard-wallets-connect",
  // thirdweb.com/dashboard/connect/smart-wallet
  DashboardConnectAccountAbstraction = "dashboard-wallets-smart-wallet",
  // thirdweb.com/dashboard/connect/embedded
  DashboardConnectEmbeddedWallets = "dashboard-wallets-embedded",
  // thirdweb.com/dashboard/connect/analytics
  DashboardConnectAnalytics = "dashboard-wallets-analytics",
-  // thirdweb.com/dashboard/connect/pay
-  DashboardConnectPay = "dashboard-wallets-pay",
-
  // thirdweb.com/dashboard/contracts/build
  DashboardContractsBuild = "dashboard-contracts-build",

@@ -132,9 +122,6 @@ export enum PageId {
  // thirdweb.com/gas
  GasEstimator = "gas-estimator",

-  // thirdweb.com/chainlist
-  ChainsLanding = "chains-landing",
-
  // thirdweb.com/404
  PageNotFound = "page-not-found",

@@ -204,10 +191,6 @@ export enum PageId {
  // example: thirdweb.com/goerli/0x2eaDAa60dBB74Ead3E20b23E4C5A0Dd789932846
  DeployedContract = "deployed-contract",

-  // thirdweb.com/:network
-  // example: thirdweb.com/ethereum
-  ChainLanding = "chain-landing",
-
  // ---------------------------------------------------------------------------
  //  community pages
  // ---------------------------------------------------------------------------
@@ -215,5 +198,4 @@ export enum PageId {
  Ambassadors = "ambassadors",
  Community = "community",
  StartupProgram = "startup-program",
-  Support = "support",
 }
@@ -172,7 +172,7 @@ const ConnectLanding: ThirdwebNextPage = () => {
            titleWithGradient="connect users to web3"
            subtitle="Onboard every user, connect to any wallet, and build apps that anyone can use — with in-app wallets, account abstraction, and fiat & crypto payments."
            trackingCategory={TRACKING_CATEGORY}
-            ctaLink="/dashboard/connect/playground"
+            ctaLink="https://playground.thirdweb.com/connect/sign-in/button"
            contactUsTitle="Book Demo"
            gradient="linear(to-r, #4490FF, #4490FF)"
            lottie={connectLottie}
@@ -361,7 +361,7 @@ const ConnectLanding: ThirdwebNextPage = () => {
                mobileImage={require("../../public/assets/product-pages/connect/mobile-connection.png")}
                TRACKING_CATEGORY={TRACKING_CATEGORY}
                direction="horizontal"
-                href="/dashboard/connect/playground"
+                href="https://playground.thirdweb.com/connect/sign-in/button"
              />
              <LandingCardWithImage
                title="Production-grade infrastructure"
@@ -369,7 +369,7 @@ const ConnectLanding: ThirdwebNextPage = () => {
                image={require("../../public/assets/product-pages/connect/desktop-scale.png")}
                mobileImage={require("../../public/assets/product-pages/connect/mobile-scale.png")}
                TRACKING_CATEGORY={TRACKING_CATEGORY}
-                href="/dashboard/connect/playground"
+                href="https://playground.thirdweb.com/connect/sign-in/button"
              />
            </LandingGridSection>
          </Flex>
@@ -1,373 +0,0 @@
-import { Box, Flex, Grid, Icon, SlideFade, Spacer } from "@chakra-ui/react";
-import { ChakraNextImage } from "components/Image";
-import { AppLayout } from "components/app-layouts/app";
-import { ConnectWalletPlayground } from "components/wallets/ConnectWalletPlayground/Playground";
-import { SupportedPlatformLink } from "components/wallets/SupportedPlatformLink";
-import { ConnectSidebar } from "core-ui/sidebar/connect";
-import { getAbsoluteUrl } from "lib/vercel-utils";
-import { NextSeo } from "next-seo";
-import { PageId } from "page-id";
-import { useEffect, useState } from "react";
-import { AiOutlineArrowRight } from "react-icons/ai";
-import { Button, Card, Heading, Text, TrackedLink } from "tw-components";
-import type { ThirdwebNextPage } from "utils/types";
-
-const TRACKING_CATEGORY = "connect-playground";
-
-const seo = {
-  title: "Build Your Own Connect Wallet Modal | Connect",
-  desc: "Onboard your users to web3 with a beautiful Connect Wallet modal, customizable auth flows, and sign-in for web2 & web3 — in a few lines of code.",
-};
-
-const DashboardConnectPlayground: ThirdwebNextPage = () => {
-  return (
-    <Box>
-      <NextSeo
-        title={seo.title}
-        description={seo.desc}
-        openGraph={{
-          title: seo.title,
-          description: seo.desc,
-          images: [
-            {
-              url: `${getAbsoluteUrl()}/assets/og-image/connect-wallet.png`,
-              width: 1200,
-              height: 630,
-              alt: seo.title,
-            },
-          ],
-        }}
-      />
-
-      <Heading size="title.xl" as="h1">
-        Playground
-      </Heading>
-      <Spacer height={4} />
-      <Text fontWeight={500}>
-        A complete toolkit for connecting wallets to apps, UI components that
-        work out of the box, and hooks that let you build custom Connect Wallet
-        experiences.
-      </Text>
-
-      <Spacer height={5} />
-      <Flex alignItems="center" gap={2}>
-        <Text mr={2} display={["none", "block"]} fontSize={12}>
-          Supports
-        </Text>
-        <SupportedPlatformLink
-          trackingCategory={TRACKING_CATEGORY}
-          size="sm"
-          platform="React"
-          href="https://portal.thirdweb.com/typescript/v5/react/components/ConnectButton"
-        />
-        <SupportedPlatformLink
-          trackingCategory={TRACKING_CATEGORY}
-          size="sm"
-          platform="React Native"
-          href="https://portal.thirdweb.com/react-native/latest/components/ConnectWallet"
-        />
-        <SupportedPlatformLink
-          trackingCategory={TRACKING_CATEGORY}
-          size="sm"
-          platform="Unity"
-          href="https://portal.thirdweb.com/unity/wallets/prefab"
-        />
-      </Flex>
-      <Spacer height={12} />
-
-      <ConnectWalletPlayground trackingCategory={TRACKING_CATEGORY} />
-
-      <Spacer height={20} />
-      <BuildCustomBanner />
-      <Spacer height={20} />
-
-      <FooterSection />
-    </Box>
-  );
-};
-
-function FooterSection() {
-  return (
-    <Grid templateColumns={["1fr", "1fr 1fr"]} gap={5}>
-      <ViewDocs />
-      <RelevantGuides />
-    </Grid>
-  );
-}
-
-function ViewDocs() {
-  return (
-    <Card p={5}>
-      <Flex gap={2} alignItems="center">
-        <Heading fontSize={16} as="h3">
-          View Docs
-        </Heading>
-        <Icon as={AiOutlineArrowRight} width={5} height={5} />
-      </Flex>
-
-      <Spacer height={6} />
-
-      <Grid templateColumns={"1fr 1fr"} gap={3} maxW="400px">
-        <SupportedPlatformLink
-          trackingCategory={TRACKING_CATEGORY}
-          size="md"
-          noBorder
-          platform="React"
-          href="https://portal.thirdweb.com/typescript/v5/react/components/ConnectButton"
-        />
-
-        <SupportedPlatformLink
-          trackingCategory={TRACKING_CATEGORY}
-          noBorder
-          size="md"
-          platform="Unity"
-          href="https://portal.thirdweb.com/unity/wallets/prefab"
-        />
-        <SupportedPlatformLink
-          trackingCategory={TRACKING_CATEGORY}
-          noBorder
-          size="md"
-          platform="React Native"
-          href="https://portal.thirdweb.com/react-native/latest/components/ConnectWallet"
-        />
-        <SupportedPlatformLink
-          trackingCategory={TRACKING_CATEGORY}
-          noBorder
-          size="md"
-          platform="TypeScript"
-          href="https://portal.thirdweb.com/typescript/v5/connecting-wallets"
-        />
-      </Grid>
-    </Card>
-  );
-}
-
-function RelevantGuides() {
-  return (
-    <Card p={5}>
-      <Flex gap={2} alignItems="center">
-        <Heading fontSize={16} as="h3">
-          Relevant Guides
-        </Heading>
-        <Icon as={AiOutlineArrowRight} width={5} height={5} />
-      </Flex>
-
-      <Spacer height={5} />
-
-      <Flex gap={3} flexDirection="column">
-        <GuideLink
-          href="https://blog.thirdweb.com/web3-wallet/"
-          label="what-is-web3-wallet"
-        >
-          What is a web3 wallet?
-        </GuideLink>
-
-        <GuideLink
-          href="https://portal.thirdweb.com/typescript/v5"
-          label="sdk-v5-get-started"
-        >
-          Get started with thirdweb SDK
-        </GuideLink>
-
-        <GuideLink
-          href="https://portal.thirdweb.com/typescript/v5/react/components/ConnectButton"
-          label="add-connect-wallet"
-        >
-          How to Add a Connect Wallet Button to Your Website
-        </GuideLink>
-
-        <GuideLink
-          href="https://portal.thirdweb.com/connect/in-app-wallet/how-to/enable-gasless"
-          label="gasless-tx"
-        >
-          Enable Gasless Transactions
-        </GuideLink>
-      </Flex>
-    </Card>
-  );
-}
-
-function GuideLink(props: {
-  label: string;
-  children: React.ReactNode;
-  href: string;
-}) {
-  return (
-    <TrackedLink
-      category={TRACKING_CATEGORY}
-      label={"guide"}
-      trackingProps={{
-        guide: props.label,
-      }}
-      href={props.href}
-      color="paragraph"
-      isExternal
-      _hover={{
-        color: "blue.500",
-      }}
-    >
-      {props.children}
-    </TrackedLink>
-  );
-}
-
-const bannerPosters = [
-  {
-    img: require("../../../../public/assets/connect/pixels-cw.png"),
-    position: "flex-end",
-    padding: 0,
-  },
-  {
-    img: require("../../../../public/assets/connect/w3w-cw.png"),
-    position: "center",
-    padding: 4,
-  },
-  {
-    img: require("../../../../public/assets/connect/lv-cw.png"),
-    position: "flex-end",
-    padding: 0,
-  },
-];
-
-function BuildCustomBanner() {
-  const [bannerImageIndex, setBannerImageIndex] = useState(1);
-
-  // update banner image every 3 seconds
-  // legitimate use-case
-  // eslint-disable-next-line no-restricted-syntax
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setBannerImageIndex((prev) => {
-        const nextIndex = prev + 1;
-        if (nextIndex === bannerPosters.length) {
-          return 0;
-        }
-        return nextIndex;
-      });
-    }, 3000);
-    return () => clearInterval(interval);
-  }, []);
-
-  return (
-    <Box
-      as="article"
-      bg="bgWhite"
-      border="1px solid"
-      borderColor="borderColor"
-      borderRadius="lg"
-      overflow="hidden"
-    >
-      <Grid templateColumns={["1fr", "1fr 1fr"]}>
-        {/* Left */}
-        <Box px={["6", "14"]} py="8">
-          <Text color="faded">Hooks & Functions</Text>
-          <Spacer h={2} />
-          <Heading fontSize={32} letterSpacing={"-0.02em"}>
-            Build a completely custom onboarding experience.
-          </Heading>
-
-          <Spacer h={6} />
-          <Flex alignItems="center" gap={2} flexWrap="wrap">
-            <SupportedPlatformLink
-              trackingCategory={TRACKING_CATEGORY}
-              size="sm"
-              platform="React"
-              href="https://portal.thirdweb.com/typescript/v5/react/components/ConnectButton"
-            />
-            <SupportedPlatformLink
-              trackingCategory={TRACKING_CATEGORY}
-              size="sm"
-              platform="React Native"
-              href="https://portal.thirdweb.com/react-native/latest/components/ConnectWallet"
-            />
-            <SupportedPlatformLink
-              trackingCategory={TRACKING_CATEGORY}
-              size="sm"
-              platform="Unity"
-              href="https://portal.thirdweb.com/unity/wallets/prefab"
-            />
-            <SupportedPlatformLink
-              trackingCategory={TRACKING_CATEGORY}
-              size="sm"
-              platform="TypeScript"
-              href="https://portal.thirdweb.com/wallet-sdk/latest/usage"
-            />
-          </Flex>
-
-          <Spacer h={6} />
-          <Flex justifyContent={["center", "flex-start"]}>
-            <Button
-              w={["100%", "auto"]}
-              as={TrackedLink}
-              isExternal
-              category={TRACKING_CATEGORY}
-              label="custom-ui-cta"
-              href="https://portal.thirdweb.com/typescript/v5/react/connecting-wallets"
-              bg="bgBlack"
-              color="bgWhite"
-              minW="180px"
-              p={6}
-              _hover={{
-                textDecor: "none",
-              }}
-            >
-              Get Started
-            </Button>
-          </Flex>
-        </Box>
-        {/* Right */}
-        <Box>
-          {/* Preload images */}
-          <Box visibility="hidden" w={0} h={0}>
-            {bannerPosters.map((poster) => {
-              return (
-                <ChakraNextImage
-                  priority={true}
-                  src={bannerPosters[0].img}
-                  alt=""
-                  key={poster.img}
-                />
-              );
-            })}
-          </Box>
-
-          <SlideFade
-            in
-            offsetY={80}
-            key={bannerImageIndex}
-            transition={{
-              enter: {
-                duration: 0.3,
-              },
-            }}
-          >
-            <Flex
-              h={["220px", "320px"]}
-              justifyContent="center"
-              alignItems={bannerPosters[bannerImageIndex].position}
-              p={bannerPosters[bannerImageIndex].padding}
-            >
-              <ChakraNextImage
-                alt=""
-                w={["calc(100% - 20px)", "80%"]}
-                maxH="100%"
-                src={bannerPosters[bannerImageIndex].img}
-              />
-            </Flex>
-          </SlideFade>
-        </Box>
-      </Grid>
-    </Box>
-  );
-}
-
-DashboardConnectPlayground.getLayout = (page, props) => (
-  <AppLayout {...props} hasSidebar={true} noOverflowX={true}>
-    <ConnectSidebar activePage="playground" />
-    {page}
-  </AppLayout>
-);
-
-DashboardConnectPlayground.pageId = PageId.DashboardConnectPlayground;
-
-export default DashboardConnectPlayground;
@@ -157,7 +157,7 @@ export const sidebar: SideBar = {
 						},
 						{
 							name: "Playground",
-							href: "https://thirdweb.com/dashboard/connect/playground",
+							href: "https://playground.thirdweb.com/connect/sign-in/button",
 						},
 					],
 				},
@@ -55,7 +55,7 @@ Instead, you only need to pass the clientId when necessary (we'll talk more abou
 ```tsx
 import { ThirdwebProvider } from "thirdweb/react";

-<ThirdwebProvider>  
+<ThirdwebProvider>
 ...
 </ThirdwebProvider>
 ```
@@ -84,7 +84,7 @@ import { ThirdwebProvider } from "thirdweb/react"; // v5
 Similar to v4's `ConnectWallet` component, the latest version has the [`ConnectButton`](/connect/sign-in/ConnectButton) component which has the same functionality.

 However, unlike with v4 where the number of supported wallets is limited (about 20), and adding more wallets mean your app becomes heavier,
-the SDK v5 supports [over 300 wallets](/typescript/v5/supported-wallets) with virtually no impact to your application. 
+the SDK v5 supports [over 300 wallets](/typescript/v5/supported-wallets) with virtually no impact to your application.

 Here's how you use the new `ConnectButton`:

@@ -99,7 +99,7 @@ const client = createThirdwebClient({
 <ConnectButton client={client} />
 ```

-To learn more about the new `ConnectButton`, head over to the [Playground](https://thirdweb.com/dashboard/connect/playground).
+To learn more about the new `ConnectButton`, head over to the [Playground](https://playground.thirdweb.com/connect/sign-in/button).

 Notice how you are passing the thirdweb client to the component itself and not to the `ThirdwebProvider` like in v4?
 By not putting every config inside the context wrapper, we were able to make the SDK v5 much more lightweight since you only load what you need!
@@ -326,9 +326,6 @@ importers:
      posthog-js-opensource:
        specifier: npm:[email protected]
        version: [email protected]
-      prettier:
-        specifier: ^3.3.2
-        version: 3.3.2
      prism-react-renderer:
        specifier: ^2.3.1
        version: 2.3.1([email protected])
@@ -486,18 +483,12 @@ importers:
      eslint-config-biome:
        specifier: ^1.7.3
        version: 1.7.3
-      eslint-config-prettier:
-        specifier: 9.1.0
-        version: 9.1.0([email protected])
      eslint-plugin-import:
        specifier: ^2.29.1
        version: 2.29.1(@typescript-eslint/[email protected]([email protected])([email protected]))([email protected])
      eslint-plugin-inclusive-language:
        specifier: ^2.2.1
        version: 2.2.1
-      eslint-plugin-prettier:
-        specifier: ^5.1.3
-        version: 5.1.3(@types/[email protected])([email protected]([email protected]))([email protected])([email protected])
      eslint-plugin-promise:
        specifier: ^6.2.0
        version: 6.2.0([email protected])
@@ -34984,8 +34975,8 @@ snapshots:
      '@typescript-eslint/parser': 7.2.0([email protected])([email protected])
      eslint: 8.57.0
      eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/[email protected]([email protected])([email protected]))([email protected])([email protected]([email protected]))([email protected])
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0([email protected])([email protected]))(eslint[email protected])(eslint@8.57.0)
+      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/[email protected]([email protected])([email protected]))([email protected])([email protected])([email protected])
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.14.1([email protected])([email protected]))([email protected])
      eslint-plugin-jsx-a11y: 6.8.0([email protected])
      eslint-plugin-react: 7.34.3([email protected])
      eslint-plugin-react-hooks: 4.6.2([email protected])
@@ -35012,30 +35003,13 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

-  [email protected](@typescript-eslint/[email protected]([email protected])([email protected]))([email protected])([email protected]([email protected]))([email protected]):
-    dependencies:
-      debug: 4.3.5([email protected])
-      enhanced-resolve: 5.17.0
-      eslint: 8.57.0
-      eslint-module-utils: 2.8.1(@typescript-eslint/[email protected]([email protected])([email protected]))([email protected])([email protected](@typescript-eslint/[email protected]([email protected])([email protected]))([email protected])([email protected]([email protected]))([email protected]))([email protected])
-      eslint-plugin-import: 2.29.1(@typescript-eslint/[email protected]([email protected])([email protected]))([email protected])([email protected])
-      fast-glob: 3.3.2
-      get-tsconfig: 4.7.5
-      is-core-module: 2.13.1
-      is-glob: 4.0.3
-    transitivePeerDependencies:
-      - '@typescript-eslint/parser'
-      - eslint-import-resolver-node
-      - eslint-import-resolver-webpack
-      - supports-color
-
  [email protected](@typescript-eslint/[email protected]([email protected])([email protected]))([email protected])([email protected])([email protected]):
    dependencies:
      debug: 4.3.5([email protected])
      enhanced-resolve: 5.17.0
      eslint: 8.57.0
      eslint-module-utils: 2.8.1(@typescript-eslint/[email protected]([email protected])([email protected]))([email protected])([email protected](@typescript-eslint/[email protected]([email protected])([email protected]))([email protected])([email protected])([email protected]))([email protected])
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0([email protected])([email protected]))(eslint[email protected])(eslint@8.57.0)
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.14.1([email protected])([email protected]))([email protected])
      fast-glob: 3.3.2
      get-tsconfig: 4.7.5
      is-core-module: 2.13.1
@@ -35045,7 +35019,6 @@ snapshots:
      - eslint-import-resolver-node
      - eslint-import-resolver-webpack
      - supports-color
-    optional: true

  [email protected]([email protected]):
    dependencies:
@@ -35077,17 +35050,6 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

-  [email protected](@typescript-eslint/[email protected]([email protected])([email protected]))([email protected])([email protected](@typescript-eslint/[email protected]([email protected])([email protected]))([email protected])([email protected]([email protected]))([email protected]))([email protected]):
-    dependencies:
-      debug: 3.2.7
-    optionalDependencies:
-      '@typescript-eslint/parser': 7.2.0([email protected])([email protected])
-      eslint: 8.57.0
-      eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/[email protected]([email protected])([email protected]))([email protected])([email protected]([email protected]))([email protected])
-    transitivePeerDependencies:
-      - supports-color
-
  [email protected](@typescript-eslint/[email protected]([email protected])([email protected]))([email protected])([email protected](@typescript-eslint/[email protected]([email protected])([email protected]))([email protected])([email protected])([email protected]))([email protected]):
    dependencies:
      debug: 3.2.7
@@ -35135,33 +35097,6 @@ snapshots:
      - eslint-import-resolver-webpack
      - supports-color

-  [email protected](@typescript-eslint/[email protected]([email protected])([email protected]))([email protected])([email protected]):
-    dependencies:
-      array-includes: 3.1.8
-      array.prototype.findlastindex: 1.2.5
-      array.prototype.flat: 1.3.2
-      array.prototype.flatmap: 1.3.2
-      debug: 3.2.7
-      doctrine: 2.1.0
-      eslint: 8.57.0
-      eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.8.1(@typescript-eslint/[email protected]([email protected])([email protected]))([email protected])([email protected](@typescript-eslint/[email protected]([email protected])([email protected]))([email protected])([email protected]([email protected]))([email protected]))([email protected])
-      hasown: 2.0.2
-      is-core-module: 2.13.1
-      is-glob: 4.0.3
-      minimatch: 3.1.2
-      object.fromentries: 2.0.8
-      object.groupby: 1.0.3
-      object.values: 1.2.0
-      semver: 7.6.2
-      tsconfig-paths: 3.15.0
-    optionalDependencies:
-      '@typescript-eslint/parser': 7.2.0([email protected])([email protected])
-    transitivePeerDependencies:
-      - eslint-import-resolver-typescript
-      - eslint-import-resolver-webpack
-      - supports-color
-
  [email protected]([email protected]):
    dependencies:
      array-includes: 3.1.8