@1001-digital/components.evm 1.3.0 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1001-digital/components.evm",
-  "version": "1.3.0",
+  "version": "2.0.0",
   "type": "module",
   "sideEffects": [
     "*.css"
@@ -18,10 +18,10 @@
     "@wagmi/vue": ">=0.5.0",
     "viem": ">=2.0.0",
     "vue": "^3.5.0",
-    "@1001-digital/components": "^1.5.0"
+    "@1001-digital/components": "^2.0.0"
   },
   "dependencies": {
-    "@1001-digital/dweb-fetch": "^0.1.5",
+    "@1001-digital/dweb-fetch": "^0.1.6",
     "@1001-digital/wagmi-in-app-wallet": "^0.1.0",
     "@types/qrcode": "^1.5.6",
     "qrcode": "^1.5.4"

package/src/client-only.ts

@@ -11,4 +11,5 @@ export const clientOnlyComponents = [
   'EvmWalletConnectQR',
   'EvmSiwe',
   'EvmSiweDialog',
+  'EvmSidebarProfile',
 ]

package/src/components/EvmConnect.vue

@@ -12,7 +12,7 @@
       class="link muted small"
       @click="resetConnection"
     >
-      <Icon type="chevron-left" />
+      <Icon name="chevron-left" />
       <span>Back</span>
     </Button>
   </template>
@@ -52,7 +52,7 @@
         v-else
         class="default-wallet-icon"
       >
-        <Icon type="wallet" />
+        <Icon name="wallet" />
       </div>
       <span>{{ connector.name }}</span>
     </Button>
@@ -83,7 +83,7 @@
       target="_blank"
       class="link muted small"
     >
-      <Icon type="help" />
+      <Icon name="help" />
       <span>New to wallets?</span>
     </Button>
   </div>

package/src/components/EvmConnectorQR.vue

@@ -9,7 +9,7 @@
     @click="copyUri"
     class="copy-uri tertiary small"
   >
-    <Icon :type="isCopied ? 'check' : 'copy'" />
+    <Icon :name="isCopied ? 'check' : 'copy'" />
     <span>
       {{ isCopied ? 'Copied' : 'Copy Link' }}
     </span>

package/src/components/EvmInAppWalletSetup.vue

@@ -12,14 +12,14 @@
           class="block"
           @click="startGenerate"
         >
-          <Icon type="plus" />
+          <Icon name="plus" />
           <span>Create New Wallet</span>
         </Button>
         <Button
           class="block"
           @click="step = 'restore'"
         >
-          <Icon type="key" />
+          <Icon name="key" />
           <span>Use Existing Recovery Key</span>
         </Button>
       </div>
@@ -27,7 +27,7 @@
         class="link muted small"
         @click="$emit('back')"
       >
-        <Icon type="chevron-left" />
+        <Icon name="chevron-left" />
         <span>Back</span>
       </Button>
     </div>
@@ -71,7 +71,7 @@
         class="link muted small"
         @click="step = 'choose'"
       >
-        <Icon type="chevron-left" />
+        <Icon name="chevron-left" />
         <span>Back</span>
       </Button>
     </div>
@@ -102,7 +102,7 @@
         class="link muted small"
         @click="step = 'choose'"
       >
-        <Icon type="chevron-left" />
+        <Icon name="chevron-left" />
         <span>Back</span>
       </Button>
     </div>

package/src/components/EvmMetaMaskQR.vue

@@ -8,7 +8,7 @@
     class="link muted small"
     @click="$emit('back')"
   >
-    <Icon type="chevron-left" />
+    <Icon name="chevron-left" />
     <span>Back</span>
   </Button>
 </template>

package/src/components/EvmProfile.vue

@@ -41,7 +41,7 @@
         @click="copyAddress"
       >
         <span>{{ shortAddr }}</span>
-        <Icon :type="copied ? 'check' : 'copy'" />
+        <Icon :name="copied ? 'check' : 'copy'" />
       </Button>
     </div>
 
@@ -50,7 +50,7 @@
 
       <EvmSwitchNetwork class-name="block">
         <template #default="{ currentChain }">
-          <Icon type="wallet" />
+          <Icon name="wallet" />
           <span>Switch Network ({{ currentChain?.name || 'Unknown' }})</span>
         </template>
       </EvmSwitchNetwork>
@@ -61,7 +61,7 @@
         :to="`https://app.ens.domains/${ensName}`"
         target="_blank"
       >
-        <Icon type="link" />
+        <Icon name="link" />
         <span>Manage ENS</span>
       </Button>
 

package/src/components/EvmSidebarProfile.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="evm-sidebar-profile">
+    <EvmConnectDialog
+      v-if="!isConnected"
+      className="block"
+    />
+    <EvmProfile
+      v-else
+      class-name="sidebar-profile-trigger"
+      @disconnected="$emit('disconnected')"
+    >
+      <template #default="{ address, display, ensName }">
+        <slot
+          :address="address"
+          :display="display"
+          :ens-name="ensName"
+        >
+          <EvmAvatar :address="address" />
+          <span class="sidebar-profile-name">{{ display }}</span>
+        </slot>
+      </template>
+      <template
+        v-if="$slots.actions"
+        #actions
+      >
+        <slot name="actions" />
+      </template>
+    </EvmProfile>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useConnection } from '@wagmi/vue'
+import EvmAvatar from './EvmAvatar.vue'
+import EvmProfile from './EvmProfile.vue'
+import type { EvmSidebarProfileEmits } from '../types'
+
+defineEmits<EvmSidebarProfileEmits>()
+
+const { isConnected } = useConnection()
+</script>
+
+<style scoped>
+.evm-sidebar-profile {
+  margin-block-start: auto;
+  border-block-start: var(--border);
+  padding: var(--spacer-sm);
+}
+
+:deep(.sidebar-profile-trigger) {
+  display: flex;
+  align-items: center;
+  gap: var(--spacer-sm);
+  inline-size: 100%;
+  padding: var(--spacer-sm);
+  border-radius: var(--radius);
+}
+
+.sidebar-profile-name {
+  font-size: var(--font-sm);
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>

package/src/components/EvmWalletConnectWallets.vue

@@ -10,7 +10,7 @@
 
     <FormItem>
       <template #prefix>
-        <Icon type="lucide:search" />
+        <Icon name="lucide:search" />
       </template>
       <input
         v-model="searchQuery"
@@ -61,7 +61,7 @@
       class="link muted small"
       @click="$emit('back')"
     >
-      <Icon type="chevron-left" />
+      <Icon name="chevron-left" />
       <span>Back</span>
     </Button>
   </div>

package/src/composables/gasPrice.ts

@@ -1,10 +1,10 @@
-import { ref, computed, watch, type Ref, type WatchStopHandle } from 'vue'
+import { ref, computed, watch, onScopeDispose, type Ref } from 'vue'
 import { formatEther, formatGwei } from 'viem'
 import { getGasPrice } from '@wagmi/core'
 import { useConfig, useBlockNumber } from '@wagmi/vue'
 
-let priceWatcher: WatchStopHandle | null = null
 const price: Ref<bigint> = ref(0n)
+let watcherCount = 0
 
 export const useGasPrice = () => {
   const config = useConfig()
@@ -14,10 +14,15 @@ export const useGasPrice = () => {
     price.value = await getGasPrice(config)
   }
 
-  if (!priceWatcher) {
-    updatePrice()
-    priceWatcher = watch(blockNumber, () => updatePrice())
-  }
+  if (watcherCount === 0) updatePrice()
+  watcherCount++
+
+  const stopWatcher = watch(blockNumber, () => updatePrice())
+
+  onScopeDispose(() => {
+    stopWatcher()
+    watcherCount--
+  })
 
   const unitPrice = computed(() => ({
     wei: price.value,

package/src/composables/priceFeed.ts

@@ -74,11 +74,12 @@ export const usePriceFeed = () => {
   const ethUSD = computed(() =>
     state.ethUSDRaw ? state.ethUSDRaw / BigInt(1e8) : 0n,
   )
-  const ethUSC = computed(() =>
+  // Chainlink returns 8 decimals; dividing by 1e6 keeps 2 decimal digits (cents)
+  const ethUSDCents = computed(() =>
     state.ethUSDRaw ? state.ethUSDRaw / BigInt(1e6) : 0n,
   )
   const ethUSDFormatted = computed(() =>
-    formatPrice(Number(ethUSC.value) / 100, 2),
+    formatPrice(Number(ethUSDCents.value) / 100, 2),
   )
 
   const weiToUSD = (wei: bigint) => {
@@ -108,7 +109,7 @@ export const usePriceFeed = () => {
   return {
     ethUSDRaw: computed(() => state.ethUSDRaw),
     ethUSD,
-    ethUSC,
+    ethUSDCents,
     ethUSDFormatted,
     weiToUSD,
     fetchPrice,

package/src/composables/siwe.ts

@@ -47,6 +47,10 @@ export const useSiwe = () => {
 
     const nonce = await options.getNonce()
 
+    if (typeof window === 'undefined') {
+      throw new Error('SIWE sign-in requires a browser environment')
+    }
+
     const messageParams: SiweMessageParams = {
       domain: options.domain || window.location.host,
       address: currentAddress,

package/src/index.ts

@@ -11,6 +11,7 @@ export type {
   EvmConnectDialogEmits,
   EvmProfileProps,
   EvmProfileEmits,
+  EvmSidebarProfileEmits,
   EvmSwitchNetworkProps,
   EvmSwitchNetworkEmits,
   EvmConnectorQRProps,
@@ -80,6 +81,7 @@ export { default as EvmConnect } from './components/EvmConnect.vue'
 export { default as EvmConnectDialog } from './components/EvmConnectDialog.vue'
 export { default as EvmConnectionStatus } from './components/EvmConnectionStatus.vue'
 export { default as EvmProfile } from './components/EvmProfile.vue'
+export { default as EvmSidebarProfile } from './components/EvmSidebarProfile.vue'
 export { default as EvmSwitchNetwork } from './components/EvmSwitchNetwork.vue'
 export { default as EvmConnectorQR } from './components/EvmConnectorQR.vue'
 export { default as EvmMetaMaskQR } from './components/EvmMetaMaskQR.vue'

package/src/types.ts

@@ -136,6 +136,11 @@ export interface EvmSiweEmits {
   error: [error: string]
 }
 
+// EvmSidebarProfile
+export interface EvmSidebarProfileEmits {
+  disconnected: []
+}
+
 // EvmSiweDialog
 export interface EvmSiweDialogProps extends EvmSiweProps {
   className?: string

package/src/utils/cache.ts

@@ -29,6 +29,9 @@ export function createCache<T>(ttl: number, max: number) {
       entries.delete(key)
       return undefined
     }
+    // Move to end for LRU ordering
+    entries.delete(key)
+    entries.set(key, entry)
     return entry.data
   }