@1001-digital/components.evm 1.3.1 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1001-digital/components.evm",
-  "version": "1.3.1",
+  "version": "2.0.0",
   "type": "module",
   "sideEffects": [
     "*.css"
@@ -18,7 +18,7 @@
     "@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.6",

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/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/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
   }