@1001-digital/layers.evm 0.0.1

package/.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+indent_size = 2
+indent_style = space
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

package/.nuxtrc

@@ -0,0 +1 @@
+typescript.includeWorkspace = true

package/.playground/.env.example

@@ -0,0 +1,7 @@
+NUXT_PUBLIC_TITLE="EVM Layer Playground"
+NUXT_PUBLIC_CHAIN_ID=1
+NUXT_PUBLIC_BLOCK_EXPLORER="https://etherscan.io"
+NUXT_PUBLIC_RPC1=""
+NUXT_PUBLIC_RPC2=""
+NUXT_PUBLIC_RPC3=""
+NUXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=""

package/.playground/app.config.ts

@@ -0,0 +1,5 @@
+export default defineAppConfig({
+  myLayer: {
+    name: 'My amazing Nuxt layer (overwritten)'
+  }
+})

package/.playground/app.vue

@@ -0,0 +1,3 @@
+<template>
+  <NuxtPage />
+</template>

package/.playground/components/SignedIn.client.vue

@@ -0,0 +1,106 @@
+<template>
+  <Card v-if="isConnected">
+    <h2>Disconnect?</h2>
+    <Button @click="disconnect">Disconnect</Button>
+  </Card>
+
+  <Card v-if="isConnected">
+    <h2>Account Info</h2>
+    <p>Address: {{ address }}</p>
+    <p>Chain ID: {{ chainId }}</p>
+  </Card>
+
+  <Card v-if="isConnected">
+    <h2>Transaction Flow Example</h2>
+    <p>Send 0 ETH to your own address</p>
+
+    <EvmTransactionFlow :request="sendTransaction" :text="{
+      title: {
+        confirm: 'Send Transaction',
+        requesting: 'Requesting...',
+        waiting: 'Waiting for confirmation...',
+        complete: 'Transaction Complete!',
+        error: 'Transaction Error',
+      },
+      lead: {
+        confirm: 'This will send 0 ETH to your address as a test transaction.',
+        requesting: 'Please confirm the transaction in your wallet.',
+        waiting: 'Your transaction is being processed...',
+        complete: 'Your transaction has been confirmed on-chain.',
+        error: 'An error occurred while processing your transaction.',
+      },
+      action: {
+        confirm: 'Send Transaction',
+        error: 'Try Again',
+      },
+    }" @complete="onTransactionComplete" @cancel="onTransactionCancel">
+      <template #start="{ start }">
+        <Actions>
+          <Button @click="start">Start Transaction</Button>
+        </Actions>
+      </template>
+
+      <template #confirm>
+        <div class="tx-details">
+          <p><strong>To:</strong> {{ address }}</p>
+          <p><strong>Amount:</strong> 0 ETH</p>
+          <p><strong>Chain:</strong> {{ chainId }}</p>
+        </div>
+      </template>
+
+      <template #complete>
+        <p class="success">Transaction confirmed successfully!</p>
+      </template>
+    </EvmTransactionFlow>
+  </Card>
+</template>
+
+<script setup lang="ts">
+import { useConnection, useDisconnect } from '@wagmi/vue'
+import { sendTransaction as sendTx } from '@wagmi/core'
+import { parseEther } from 'viem'
+import type { Config } from '@wagmi/vue'
+import type { TransactionReceipt } from 'viem'
+
+const { $wagmi } = useNuxtApp()
+const { address, isConnected, chainId } = useConnection()
+const { disconnect } = useDisconnect()
+
+const sendTransaction = async () => {
+  const hash = await sendTx($wagmi as Config, {
+    to: address.value!,
+    value: parseEther('0'),
+  })
+  return hash
+}
+
+const onTransactionComplete = (receipt: TransactionReceipt) => {
+  console.log('Transaction complete:', receipt)
+}
+
+const onTransactionCancel = () => {
+  console.log('Transaction cancelled')
+}
+</script>
+
+<style scoped>
+.tx-details {
+  padding: var(--size-4);
+  background: var(--gray-z-1);
+  border-radius: var(--radius);
+  display: grid;
+  gap: var(--size-3);
+}
+
+.tx-details p {
+  margin: 0;
+  font-family: var(--font-mono);
+  font-size: var(--font-sm);
+}
+
+.success {
+  color: var(--success);
+  font-weight: 600;
+  text-align: center;
+}
+</style>

package/.playground/nuxt.config.ts

@@ -0,0 +1,12 @@
+import { fileURLToPath } from 'node:url'
+
+export default defineNuxtConfig({
+  extends: ['..'],
+  modules: ['@nuxt/eslint'],
+  eslint: {
+    config: {
+      // Use the generated ESLint config for lint root project as well
+      rootDir: fileURLToPath(new URL('..', import.meta.url))
+    }
+  }
+})

package/.playground/pages/index.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="playground">
+    <h1>EVM Layer Playground</h1>
+
+    <Card>
+      <h2>Wallet Connection</h2>
+      <EvmConnect>
+        <template #connected="{ address }">
+          <p>
+            Connected:
+            <EvmAccount :address="address" />
+          </p>
+        </template>
+      </EvmConnect>
+    </Card>
+
+    <SignedIn />
+  </div>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style scoped>
+.playground {
+  max-width: 50rem;
+  margin: 0 auto;
+  padding: var(--spacer);
+  display: grid;
+  gap: var(--spacer);
+}
+</style>

package/AGENTS.md

