Wallet vue adapter

.changeset/fair-rockets-talk.md

@@ -0,0 +1,5 @@
+---
+"@aptos-labs/wallet-adapter-vue": minor
+---
+
+Add @aptos-labs/wallet-adapter-vue@0.1.0

apps/nuxt-example/.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

apps/nuxt-example/README.md

@@ -0,0 +1,75 @@
+# Nuxt 3 Minimal Starter
+
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm run dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm run build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm run preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

apps/nuxt-example/app.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import Toaster from "@/components/ui/toast/Toaster.vue";
+import { registerWallet } from "./utils/standardWallet";
+
+onBeforeMount(() => {
+  registerWallet();
+});
+</script>
+<template>
+  <NuxtLayout name="default">
+    <NuxtPage />
+  </NuxtLayout>
+  <Toaster />
+</template>

apps/nuxt-example/assets/css/main.css

@@ -0,0 +1,76 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+    :root {
+        --background: 0 0% 100%;
+        --foreground: 240 10% 3.9%;
+
+        --card: 0 0% 100%;
+        --card-foreground: 240 10% 3.9%;
+
+        --popover: 0 0% 100%;
+        --popover-foreground: 240 10% 3.9%;
+
+        --primary: 240 5.9% 10%;
+        --primary-foreground: 0 0% 98%;
+
+        --secondary: 240 4.8% 95.9%;
+        --secondary-foreground: 240 5.9% 10%;
+
+        --muted: 240 4.8% 95.9%;
+        --muted-foreground: 240 3.8% 46.1%;
+
+        --accent: 240 4.8% 95.9%;
+        --accent-foreground: 240 5.9% 10%;
+
+        --destructive: 0 84.2% 60.2%;
+        --destructive-foreground: 0 0% 98%;
+
+        --border: 240 5.9% 90%;
+        --input: 240 5.9% 90%;
+        --ring: 240 10% 3.9%;
+
+        --radius: 0.5rem;
+    }
+
+    .dark {
+        --background: 240 10% 3.9%;
+        --foreground: 0 0% 98%;
+
+        --card: 240 10% 3.9%;
+        --card-foreground: 0 0% 98%;
+
+        --popover: 240 10% 3.9%;
+        --popover-foreground: 0 0% 98%;
+
+        --primary: 0 0% 98%;
+        --primary-foreground: 240 5.9% 10%;
+
+        --secondary: 240 3.7% 15.9%;
+        --secondary-foreground: 0 0% 98%;
+
+        --muted: 240 3.7% 15.9%;
+        --muted-foreground: 240 5% 64.9%;
+
+        --accent: 240 3.7% 15.9%;
+        --accent-foreground: 0 0% 98%;
+
+        --destructive: 0 62.8% 30.6%;
+        --destructive-foreground: 0 0% 98%;
+
+        --border: 240 3.7% 15.9%;
+        --input: 240 3.7% 15.9%;
+        --ring: 240 4.9% 83.9%;
+    }
+}
+
+@layer base {
+    * {
+        @apply border-border;
+    }
+    body {
+        @apply bg-background text-foreground;
+    }
+}

apps/nuxt-example/components.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://shadcn-vue.com/schema.json",
+  "style": "default",
+  "typescript": true,
+  "tsConfigPath": ".nuxt/tsconfig.json",
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "assets/css/tailwind.css",
+    "baseColor": "slate",
+    "cssVariables": true
+  },
+  "framework": "nuxt",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}

apps/nuxt-example/components/DisplayValue.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+interface DisplayValueProps {
+  value: string;
+  isCorrect: boolean;
+  expected?: string;
+}
+defineProps<DisplayValueProps>();
+</script>
+
+<template>
+  <div class="flex flex-col gap-2">
+    <p
+      :class="
+        isCorrect
+          ? 'text-green-700 dark:text-green-300'
+          : 'text-red-600 dark:text-red-400'
+      "
+    >
+      {{ value }}
+    </p>
+  </div>
+  <template v-if="expected && !isCorrect">
+    <p class="text-sm">Expected: {{ expected }}</p>
+  </template>
+</template>

apps/nuxt-example/components/LabelValueGrid.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import {
+  WalletInfo,
+  AccountInfo,
+  NetworkInfo,
+} from "@aptos-labs/wallet-adapter-vue";
+import { Network } from "@aptos-labs/ts-sdk";
+
+export interface LabelValueGridProps {
+  items: Array<{
+    label: string;
+    subLabel?: string;
+    value: unknown;
+    href?: string;
+    icon?: string;
+    alt?: string;
+    component?: ReturnType<typeof defineAsyncComponent> | null;
+  }>;
+  wallet?: WalletInfo | null;
+  account?: AccountInfo | null;
+  network?: NetworkInfo | null;
+  isValidNetworkName?: boolean;
+}
+const props = defineProps<LabelValueGridProps>();
+const { wallet, account, network, isValidNetworkName } = toRefs(props);
+
+function _value(label: string) {
+  if (label === "Public key") {
+    return account.value?.publicKey.toString();
+  }
+  if (label === "Address") {
+    return account.value?.address;
+  }
+  if (label === "Network name") {
+    return network.value?.name;
+  }
+  return "Not Present";
+}
+
+function isCorrect(label: string) {
+  if (label === "Public key") {
+    return !!account.value?.publicKey;
+  }
+  if (label === "Address") {
+    return !!account.value?.address;
+  }
+  if (label === "Network name") {
+    return isValidNetworkName.value;
+  }
+  return false;
+}
+
+function expected(label: string) {
+  if (label === "Network name") {
+    return Object.values<string>(Network).join(", ");
+  }
+  return "";
+}
+</script>
+
+<template>
+  <div class="grid grid-cols-[auto_minmax(0,1fr)] gap-x-6 gap-y-2 break-words">
+    <template
+      v-for="{ label, subLabel, value, component, href, icon, alt } in items"
+    >
+      <div class="flex flex-col text-muted-foreground">
+        <div>{{ label }}</div>
+        <div v-if="subLabel" class="text-xs">{{ subLabel }}</div>
+      </div>
+      <template v-if="component">
+        <component
+          :is="component"
+          :src="icon"
+          :alt="alt"
+          :href="href"
+          :value="_value(label)"
+          :isCorrect="isCorrect(label)"
+          :expected="expected(label)"
+        />
+      </template>
+      <template v-else>
+        {{ value }}
+      </template>
+    </template>
+  </div>
+</template>

apps/nuxt-example/components/ThemeToggle.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "~/components/ui/dropdown-menu";
+import { Moon, Sun } from "lucide-vue-next";
+</script>
+
+<template>
+  <DropdownMenu>
+    <DropdownMenuTrigger as-child class="flex items-center justify-center">
+      <Button class="shrink-0" variant="outline" size="icon">
+        <Sun
+          class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
+        />
+        <Moon
+          class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
+        />
+        <span class="sr-only">Toggle theme</span>
+      </Button>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent align="end">
+      <DropdownMenuItem @click="$colorMode.preference = 'light'">
+        Light
+      </DropdownMenuItem>
+      <DropdownMenuItem @click="$colorMode.preference = 'dark'">
+        Dark
+      </DropdownMenuItem>
+      <DropdownMenuItem @click="$colorMode.preference = 'system'">
+        System
+      </DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+</template>