Migrate In-app wallet settings page to shadcn/tailwind (#4360)

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR updates global CSS variables, adds a new API key field, and refactors components for In-App Wallet settings.

### Detailed summary
- Updated global CSS variables for input and ring styles
- Added `redirectUrls` field to `UpdateKeyInput` interface
- Added `InAppWalletSettingsUI` storybook component
- Refactored `Configure` and `index` components for In-App Wallet settings

> The following files were skipped due to too many changes: `apps/dashboard/src/components/embedded-wallets/Configure/index.tsx`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: MananTank

apps/dashboard/src/@/styles/globals.css

@@ -35,8 +35,8 @@
 
     /* Borders */
     --border: 0 0% 80%;
-    --input: var(--border);
-    --ring: 215.88 100% 60%;
+    --input: 0 0% 80%;
+    --ring: 0 0% 85%;
 
     /* Others */
     --radius: 0.5rem;

apps/dashboard/src/@3rdweb-sdk/react/hooks/useApi.ts

@@ -180,13 +180,14 @@ interface CreateKeyInput {
   services?: UpdateKeyServiceInput[];
 }
 
-interface UpdateKeyInput {
+export interface UpdateKeyInput {
   id: string;
   name: string;
   domains: string[];
   bundleIds: string[];
   walletAddresses?: string[];
   services?: UpdateKeyServiceInput[];
+  redirectUrls: string[];
 }
 
 interface UsageBundler {

apps/dashboard/src/components/embedded-wallets/Configure/InAppWalletSettingsUI.stories.tsx

@@ -0,0 +1,71 @@
+import type { ApiKey, ApiKeyService } from "@3rdweb-sdk/react/hooks/useApi";
+import type { Meta, StoryObj } from "@storybook/react";
+import { InAppWalletSettingsUI } from "./index";
+
+const meta = {
+  title: "settings/in-app-wallet",
+  component: Variants,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+} satisfies Meta<typeof Variants>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const GrowthPlan: Story = {
+  args: {
+    canEditAdvancedFeatures: true,
+  },
+};
+
+export const FreePlan: Story = {
+  args: {
+    canEditAdvancedFeatures: false,
+  },
+};
+
+const embeddedWalletService: ApiKeyService = {
+  id: "embeddedWallets",
+  name: "embeddedWallets", // important
+  targetAddresses: [],
+  actions: [],
+};
+
+const apiKeyStub: ApiKey = {
+  id: "api-key-id-foo",
+  name: "api key name foo",
+  key: "key-foobar",
+  accountId: "account-id-foo",
+  bundleIds: ["bundle-id-foo", "bundle-id-bar"],
+  createdAt: new Date().toISOString(),
+  creatorWalletAddress: "0x1F846F6DAE38E1C88D71EAA191760B15f38B7A37",
+  domains: ["example1.com", "example2.com"],
+  secretMasked: "",
+  walletAddresses: ["0x1F846F6DAE38E1C88D71EAA191760B15f38B7A37"],
+  redirectUrls: [],
+  revokedAt: "",
+  lastAccessedAt: new Date().toISOString(),
+  updatedAt: new Date().toISOString(),
+  services: [embeddedWalletService],
+};
+
+function Variants(props: {
+  canEditAdvancedFeatures: boolean;
+}) {
+  return (
+    <div className="min-h-screen bg-background p-6 text-foreground max-w-[1140px] mx-auto">
+      <div className="flex gap-10 flex-col">
+        <InAppWalletSettingsUI
+          canEditAdvancedFeatures={props.canEditAdvancedFeatures}
+          apiKey={apiKeyStub}
+          isUpdating={false}
+          trackingCategory="foo"
+          updateApiKey={() => {}}
+        />
+      </div>
+    </div>
+  );
+}