@@ -0,0 +1,72 @@
+# AGENTS.md
+
+Nuxt layer for building dAPPs (Ethereum-powered applications). Extends `@1001-digital/layers.base`.
+
+## Setup commands
+
+- Install deps: `pnpm install`
+- Start dev server: `pnpm dev`
+- Prepare types: `pnpm dev:prepare`
+
+## Dependencies
+
+- `@wagmi/vue` (0.4.x) - Wallet connection, contract reads/writes, account state
+- `viem` - Type-safe Ethereum utilities, ABI encoding, transaction simulation
+- `@tanstack/vue-query` - Caching and synchronization of blockchain data
+- `qrcode` - QR code generation for wallet connect URIs
+
+## Wagmi Configuration
+
+Uses modern wagmi 0.4.x patterns:
+- `useConnection` (not deprecated `useAccount`)
+- `useConnectionEffect` (not deprecated `useAccountEffect`)
+- `useSwitchConnection` (not deprecated `useSwitchAccount`)
+
+Configured chains: mainnet, sepolia, holesky, localhost
+
+Connectors: injected, coinbaseWallet, metaMask, walletConnect
+
+## Components
+
+- `EvmConnect.client.vue` - Wallet connection button with modal
+- `EvmAccount.client.vue` - Address display with ENS resolution
+- `EvmTransactionFlow.vue` - Guided transaction execution flow
+- `EvmConnectorQR.client.vue` - Base QR code renderer
+- `EvmWalletConnectQR.client.vue` - WalletConnect QR wrapper
+- `EvmMetaMaskQR.client.vue` - MetaMask QR wrapper
+
+## Composables
+
+- `useMainChainId()` - Get configured chain ID from runtime config
+- `useEnsureChainIdCheck()` - Validate/switch chain before transactions
+- `useBaseURL()` - Get base URL with trailing slash
+- `useClipboard()` - Copy text to clipboard with copied state
+
+## Utilities
+
+- `shortAddress(address, length)` - Truncate address for display
+- `formatETH(value, maxDecimals)` - Format ETH values
+
+## Environment Variables
+
+```bash
+NUXT_PUBLIC_TITLE="App Name"
+NUXT_PUBLIC_CHAIN_ID=1
+NUXT_PUBLIC_BLOCK_EXPLORER="https://etherscan.io"
+NUXT_PUBLIC_RPC1=""
+NUXT_PUBLIC_RPC2=""
+NUXT_PUBLIC_RPC3=""
+NUXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=""
+```
+
+## Key directories
+
+```
+app/
+├── components/          # Vue components (Evm* prefixed)
+├── composables/         # Composables (chainId, helpers)
+├── plugins/             # Wagmi plugin configuration
+└── utils/               # Utility functions
+public/
+└── icons/wallets/       # Wallet connector icons
+```

package/README.md

