@1001-digital/components.evm 1.3.1 → 2.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1001-digital/components.evm",
-  "version": "1.3.1",
+  "version": "2.0.1",
   "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.1"
   },
   "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/EvmTransactionFlow.vue

@@ -20,9 +20,11 @@
       v-if="step === 'requesting'"
       spinner
       stacked
-      :txt="connector?.name
-        ? `Requesting signature from ${connector.name}...`
-        : text.lead[step] || ''"
+      :txt="
+        connector?.name
+          ? `Requesting signature from ${connector.name}...`
+          : text.lead[step] || ''
+      "
     />
 
     <p v-if="step !== 'requesting' && step !== 'error' && text.lead[step]">
@@ -78,9 +80,20 @@ import { ref, computed, watch, onBeforeUnmount } from 'vue'
 import { waitForTransactionReceipt, watchChainId } from '@wagmi/core'
 import { useConfig, useConnection, type Config } from '@wagmi/vue'
 import type { TransactionReceipt, Hash } from 'viem'
-import { Dialog, Loading, Alert, Button, useToast, delay } from '@1001-digital/components'
+import {
+  Dialog,
+  Loading,
+  Alert,
+  Button,
+  useToast,
+  delay,
+} from '@1001-digital/components'
 import { useEnsureChainIdCheck, useBlockExplorer } from '../composables/chainId'
-import type { TransactionFlowText, EvmTransactionFlowProps, EvmTransactionFlowEmits } from '../types'
+import type {
+  TransactionFlowText,
+  EvmTransactionFlowProps,
+  EvmTransactionFlowEmits,
+} from '../types'
 
 type Step =
   | 'idle'
@@ -113,16 +126,13 @@ const defaultText = {
   },
 } satisfies TransactionFlowText
 
-const props = withDefaults(
-  defineProps<EvmTransactionFlowProps>(),
-  {
-    delayAfter: 2000,
-    delayAutoclose: 2000,
-    skipConfirmation: false,
-    autoCloseSuccess: true,
-    dismissable: true,
-  },
-)
+const props = withDefaults(defineProps<EvmTransactionFlowProps>(), {
+  delayAfter: 2000,
+  delayAutoclose: 2000,
+  skipConfirmation: false,
+  autoCloseSuccess: true,
+  dismissable: true,
+})
 
 function isUserRejection(e: unknown): boolean {
   const re = /reject|denied|cancel/i
@@ -246,7 +256,9 @@ const initializeRequest = async (request = cachedRequest.value) => {
   const start = Date.now()
   progressTimer = setInterval(() => {
     const elapsed = (Date.now() - start) / 1000
-    toast.update(toastId, { progress: Math.round(90 * (1 - Math.exp(-elapsed / 15))) })
+    toast.update(toastId, {
+      progress: Math.round(90 * (1 - Math.exp(-elapsed / 15))),
+    })
   }, 500)
 
   try {
@@ -309,22 +321,24 @@ defineExpose({
 })
 </script>
 
-<style>
-.transaction-flow > section {
-  display: grid;
-  gap: var(--spacer);
+<style scoped>
+.transaction-flow {
+  &:deep(> section) {
+    display: grid;
+    gap: var(--spacer);
 
-  .text {
-    width: 100%;
-    height: min-content;
-  }
+    .text {
+      width: 100%;
+      height: min-content;
+    }
 
-  p {
-    white-space: pre-wrap;
-    width: 100%;
+    p {
+      white-space: pre-wrap;
+      width: 100%;
 
-    a {
-      text-decoration: underline;
+      a {
+        text-decoration: underline;
+      }
     }
   }
 }

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
   }