@@ -0,0 +1,73 @@
+# Nuxt Layer Starter
+
+Create Nuxt extendable layer with this GitHub template.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+pnpm install
+```
+
+## Working on your layer
+
+Your layer is at the root of this repository, it is exactly like a regular Nuxt project, except you can publish it on NPM.
+
+The `.playground` directory should help you on trying your layer during development.
+
+Running `pnpm dev` will prepare and boot `.playground` directory, which imports your layer itself.
+
+## Distributing your layer
+
+Your Nuxt layer is shaped exactly the same as any other Nuxt project, except you can publish it on NPM.
+
+To do so, you only have to check if `files` in `package.json` are valid, then run:
+
+```bash
+npm publish --access public
+```
+
+Once done, your users will only have to run:
+
+```bash
+npm install --save your-layer
+```
+
+Then add the dependency to their `extends` in `nuxt.config`:
+
+```ts
+defineNuxtConfig({
+  extends: 'your-layer'
+})
+```
+
+## Development Server
+
+Start the development server on http://localhost:3000
+
+```bash
+pnpm dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+pnpm build
+```
+
+Or statically generate it with:
+
+```bash
+pnpm generate
+```
+
+Locally preview production build:
+
+```bash
+pnpm preview
+```
+
+Checkout the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

package/app/components/EvmAccount.client.vue

@@ -0,0 +1,28 @@
+<template>
+  <slot :display="display" :is-current="isCurrent">
+    <span>{{ display }}</span>
+  </slot>
+</template>
+
+<script setup lang="ts">
+import type { Address } from 'viem'
+import { useConnection, useEnsName } from '@wagmi/vue'
+
+const props = defineProps<{
+  address?: Address
+}>()
+const address = computed(() => props.address)
+
+const { address: currentAddress } = useConnection()
+
+const isCurrent = computed<boolean>(
+  () => currentAddress.value?.toLowerCase() === address.value?.toLowerCase(),
+)
+
+const { data: ens } = useEnsName({
+  address,
+  chainId: 1,
+})
+
+const display = computed<string>(() => ens.value || shortAddress(address.value!))
+</script>

package/app/components/EvmConnect.client.vue

@@ -0,0 +1,176 @@
+<template>
+  <Button v-if="showConnect" @click="chooseModalOpen = true" :class="className">
+    <slot>Connect Wallet</slot>
+  </Button>
+  <slot v-else name="connected" :address="address">
+    <EvmAccount :address="address" />
+  </slot>
+
+  <Teleport to="body">
+    <Dialog v-if="showConnect" title="Connect Wallet" v-model:open="chooseModalOpen" @closed="onModalClosed">
+      <Alert v-if="errorMessage" type="error">
+        {{ errorMessage }}
+      </Alert>
+      <EvmWalletConnectQR v-if="walletConnectUri" :uri="walletConnectUri" />
+      <EvmMetaMaskQR v-else-if="metaMaskUri" :uri="metaMaskUri" />
+      <template v-else-if="isConnecting">
+        <Loading txt="Waiting for wallet confirmation..." spinner />
+      </template>
+      <div v-else class="wallet-options">
+        <Button v-for="connector in shownConnectors" :key="connector.uid" @click="() => login(connector)"
+          class="choose-connector">
+          <img v-if="ICONS[connector.name]" :src="connector.icon || `${base}icons/wallets/${ICONS[connector.name]}`"
+            :alt="connector.name" />
+          <span>{{ connector.name }}</span>
+        </Button>
+        <Button to="https://ethereum.org/wallets/" target="_blank" class="link muted small">
+          <Icon type="help" />
+          <span>New to wallets?</span>
+        </Button>
+      </div>
+    </Dialog>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import type { Connector } from '@wagmi/vue'
+import { useConnection, useConnect, useChainId } from '@wagmi/vue'
+
+const ICONS: Record<string, string> = {
+  'Coinbase Wallet': 'coinbase.svg',
+  MetaMask: 'metamask.svg',
+  Phantom: 'phantom.svg',
+  'Rabby Wallet': 'rabby.svg',
+  Rainbow: 'rainbow.svg',
+  WalletConnect: 'walletconnect.svg',
+}
+
+const PRIORITY: Record<string, number> = {
+  'WalletConnect': 20,
+  'Coinbase Wallet': 10,
+}
+
+const props = defineProps<{
+  className?: string
+}>()
+const emit = defineEmits<{
+  connected: [{ address: `0x${string}` | undefined }]
+  disconnected: []
+}>()
+const base = useBaseURL()
+
+const chainId = useChainId()
+const { connectors, connectAsync } = useConnect()
+const { address, isConnected } = useConnection()
+
+const showConnect = computed(() => !isConnected.value)
+const shownConnectors = computed(() => {
+  const unique = Array.from(
+    new Map(connectors?.map((connector) => [connector.name, connector])).values(),
+  )
+
+  const filtered = unique.length > 1 ? unique.filter((c) => c.id !== 'injected') : unique
+
+  return filtered.sort((a, b) => {
+    const priorityA = PRIORITY[a.name] ?? 5
+    const priorityB = PRIORITY[b.name] ?? 5
+    return priorityA - priorityB
+  })
+})
+
+const chooseModalOpen = ref(false)
+const errorMessage = ref('')
+const isConnecting = ref(false)
+const walletConnectUri = ref('')
+const metaMaskUri = ref('')
+
+const login = async (connector: Connector) => {
+  errorMessage.value = ''
+  isConnecting.value = true
+  walletConnectUri.value = ''
+  metaMaskUri.value = ''
+
+  const handleMessage = (event: { type: string; data?: string }) => {
+    if (event.type === 'display_uri' && event.data) {
+      if (connector.id === 'walletConnect') {
+        walletConnectUri.value = event.data
+      } else if (connector.id === 'metaMaskSDK') {
+        metaMaskUri.value = event.data
+      }
+    }
+  }
+
+  if (connector.id === 'walletConnect' || connector.id === 'metaMaskSDK') {
+    connector.emitter.on('message', handleMessage)
+  }
+
+  try {
+    await connectAsync({ connector, chainId: chainId.value })
+
+    setTimeout(() => {
+      chooseModalOpen.value = false
+      isConnecting.value = false
+      walletConnectUri.value = ''
+      metaMaskUri.value = ''
+    }, 100)
+  } catch (error: unknown) {
+    isConnecting.value = false
+    walletConnectUri.value = ''
+    metaMaskUri.value = ''
+
+    const errorMsg = error instanceof Error ? error.message : ''
+    if (errorMsg.includes('User rejected') || errorMsg.includes('rejected') || errorMsg.includes('denied')) {
+      errorMessage.value = 'Connection cancelled. Please try again.'
+    } else {
+      errorMessage.value = 'Failed to connect. Please try again.'
+    }
+    console.error('Wallet connection error:', error)
+  } finally {
+    if (connector.id === 'walletConnect' || connector.id === 'metaMaskSDK') {
+      connector.emitter.off('message', handleMessage)
+    }
+  }
+}
+
+const onModalClosed = () => {
+  errorMessage.value = ''
+  isConnecting.value = false
+  walletConnectUri.value = ''
+  metaMaskUri.value = ''
+}
+
+const check = () =>
+  isConnected.value ? emit('connected', { address: address.value }) : emit('disconnected')
+watch(isConnected, () => check())
+onMounted(() => check())
+</script>
+
+<style scoped>
+.wallet-options {
+  display: grid;
+  gap: var(--spacer);
+
+  button.choose-connector {
+    width: 100%;
+    inline-size: auto;
+    justify-content: flex-start;
+
+    img {
+      margin: -1rem 0 -1rem -0.6rem;
+      width: var(--size-5);
+      height: var(--size-5);
+    }
+
+    span {
+      border-left: var(--border);
+      padding-left: var(--spacer-sm);
+    }
+  }
+
+}
+
+.link.muted {
+  justify-self: center;
+  font-size: var(--font-xs);
+}
+</style>

package/app/components/EvmConnectorQR.client.vue

@@ -0,0 +1,108 @@
+<template>
+  <p>
+    <slot name="instruction">Scan the code in your wallet application</slot>
+  </p>
+  <div class="qr-frame">
+    <canvas ref="qrCanvas"></canvas>
+  </div>
+  <p class="uri-label">Or copy the connection URI:</p>
+  <div class="uri-display">
+    <code>{{ uri }}</code>
+    <Button @click="copyUri" class="copy-button" :class="{ copied: isCopied }">
+      <Icon :type="isCopied ? 'checkmark' : 'copy'" />
+    </Button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import QRCode from 'qrcode'
+
+const props = defineProps<{
+  uri: string
+}>()
+
+const qrCanvas = ref<HTMLCanvasElement | null>(null)
+const { copy, copied: isCopied } = useClipboard()
+
+const generateQR = async () => {
+  if (!qrCanvas.value || !props.uri) return
+
+  try {
+    await QRCode.toCanvas(qrCanvas.value, props.uri, {
+      width: 300,
+      margin: 2,
+      color: {
+        dark: '#000000',
+        light: '#FFFFFF',
+      },
+    })
+  } catch (error) {
+    console.error('Failed to generate QR code:', error)
+  }
+}
+
+const copyUri = () => copy(props.uri)
+
+watch(() => props.uri, generateQR, { immediate: true })
+
+onMounted(() => {
+  generateQR()
+})
+</script>
+
+<style scoped>
+p {
+  text-align: center;
+  @mixin ui-font;
+  color: var(--muted);
+  font-size: var(--font-sm);
+}
+
+.qr-frame {
+  background: white;
+  padding: var(--spacer-sm);
+  max-width: 15rem;
+  max-height: 15rem;
+  border: var(--border);
+  border-radius: var(--border-radius-sm, 0.5rem);
+  margin: 0 auto;
+
+  canvas {
+    width: 100% !important;
+    height: 100% !important;
+  }
+}
+
+.uri-display {
+  display: flex;
+  align-items: center;
+  gap: var(--spacer-xs);
+  background: var(--color-bg-secondary);
+  border: var(--border);
+  border-radius: var(--border-radius-sm);
+  overflow: hidden;
+  height: min-content;
+  padding: 0;
+
+  code {
+    flex: 1;
+    font-size: var(--font-xs);
+    font-family: monospace;
+    white-space: nowrap;
+    overflow: hidden;
+    padding: 0 var(--spacer-sm);
+    color: var(--muted);
+  }
+
+  .copy-button {
+    flex-shrink: 0;
+    padding: var(--spacer-xs);
+    min-width: auto;
+    margin: -1px;
+
+    &.copied {
+      color: var(--color-success);
+    }
+  }
+}
+</style>

package/app/components/EvmMetaMaskQR.client.vue

@@ -0,0 +1,13 @@
+<template>
+  <EvmConnectorQR :uri="uri">
+    <template #instruction>
+      Scan the code in your MetaMask mobile app
+    </template>
+  </EvmConnectorQR>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  uri: string
+}>()
+</script>

package/app/components/EvmTransactionFlow.vue

@@ -0,0 +1,237 @@
+<template>
+  <slot :start="start" name="start"></slot>
+
+  <Dialog v-model:open="open" :x-close="false" class="transaction-flow">
+    <slot name="before" />
+
+    <h1 v-if="text.title[step]">{{ text.title[step] }}</h1>
+
+    <div class="text">
+      <p v-if="text.lead[step]">{{ text.lead[step] }}</p>
+      <p v-if="error">{{ error }}</p>
+    </div>
+
+    <slot :name="step" :cancel="cancel"></slot>
+
+    <Button v-if="step === 'waiting'" :to="txLink" target="_blank" class="block-explorer">
+      <Icon type="loader" class="spin" />
+      <span>View on Block Explorer</span>
+    </Button>
+
+    <Actions v-if="step === 'chain'">
+      <Button @click="cancel" class="secondary">Cancel</Button>
+    </Actions>
+
+    <Actions v-if="step === 'confirm' || step === 'error'">
+      <Button @click="cancel" class="secondary">Cancel</Button>
+      <Button @click="() => initializeRequest()">{{ text.action[step] || 'Execute' }}</Button>
+    </Actions>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { waitForTransactionReceipt, watchChainId } from '@wagmi/core'
+import type { Config } from '@wagmi/vue'
+import type { TransactionReceipt, Hash } from 'viem'
+
+interface TextConfig {
+  title: Record<string, string>
+  lead: Record<string, string>
+  action: Record<string, string>
+}
+
+const checkChain = useEnsureChainIdCheck()
+
+const { $wagmi } = useNuxtApp()
+const config = useRuntimeConfig()
+
+const props = withDefaults(defineProps<{
+  text?: TextConfig
+  request?: () => Promise<Hash>
+  delayAfter?: number
+  delayAutoclose?: number
+  skipConfirmation?: boolean
+  autoCloseSuccess?: boolean
+}>(), {
+  text: () => ({
+    title: {
+      confirm: 'Confirm Transaction',
+    },
+    lead: {
+      confirm: 'Please review and confirm this transaction.',
+    },
+    action: {
+      confirm: 'Execute',
+    },
+  }),
+  delayAfter: 2000,
+  delayAutoclose: 2000,
+  skipConfirmation: false,
+  autoCloseSuccess: false,
+})
+
+const emit = defineEmits<{
+  complete: [receipt: TransactionReceipt]
+  cancel: []
+}>()
+
+const open = ref(false)
+
+const switchChain = ref(false)
+watchChainId($wagmi as Config, {
+  async onChange() {
+    if (!switchChain.value) return
+
+    if (await checkChain()) {
+      switchChain.value = false
+      initializeRequest()
+    } else {
+      switchChain.value = true
+    }
+  },
+})
+
+const cachedRequest = ref(props.request)
+watch(() => props.request, () => {
+  cachedRequest.value = props.request
+})
+
+const requesting = ref(false)
+const waiting = ref(false)
+const complete = ref(false)
+const error = ref('')
+const tx = ref<Hash | null>(null)
+const receipt = ref<TransactionReceipt | null>(null)
+const txLink = computed(() => `${config.public.blockExplorer}/tx/${tx.value}`)
+
+const step = computed(() => {
+  if (
+    open.value &&
+    !requesting.value &&
+    !switchChain.value &&
+    !waiting.value &&
+    !complete.value
+  ) {
+    return 'confirm'
+  }
+
+  if (switchChain.value) {
+    return 'chain'
+  }
+
+  if (requesting.value) {
+    return 'requesting'
+  }
+
+  if (waiting.value) {
+    return 'waiting'
+  }
+
+  if (complete.value) {
+    return 'complete'
+  }
+
+  return 'error'
+})
+
+const initializeRequest = async (request = cachedRequest.value) => {
+  cachedRequest.value = request
+  complete.value = false
+  open.value = true
+  error.value = ''
+  tx.value = null
+  receipt.value = null
+
+  if (!(await checkChain())) {
+    switchChain.value = true
+    return
+  } else {
+    switchChain.value = false
+  }
+
+  if (requesting.value) return
+
+  try {
+    requesting.value = true
+    tx.value = await request!()
+    requesting.value = false
+    waiting.value = true
+    const [receiptObject] = await Promise.all([
+      waitForTransactionReceipt($wagmi as Config, { hash: tx.value }),
+    ])
+    await delay(props.delayAfter)
+    receipt.value = receiptObject
+    emit('complete', receiptObject)
+    complete.value = true
+  } catch (e: unknown) {
+    const err = e as { cause?: { code?: number }; shortMessage?: string }
+    if (err?.cause?.code === 4001) {
+      open.value = false
+    } else {
+      error.value = err.shortMessage || 'Error submitting transaction request.'
+    }
+    console.log(e)
+  }
+
+  requesting.value = false
+  waiting.value = false
+
+  if (props.autoCloseSuccess && step.value === 'complete') {
+    await delay(props.delayAutoclose)
+    open.value = false
+    await delay(300)
+  }
+
+  return receipt.value
+}
+
+const start = () => {
+  if (props.skipConfirmation && !open.value) {
+    initializeRequest()
+  }
+
+  open.value = true
+}
+
+const cancel = () => {
+  open.value = false
+
+  emit('cancel')
+}
+
+defineExpose({
+  initializeRequest,
+})
+</script>
+
+<style>
+.transaction-flow {
+  display: grid;
+  gap: var(--spacer);
+
+  .spinner {
+    width: var(--size-7);
+    height: var(--size-7);
+    margin: calc(-1 * var(--size-4)) 0 var(--size-3);
+  }
+
+  .text {
+    width: 100%;
+    height: min-content;
+  }
+
+  h1 {
+    font-size: var(--font-lg);
+    margin-bottom: var(--size-4);
+  }
+
+  p {
+    white-space: pre-wrap;
+    width: 100%;
+
+    a {
+      text-decoration: underline;
+    }
+  }
+}
+</style>

package/app/components/EvmWalletConnectQR.client.vue

@@ -0,0 +1,13 @@
+<template>
+  <EvmConnectorQR :uri="uri">
+    <template #instruction>
+      Scan the code in your wallet application
+    </template>
+  </EvmConnectorQR>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  uri: string
+}>()
+</script>

package/app/composables/base.ts

@@ -0,0 +1,5 @@
+export const useBaseURL = () => {
+  const config = useRuntimeConfig()
+
+  return config.app.baseURL.endsWith('/') ? config.app.baseURL : config.app.baseURL + '/'
+}

package/app/composables/chainId.ts

@@ -0,0 +1,25 @@
+import { useConnection, useSwitchChain } from '@wagmi/vue'
+
+export const useMainChainId = () => {
+  const config = useRuntimeConfig()
+
+  return config.public.chainId as 1 | 11155111 | 17000 | 1337 | 31337
+}
+
+export const useEnsureChainIdCheck = () => {
+  const chainId = useMainChainId()
+  const { switchChain } = useSwitchChain()
+  const { chainId: currentChainId } = useConnection()
+
+  return async () => {
+    if (chainId !== currentChainId.value) {
+      switchChain({ chainId })
+    }
+
+    if (chainId === currentChainId.value) {
+      return true
+    }
+
+    return false
+  }
+}

package/app/composables/clipboard.ts

@@ -0,0 +1,26 @@
+export const useClipboard = () => {
+  const copied = ref(false)
+  let timeout: ReturnType<typeof setTimeout> | null = null
+
+  const copy = async (text: string) => {
+    try {
+      await navigator.clipboard.writeText(text)
+      copied.value = true
+
+      if (timeout) clearTimeout(timeout)
+      timeout = setTimeout(() => {
+        copied.value = false
+      }, 2000)
+
+      return true
+    } catch (error) {
+      console.error('Failed to copy to clipboard:', error)
+      return false
+    }
+  }
+
+  return {
+    copy,
+    copied,
+  }
+}

package/app/composables/helpers.ts

@@ -0,0 +1 @@
+export const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))

package/app/plugins/wagmi.ts

@@ -0,0 +1,81 @@
+import { VueQueryPlugin } from '@tanstack/vue-query'
+import {
+  http,
+  cookieStorage,
+  createConfig,
+  createStorage,
+  WagmiPlugin,
+  fallback,
+  type Config,
+  type CreateConnectorFn,
+} from '@wagmi/vue'
+import { mainnet, sepolia, holesky, localhost } from '@wagmi/vue/chains'
+import { coinbaseWallet, injected, metaMask, walletConnect } from '@wagmi/vue/connectors'
+import type { CustomTransport, Transport } from 'viem'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  const title = nuxtApp.$config.public.title || 'EVM Layer'
+  const mainChainId = nuxtApp.$config.public.chainId
+
+  const connectors: CreateConnectorFn[] = [
+    injected(),
+    coinbaseWallet({
+      appName: title,
+      appLogoUrl: '',
+    }),
+    metaMask({
+      headless: true,
+      dappMetadata: {
+        name: title,
+        iconUrl: '',
+        url: '',
+      },
+    }),
+  ]
+
+  if (import.meta.client && nuxtApp.$config.public.walletConnectProjectId)
+    connectors.push(
+      walletConnect({
+        projectId: nuxtApp.$config.public.walletConnectProjectId,
+        showQrModal: false,
+      }),
+    )
+
+  const transportDefinitions: CustomTransport | Transport[] = []
+
+  if (nuxtApp.$config.public.rpc1)
+    transportDefinitions.push(http(nuxtApp.$config.public.rpc1 as string))
+  if (nuxtApp.$config.public.rpc2)
+    transportDefinitions.push(http(nuxtApp.$config.public.rpc2 as string))
+  if (nuxtApp.$config.public.rpc3)
+    transportDefinitions.push(http(nuxtApp.$config.public.rpc3 as string))
+  transportDefinitions.push(http())
+
+  const transports = fallback(transportDefinitions)
+
+  const wagmiConfig: Config = createConfig({
+    chains: [mainnet, sepolia, holesky, localhost],
+    batch: {
+      multicall: true,
+    },
+    connectors,
+    storage: createStorage({
+      storage: cookieStorage,
+    }),
+    ssr: true,
+    transports: {
+      [mainnet.id]: mainChainId == 1 ? transports : http(),
+      [sepolia.id]: transports,
+      [holesky.id]: transports,
+      [localhost.id]: transports,
+    },
+  })
+
+  nuxtApp.vueApp.use(WagmiPlugin, { config: wagmiConfig }).use(VueQueryPlugin, {})
+
+  return {
+    provide: {
+      wagmi: wagmiConfig,
+    },
+  }
+})

package/app/utils/addresses.ts

@@ -0,0 +1,4 @@
+import type { Address } from 'viem'
+
+export const shortAddress = (address: Address, length: number = 3) =>
+  address.substring(0, length + 2) + '...' + address.substring(address.length - length)

package/app/utils/format-eth.ts

@@ -0,0 +1,12 @@
+export function formatETH(value: string | number, maxDecimals: number = 3): string {
+  const numberValue = typeof value === 'string' ? parseFloat(value) : value
+
+  if (isNaN(numberValue)) {
+    throw new Error('Invalid number input')
+  }
+
+  return new Intl.NumberFormat('en-US', {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: maxDecimals,
+  }).format(numberValue)
+}

package/app.config.ts

@@ -0,0 +1,14 @@
+export default defineAppConfig({
+  myLayer: {
+    name: 'Hello from Nuxt layer'
+  }
+})
+
+declare module '@nuxt/schema' {
+  interface AppConfigInput {
+    myLayer?: {
+      /** Project name */
+      name?: string
+    }
+  }
+}

package/eslint.config.js

@@ -0,0 +1,3 @@
+import withNuxt from './.playground/.nuxt/eslint.config.mjs'
+
+export default withNuxt()

package/nuxt.config.ts

@@ -0,0 +1,41 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  extends: ['@1001-digital/layers.base'],
+
+  modules: ['@wagmi/vue/nuxt'],
+
+  ssr: process.env.NUXT_SSR !== 'false',
+
+  runtimeConfig: {
+    public: {
+      title: 'EVM Layer',
+      blockExplorer: 'https://etherscan.io',
+      chainId: 1,
+      rpc1: '',
+      rpc2: '',
+      rpc3: '',
+      walletConnectProjectId: '',
+    },
+  },
+
+  vite: {
+    optimizeDeps: {
+      include: [
+        '@1001-digital/layers.evm > @metamask/sdk',
+        '@1001-digital/layers.evm > eventemitter3',
+        '@1001-digital/layers.evm > qrcode',
+      ],
+    },
+  },
+
+  nitro: {
+    preset: 'node-cluster',
+    esbuild: {
+      options: {
+        target: 'esnext',
+      },
+    },
+  },
+
+  compatibilityDate: '2024-11-01',
+})

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@1001-digital/layers.evm",
+  "type": "module",
+  "version": "0.0.1",
+  "main": "./nuxt.config.ts",
+  "devDependencies": {
+    "@nuxt/eslint": "latest",
+    "@types/node": "^24.10.4",
+    "@types/qrcode": "^1.5.6",
+    "eslint": "^9.39.2",
+    "nuxt": "^4.2.2",
+    "typescript": "^5.9.3",
+    "vue": "latest"
+  },
+  "dependencies": {
+    "@metamask/sdk": "~0.33.1",
+    "@tanstack/vue-query": "^5.92.1",
+    "@wagmi/vue": "^0.4.3",
+    "@walletconnect/ethereum-provider": "~2.21.1",
+    "qrcode": "^1.5.4",
+    "viem": "~2.42.1",
+    "@1001-digital/layers.base": "^0.0.2"
+  },
+  "scripts": {
+    "dev": "nuxi dev .playground",
+    "dev:prepare": "nuxt prepare .playground",
+    "build": "nuxt build .playground",
+    "generate": "nuxt generate .playground",
+    "preview": "nuxt preview .playground",
+    "lint": "eslint ."
+  }
+}

package/public/icons/wallets/coinbase.svg

@@ -0,0 +1,4 @@
+<svg width="1024" height="1024" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="1024" height="1024" fill="#0052FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M152 512C152 710.823 313.177 872 512 872C710.823 872 872 710.823 872 512C872 313.177 710.823 152 512 152C313.177 152 152 313.177 152 512ZM420 396C406.745 396 396 406.745 396 420V604C396 617.255 406.745 628 420 628H604C617.255 628 628 617.255 628 604V420C628 406.745 617.255 396 604 396H420Z" fill="white"/>
+</svg>

package/public/icons/wallets/metamask.svg

@@ -0,0 +1 @@
+<svg fill="none" height="33" viewBox="0 0 35 33" width="35" xmlns="http://www.w3.org/2000/svg"><g stroke-linecap="round" stroke-linejoin="round" stroke-width=".25"><path d="m32.9582 1-13.1341 9.7183 2.4424-5.72731z" fill="#e17726" stroke="#e17726"/><g fill="#e27625" stroke="#e27625"><path d="m2.66296 1 13.01714 9.809-2.3254-5.81802z"/><path d="m28.2295 23.5335-3.4947 5.3386 7.4829 2.0603 2.1436-7.2823z"/><path d="m1.27281 23.6501 2.13055 7.2823 7.46994-2.0603-3.48166-5.3386z"/><path d="m10.4706 14.5149-2.0786 3.1358 7.405.3369-.2469-7.969z"/><path d="m25.1505 14.5149-5.1575-4.58704-.1688 8.05974 7.4049-.3369z"/><path d="m10.8733 28.8721 4.4819-2.1639-3.8583-3.0062z"/><path d="m20.2659 26.7082 4.4689 2.1639-.6105-5.1701z"/></g><path d="m24.7348 28.8721-4.469-2.1639.3638 2.9025-.039 1.231z" fill="#d5bfb2" stroke="#d5bfb2"/><path d="m10.8732 28.8721 4.1572 1.9696-.026-1.231.3508-2.9025z" fill="#d5bfb2" stroke="#d5bfb2"/><path d="m15.1084 21.7842-3.7155-1.0884 2.6243-1.2051z" fill="#233447" stroke="#233447"/><path d="m20.5126 21.7842 1.0913-2.2935 2.6372 1.2051z" fill="#233447" stroke="#233447"/><path d="m10.8733 28.8721.6495-5.3386-4.13117.1167z" fill="#cc6228" stroke="#cc6228"/><path d="m24.0982 23.5335.6366 5.3386 3.4946-5.2219z" fill="#cc6228" stroke="#cc6228"/><path d="m27.2291 17.6507-7.405.3369.6885 3.7966 1.0913-2.2935 2.6372 1.2051z" fill="#cc6228" stroke="#cc6228"/><path d="m11.3929 20.6958 2.6242-1.2051 1.0913 2.2935.6885-3.7966-7.40495-.3369z" fill="#cc6228" stroke="#cc6228"/><path d="m8.392 17.6507 3.1049 6.0513-.1039-3.0062z" fill="#e27525" stroke="#e27525"/><path d="m24.2412 20.6958-.1169 3.0062 3.1049-6.0513z" fill="#e27525" stroke="#e27525"/><path d="m15.797 17.9876-.6886 3.7967.8704 4.4833.1949-5.9087z" fill="#e27525" stroke="#e27525"/><path d="m19.8242 17.9876-.3638 2.3584.1819 5.9216.8704-4.4833z" fill="#e27525" stroke="#e27525"/><path d="m20.5127 21.7842-.8704 4.4834.6236.4406 3.8584-3.0062.1169-3.0062z" fill="#f5841f" stroke="#f5841f"/><path d="m11.3929 20.6958.104 3.0062 3.8583 3.0062.6236-.4406-.8704-4.4834z" fill="#f5841f" stroke="#f5841f"/><path d="m20.5906 30.8417.039-1.231-.3378-.2851h-4.9626l-.3248.2851.026 1.231-4.1572-1.9696 1.4551 1.1921 2.9489 2.0344h5.0536l2.962-2.0344 1.442-1.1921z" fill="#c0ac9d" stroke="#c0ac9d"/><path d="m20.2659 26.7082-.6236-.4406h-3.6635l-.6236.4406-.3508 2.9025.3248-.2851h4.9626l.3378.2851z" fill="#161616" stroke="#161616"/><path d="m33.5168 11.3532 1.1043-5.36447-1.6629-4.98873-12.6923 9.3944 4.8846 4.1205 6.8983 2.0085 1.52-1.7752-.6626-.4795 1.0523-.9588-.8054-.622 1.0523-.8034z" fill="#763e1a" stroke="#763e1a"/><path d="m1 5.98873 1.11724 5.36447-.71451.5313 1.06527.8034-.80545.622 1.05228.9588-.66255.4795 1.51997 1.7752 6.89835-2.0085 4.8846-4.1205-12.69233-9.3944z" fill="#763e1a" stroke="#763e1a"/><path d="m32.0489 16.5234-6.8983-2.0085 2.0786 3.1358-3.1049 6.0513 4.1052-.0519h6.1318z" fill="#f5841f" stroke="#f5841f"/><path d="m10.4705 14.5149-6.89828 2.0085-2.29944 7.1267h6.11883l4.10519.0519-3.10487-6.0513z" fill="#f5841f" stroke="#f5841f"/><path d="m19.8241 17.9876.4417-7.5932 2.0007-5.4034h-8.9119l2.0006 5.4034.4417 7.5932.1689 2.3842.013 5.8958h3.6635l.013-5.8958z" fill="#f5841f" stroke="#f5841f"/></g></svg>

package/public/icons/wallets/phantom.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="128" height="128" fill="#AB9FF2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M55.6416 82.1477C50.8744 89.4525 42.8862 98.6966 32.2568 98.6966C27.232 98.6966 22.4004 96.628 22.4004 87.6424C22.4004 64.7584 53.6445 29.3335 82.6339 29.3335C99.1257 29.3335 105.697 40.7755 105.697 53.7689C105.697 70.4471 94.8739 89.5171 84.1156 89.5171C80.7013 89.5171 79.0264 87.6424 79.0264 84.6688C79.0264 83.8931 79.1552 83.0527 79.4129 82.1477C75.7409 88.4182 68.6546 94.2361 62.0192 94.2361C57.1877 94.2361 54.7397 91.1979 54.7397 86.9314C54.7397 85.3799 55.0618 83.7638 55.6416 82.1477ZM80.6133 53.3182C80.6133 57.1044 78.3795 58.9975 75.8806 58.9975C73.3438 58.9975 71.1479 57.1044 71.1479 53.3182C71.1479 49.532 73.3438 47.6389 75.8806 47.6389C78.3795 47.6389 80.6133 49.532 80.6133 53.3182ZM94.8102 53.3184C94.8102 57.1046 92.5763 58.9977 90.0775 58.9977C87.5407 58.9977 85.3447 57.1046 85.3447 53.3184C85.3447 49.5323 87.5407 47.6392 90.0775 47.6392C92.5763 47.6392 94.8102 49.5323 94.8102 53.3184Z" fill="#FFFDF8"/>
+</svg>

package/public/icons/wallets/rabby.svg

@@ -0,0 +1,24 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M438.47 279.097C452.952 246.637 381.359 155.948 312.964 118.165C269.853 88.895 224.93 92.9162 215.832 105.768C195.865 133.972 281.948 157.871 339.518 185.759C327.143 191.152 315.481 200.83 308.623 213.207C287.16 189.697 240.052 169.451 184.777 185.759C147.528 196.749 116.571 222.658 104.606 261.791C101.699 260.495 98.4799 259.774 95.0934 259.774C82.1436 259.774 71.6456 270.308 71.6456 283.301C71.6456 296.295 82.1436 306.828 95.0934 306.828C97.4937 306.828 104.999 305.213 104.999 305.213L224.93 306.085C176.967 382.43 139.063 393.59 139.063 406.817C139.063 420.043 175.331 416.459 188.948 411.529C254.138 387.928 324.155 314.373 336.17 293.199C386.625 299.515 429.028 300.262 438.47 279.097Z" fill="url(#paint0_linear_1758_656)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M339.513 185.763C339.516 185.764 339.519 185.766 339.522 185.767C342.191 184.712 341.759 180.758 341.026 177.652C339.342 170.515 310.284 141.724 282.997 128.829C245.815 111.257 218.435 112.163 214.39 120.262C221.964 135.837 257.077 150.461 293.748 165.733C309.394 172.249 325.323 178.883 339.519 185.76C339.517 185.761 339.515 185.762 339.513 185.763Z" fill="url(#paint1_linear_1758_656)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M292.329 342.523C284.809 339.64 276.315 336.994 266.658 334.594C276.955 316.108 279.115 288.74 269.391 271.437C255.743 247.153 238.612 234.228 198.802 234.228C176.907 234.228 117.955 241.628 116.909 291.006C116.799 296.187 116.906 300.935 117.28 305.301L224.93 306.084C210.417 329.185 196.825 346.318 184.926 359.345C199.213 363.019 211.003 366.103 221.828 368.934C232.098 371.62 241.499 374.079 251.339 376.598C266.182 365.748 280.135 353.917 292.329 342.523Z" fill="url(#paint2_linear_1758_656)"/>
+<path d="M103.169 300.228C107.567 337.737 128.813 352.437 172.227 356.788C215.641 361.138 240.544 358.22 273.698 361.246C301.389 363.774 326.113 377.932 335.285 373.04C343.539 368.636 338.921 352.728 327.876 342.521C313.558 329.291 293.742 320.093 258.875 316.828C265.824 297.739 263.877 270.973 253.085 256.411C237.481 235.355 208.68 225.836 172.227 229.995C134.143 234.34 97.6504 253.153 103.169 300.228Z" fill="url(#paint3_linear_1758_656)"/>
+<defs>
+<linearGradient id="paint0_linear_1758_656" x1="180.439" y1="250.352" x2="435.479" y2="322.433" gradientUnits="userSpaceOnUse">
+<stop stop-color="#8697FF"/>
+<stop offset="1" stop-color="#ABB7FF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1758_656" x1="392.428" y1="245.489" x2="207.876" y2="61.1077" gradientUnits="userSpaceOnUse">
+<stop stop-color="#8697FF"/>
+<stop offset="1" stop-color="#5156D8" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_1758_656" x1="297.446" y1="348.967" x2="120.465" y2="247.558" gradientUnits="userSpaceOnUse">
+<stop stop-color="#465EED"/>
+<stop offset="1" stop-color="#8697FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_1758_656" x1="195.658" y1="248.443" x2="315.581" y2="400.306" gradientUnits="userSpaceOnUse">
+<stop stop-color="#8898FF"/>
+<stop offset="0.983895" stop-color="#6277F1"/>
+</linearGradient>
+</defs>
+</svg>

package/public/icons/wallets/rainbow.svg

@@ -0,0 +1,59 @@
+<svg viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_8_458)">
+  <rect width="120" height="120" fill="url(#paint0_linear_8_458)"/>
+  <path d="M20 38H26C56.9279 38 82 63.0721 82 94V100H94C97.3137 100 100 97.3137 100 94C100 53.1309 66.8691 20 26 20C22.6863 20 20 22.6863 20 26V38Z" fill="url(#paint1_radial_8_458)"/>
+  <path d="M84 94H100C100 97.3137 97.3137 100 94 100H84V94Z" fill="url(#paint2_linear_8_458)"/>
+  <path d="M26 20L26 36H20L20 26C20 22.6863 22.6863 20 26 20Z" fill="url(#paint3_linear_8_458)"/>
+  <path d="M20 36H26C58.0325 36 84 61.9675 84 94V100H66V94C66 71.9086 48.0914 54 26 54H20V36Z" fill="url(#paint4_radial_8_458)"/>
+  <path d="M68 94H84V100H68V94Z" fill="url(#paint5_linear_8_458)"/>
+  <path d="M20 52L20 36L26 36L26 52H20Z" fill="url(#paint6_linear_8_458)"/>
+  <path d="M20 62C20 65.3137 22.6863 68 26 68C40.3594 68 52 79.6406 52 94C52 97.3137 54.6863 100 58 100H68V94C68 70.804 49.196 52 26 52H20V62Z" fill="url(#paint7_radial_8_458)"/>
+  <path d="M52 94H68V100H58C54.6863 100 52 97.3137 52 94Z" fill="url(#paint8_radial_8_458)"/>
+  <path d="M26 68C22.6863 68 20 65.3137 20 62L20 52L26 52L26 68Z" fill="url(#paint9_radial_8_458)"/>
+  </g>
+  <defs>
+  <linearGradient id="paint0_linear_8_458" x1="60" y1="0" x2="60" y2="120" gradientUnits="userSpaceOnUse">
+  <stop stop-color="#174299"/>
+  <stop offset="1" stop-color="#001E59"/>
+  </linearGradient>
+  <radialGradient id="paint1_radial_8_458" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(26 94) rotate(-90) scale(74)">
+  <stop offset="0.770277" stop-color="#FF4000"/>
+  <stop offset="1" stop-color="#8754C9"/>
+  </radialGradient>
+  <linearGradient id="paint2_linear_8_458" x1="83" y1="97" x2="100" y2="97" gradientUnits="userSpaceOnUse">
+  <stop stop-color="#FF4000"/>
+  <stop offset="1" stop-color="#8754C9"/>
+  </linearGradient>
+  <linearGradient id="paint3_linear_8_458" x1="23" y1="20" x2="23" y2="37" gradientUnits="userSpaceOnUse">
+  <stop stop-color="#8754C9"/>
+  <stop offset="1" stop-color="#FF4000"/>
+  </linearGradient>
+  <radialGradient id="paint4_radial_8_458" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(26 94) rotate(-90) scale(58)">
+  <stop offset="0.723929" stop-color="#FFF700"/>
+  <stop offset="1" stop-color="#FF9901"/>
+  </radialGradient>
+  <linearGradient id="paint5_linear_8_458" x1="68" y1="97" x2="84" y2="97" gradientUnits="userSpaceOnUse">
+  <stop stop-color="#FFF700"/>
+  <stop offset="1" stop-color="#FF9901"/>
+  </linearGradient>
+  <linearGradient id="paint6_linear_8_458" x1="23" y1="52" x2="23" y2="36" gradientUnits="userSpaceOnUse">
+  <stop stop-color="#FFF700"/>
+  <stop offset="1" stop-color="#FF9901"/>
+  </linearGradient>
+  <radialGradient id="paint7_radial_8_458" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(26 94) rotate(-90) scale(42)">
+  <stop offset="0.59513" stop-color="#00AAFF"/>
+  <stop offset="1" stop-color="#01DA40"/>
+  </radialGradient>
+  <radialGradient id="paint8_radial_8_458" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(51 97) scale(17 45.3333)">
+  <stop stop-color="#00AAFF"/>
+  <stop offset="1" stop-color="#01DA40"/>
+  </radialGradient>
+  <radialGradient id="paint9_radial_8_458" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(23 69) rotate(-90) scale(17 322.37)">
+  <stop stop-color="#00AAFF"/>
+  <stop offset="1" stop-color="#01DA40"/>
+  </radialGradient>
+  <clipPath id="clip0_8_458">
+  <rect width="120" height="120" fill="white"/>
+  </clipPath>
+  </defs>
+  </svg>

package/public/icons/wallets/walletconnect.svg

@@ -0,0 +1 @@
+<svg fill="none" height="400" viewBox="0 0 400 400" width="400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="a"><path d="m0 0h400v400h-400z"/></clipPath><g clip-path="url(#a)"><circle cx="200" cy="200" fill="#3396ff" r="199.5" stroke="#66b1ff"/><path d="m122.519 148.965c42.791-41.729 112.171-41.729 154.962 0l5.15 5.022c2.14 2.086 2.14 5.469 0 7.555l-17.617 17.18c-1.07 1.043-2.804 1.043-3.874 0l-7.087-6.911c-29.853-29.111-78.253-29.111-108.106 0l-7.59 7.401c-1.07 1.043-2.804 1.043-3.874 0l-17.617-17.18c-2.14-2.086-2.14-5.469 0-7.555zm191.397 35.529 15.679 15.29c2.14 2.086 2.14 5.469 0 7.555l-70.7 68.944c-2.139 2.087-5.608 2.087-7.748 0l-50.178-48.931c-.535-.522-1.402-.522-1.937 0l-50.178 48.931c-2.139 2.087-5.608 2.087-7.748 0l-70.7015-68.945c-2.1396-2.086-2.1396-5.469 0-7.555l15.6795-15.29c2.1396-2.086 5.6085-2.086 7.7481 0l50.1789 48.932c.535.522 1.402.522 1.937 0l50.177-48.932c2.139-2.087 5.608-2.087 7.748 0l50.179 48.932c.535.522 1.402.522 1.937 0l50.179-48.931c2.139-2.087 5.608-2.087 7.748 0z" fill="#fff"/></g></svg>

package/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "./.playground/.nuxt/tsconfig.json"
+}