@1001-digital/components.evm 1.2.2 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1001-digital/components.evm",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "type": "module",
   "sideEffects": [
     "*.css"
@@ -13,13 +13,15 @@
     "src"
   ],
   "peerDependencies": {
+    "@vueuse/core": ">=14.0.0",
     "@wagmi/core": ">=3.0.0",
     "@wagmi/vue": ">=0.5.0",
     "viem": ">=2.0.0",
     "vue": "^3.5.0",
-    "@1001-digital/components": "^1.2.3"
+    "@1001-digital/components": "^1.5.0"
   },
   "dependencies": {
+    "@1001-digital/dweb-fetch": "^0.1.5",
     "@1001-digital/wagmi-in-app-wallet": "^0.1.0",
     "@types/qrcode": "^1.5.6",
     "qrcode": "^1.5.4"
@@ -27,7 +29,7 @@
   "devDependencies": {
     "@wagmi/core": "^3.4.0",
     "@wagmi/vue": "^0.5.0",
-    "viem": "^2.45.0",
-    "vue": "^3.5.0"
+    "viem": "^2.47.1",
+    "vue": "^3.5.30"
   }
 }

package/src/client-only.ts

@@ -0,0 +1,14 @@
+// Components that require browser APIs and must be rendered client-only
+export const clientOnlyComponents = [
+  'EvmAccount',
+  'EvmConnect',
+  'EvmConnectDialog',
+  'EvmConnectionStatus',
+  'EvmConnectorQR',
+  'EvmMetaMaskQR',
+  'EvmInAppWalletSetup',
+  'EvmTransactionFlow',
+  'EvmWalletConnectQR',
+  'EvmSiwe',
+  'EvmSiweDialog',
+]

package/src/components/EvmAccount.vue

@@ -9,13 +9,11 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import type { Address } from 'viem'
 import { useConnection } from '@wagmi/vue'
 import { shortAddress } from '../utils/addresses'
+import type { EvmAccountProps } from '../types'
 
-const props = defineProps<{
-  address?: Address
-}>()
+const props = defineProps<EvmAccountProps>()
 const address = computed(() => props.address)
 
 const { address: currentAddress } = useConnection()

package/src/components/EvmAvatar.vue

@@ -21,16 +21,13 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import type { Address } from 'viem'
 import { useConnection } from '@wagmi/vue'
 import { useEnsWithAvatar } from '../composables/ens'
-import { useResolveUri } from '../composables/uri'
+import { useResolvedUrl } from '../composables/uri'
 import { Opepicon } from '@1001-digital/components'
+import type { EvmAvatarProps } from '../types'
 
-const props = defineProps<{
-  address?: Address
-  large?: boolean
-}>()
+const props = defineProps<EvmAvatarProps>()
 const address = computed(() => props.address)
 
 const { address: currentAddress } = useConnection()
@@ -40,10 +37,9 @@ const isCurrent = computed<boolean>(
 )
 
 const { data: ensData } = useEnsWithAvatar(address)
-const resolve = useResolveUri()
 
 const ens = computed(() => ensData.value?.ens || null)
-const src = computed(() => resolve(ensData.value?.data?.avatar))
+const src = useResolvedUrl(() => ensData.value?.data?.avatar)
 </script>
 
 <style scoped>

package/src/components/EvmConnect.vue

@@ -97,6 +97,7 @@ import { Button, Icon, Alert, Loading } from '@1001-digital/components'
 import EvmMetaMaskQR from './EvmMetaMaskQR.vue'
 import EvmWalletConnectWallets from './EvmWalletConnectWallets.vue'
 import EvmInAppWalletSetup from './EvmInAppWalletSetup.vue'
+import type { EvmConnectEmits } from '../types'
 
 import coinbaseIcon from '../assets/wallets/coinbase.svg'
 import metamaskIcon from '../assets/wallets/metamask.svg'
@@ -123,10 +124,7 @@ const PRIORITY: Record<string, number> = {
   'Base Account': 10,
 }
 
-const emit = defineEmits<{
-  connecting: []
-  connected: []
-}>()
+const emit = defineEmits<EvmConnectEmits>()
 
 const chainId = useChainId()
 const connectors = useConnectors()

package/src/components/EvmConnectDialog.vue

@@ -33,15 +33,11 @@ import { useConnection } from '@wagmi/vue'
 import { Button, Dialog } from '@1001-digital/components'
 import EvmAccount from './EvmAccount.vue'
 import EvmConnect from './EvmConnect.vue'
+import type { EvmConnectDialogProps, EvmConnectDialogEmits } from '../types'
 
-defineProps<{
-  className?: string
-}>()
+defineProps<EvmConnectDialogProps>()
 
-const emit = defineEmits<{
-  connected: [{ address: `0x${string}` | undefined }]
-  disconnected: []
-}>()
+const emit = defineEmits<EvmConnectDialogEmits>()
 
 const { address, isConnected } = useConnection()
 

package/src/components/EvmConnectorQR.vue

@@ -21,10 +21,9 @@ import { ref, watch, onMounted } from 'vue'
 import QRCode from 'qrcode'
 import { useClipboard } from '@vueuse/core'
 import { Button, Icon } from '@1001-digital/components'
+import type { EvmConnectorQRProps } from '../types'
 
-const props = defineProps<{
-  uri: string
-}>()
+const props = defineProps<EvmConnectorQRProps>()
 
 const qrCanvas = ref<HTMLCanvasElement | null>(null)
 const { copy, copied: isCopied } = useClipboard()

package/src/components/EvmInAppWalletSetup.vue

@@ -127,20 +127,16 @@ import { useConnect, useConnectors } from '@wagmi/vue'
 import { Button, Icon, Alert, FormCheckbox, Loading } from '@1001-digital/components'
 import EvmSeedPhraseInput from './EvmSeedPhraseInput.vue'
 import { prepareInAppWallet } from '../connectors/inAppWallet'
+import type { EvmInAppWalletSetupProps, EvmInAppWalletSetupEmits } from '../types'
 
 const props = withDefaults(
-  defineProps<{
-    note?: string
-  }>(),
+  defineProps<EvmInAppWalletSetupProps>(),
   {
     note: 'Create a browser-based wallet stored locally on this device. Only you have access to your keys.',
   },
 )
 
-const emit = defineEmits<{
-  connected: []
-  back: []
-}>()
+const emit = defineEmits<EvmInAppWalletSetupEmits>()
 
 const connectors = useConnectors()
 const { mutateAsync: connectAsync } = useConnect()

package/src/components/EvmMetaMaskQR.vue

@@ -16,14 +16,11 @@
 <script setup lang="ts">
 import EvmConnectorQR from './EvmConnectorQR.vue'
 import { Button, Icon } from '@1001-digital/components'
+import type { EvmMetaMaskQRProps, EvmMetaMaskQREmits } from '../types'
 
-defineProps<{
-  uri: string
-}>()
+defineProps<EvmMetaMaskQRProps>()
 
-defineEmits<{
-  back: []
-}>()
+defineEmits<EvmMetaMaskQREmits>()
 </script>
 
 <style scoped>

package/src/components/EvmProfile.vue

@@ -81,18 +81,15 @@ import { useConnection, useDisconnect } from '@wagmi/vue'
 import { useClipboard } from '@vueuse/core'
 import { useConfirm, Button, Dialog, Icon } from '@1001-digital/components'
 import { useEnsProfile } from '../composables/ens'
-import { useResolveUri } from '../composables/uri'
+import { useResolvedUrl } from '../composables/uri'
 import { shortAddress } from '../utils/addresses'
 import EvmAvatar from './EvmAvatar.vue'
 import EvmSwitchNetwork from './EvmSwitchNetwork.vue'
+import type { EvmProfileProps, EvmProfileEmits } from '../types'
 
-defineProps<{
-  className?: string
-}>()
+defineProps<EvmProfileProps>()
 
-const emit = defineEmits<{
-  disconnected: []
-}>()
+const emit = defineEmits<EvmProfileEmits>()
 
 const { address } = useConnection()
 const { mutate: disconnectWallet } = useDisconnect()
@@ -100,11 +97,10 @@ const { confirm } = useConfirm()
 const { data: ensData } = useEnsProfile(address)
 
 const { copy, copied } = useClipboard()
-const resolve = useResolveUri()
 
 const ensName = computed(() => ensData.value?.ens || null)
-const ensAvatar = computed(() => resolve(ensData.value?.data?.avatar))
-const ensHeader = computed(() => resolve(ensData.value?.data?.header))
+const ensAvatar = useResolvedUrl(() => ensData.value?.data?.avatar)
+const ensHeader = useResolvedUrl(() => ensData.value?.data?.header)
 
 const shortAddr = computed(() =>
   address.value ? shortAddress(address.value) : '',

package/src/components/EvmSeedPhraseInput.vue

@@ -33,17 +33,11 @@
 <script setup lang="ts">
 import { ref, watch, computed, onMounted } from 'vue'
 import { english } from 'viem/accounts'
+import type { EvmSeedPhraseInputProps, EvmSeedPhraseInputEmits } from '../types'
 
-const props = defineProps<{
-  modelValue?: string
-  disabled?: boolean
-}>()
+const props = defineProps<EvmSeedPhraseInputProps>()
 
-const emit = defineEmits<{
-  'update:modelValue': [value: string]
-  valid: [isValid: boolean]
-  submit: []
-}>()
+const emit = defineEmits<EvmSeedPhraseInputEmits>()
 
 const wordSet = new Set(english)
 

package/src/components/EvmSiwe.vue

@@ -51,24 +51,13 @@ import type { Config } from '@wagmi/vue'
 import { Button, Alert, Loading } from '@1001-digital/components'
 import { createSiweMessage } from '../utils/siwe'
 import { useSiwe } from '../composables/siwe'
+import type { EvmSiweProps, EvmSiweEmits } from '../types'
 
 type Step = 'idle' | 'signing' | 'verifying' | 'complete' | 'error'
 
-const props = defineProps<{
-  getNonce: () => Promise<string>
-  verify: (message: string, signature: string) => Promise<boolean>
-  domain?: string
-  statement?: string
-  uri?: string
-  resources?: string[]
-  requestId?: string
-  expirationTime?: string
-}>()
-
-const emit = defineEmits<{
-  authenticated: [{ address: `0x${string}`; chainId: number }]
-  error: [error: string]
-}>()
+const props = defineProps<EvmSiweProps>()
+
+const emit = defineEmits<EvmSiweEmits>()
 
 function isUserRejection(e: unknown): boolean {
   const re = /reject|denied|cancel/i

package/src/components/EvmSiweDialog.vue

@@ -45,24 +45,11 @@ import { ref, watch } from 'vue'
 import { Button, Dialog } from '@1001-digital/components'
 import EvmSiwe from './EvmSiwe.vue'
 import { useSiwe } from '../composables/siwe'
+import type { EvmSiweDialogProps, EvmSiweDialogEmits } from '../types'
 
-const props = defineProps<{
-  className?: string
-  getNonce: () => Promise<string>
-  verify: (message: string, signature: string) => Promise<boolean>
-  domain?: string
-  statement?: string
-  uri?: string
-  resources?: string[]
-  requestId?: string
-  expirationTime?: string
-}>()
+const props = defineProps<EvmSiweDialogProps>()
 
-const emit = defineEmits<{
-  authenticated: [{ address: `0x${string}`; chainId: number }]
-  signedOut: []
-  error: [error: string]
-}>()
+const emit = defineEmits<EvmSiweDialogEmits>()
 
 const { isAuthenticated, session, signOut } = useSiwe()
 

package/src/components/EvmSwitchNetwork.vue

@@ -56,15 +56,11 @@ import { ref, computed } from 'vue'
 import type { Chain } from 'viem'
 import { useConfig, useConnection, useSwitchChain } from '@wagmi/vue'
 import { Button, Dialog, Icon, Alert, Loading } from '@1001-digital/components'
+import type { EvmSwitchNetworkProps, EvmSwitchNetworkEmits } from '../types'
 
-defineProps<{
-  className?: string
-}>()
+defineProps<EvmSwitchNetworkProps>()
 
-const emit = defineEmits<{
-  switched: [{ chainId: number; name: string }]
-  error: [{ message: string }]
-}>()
+const emit = defineEmits<EvmSwitchNetworkEmits>()
 
 const config = useConfig()
 const { chainId: currentChainId } = useConnection()

package/src/components/EvmTransactionFlow.vue

@@ -80,12 +80,7 @@ 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 { useEnsureChainIdCheck, useBlockExplorer } from '../composables/chainId'
-
-interface TextConfig {
-  title?: Record<string, string>
-  lead?: Record<string, string>
-  action?: Record<string, string>
-}
+import type { TransactionFlowText, EvmTransactionFlowProps, EvmTransactionFlowEmits } from '../types'
 
 type Step =
   | 'idle'
@@ -116,19 +111,10 @@ const defaultText = {
     confirm: 'Execute',
     error: 'Try Again',
   },
-} satisfies TextConfig
+} satisfies TransactionFlowText
 
 const props = withDefaults(
-  defineProps<{
-    chain?: string
-    text?: TextConfig
-    request?: () => Promise<Hash>
-    delayAfter?: number
-    delayAutoclose?: number
-    skipConfirmation?: boolean
-    autoCloseSuccess?: boolean
-    dismissable?: boolean
-  }>(),
+  defineProps<EvmTransactionFlowProps>(),
   {
     delayAfter: 2000,
     delayAutoclose: 2000,
@@ -156,12 +142,9 @@ const { connector } = useConnection()
 const blockExplorer = useBlockExplorer(props.chain)
 const toast = useToast()
 
-const emit = defineEmits<{
-  complete: [receipt: TransactionReceipt]
-  cancel: []
-}>()
+const emit = defineEmits<EvmTransactionFlowEmits>()
 
-const text = computed<Required<TextConfig>>(() => ({
+const text = computed<Required<TransactionFlowText>>(() => ({
   title: { ...defaultText.title, ...props.text?.title },
   lead: { ...defaultText.lead, ...props.text?.lead },
   action: { ...defaultText.action, ...props.text?.action },

package/src/components/EvmWalletConnectQR.vue

@@ -6,8 +6,7 @@
 
 <script setup lang="ts">
 import EvmConnectorQR from './EvmConnectorQR.vue'
+import type { EvmWalletConnectQRProps } from '../types'
 
-defineProps<{
-  uri: string
-}>()
+defineProps<EvmWalletConnectQRProps>()
 </script>

package/src/components/EvmWalletConnectWallets.vue

@@ -75,14 +75,11 @@ import {
   useWalletExplorer,
   type ExplorerWallet,
 } from '../composables/walletExplorer'
+import type { EvmWalletConnectWalletsProps, EvmWalletConnectWalletsEmits } from '../types'
 
-const props = defineProps<{
-  uri: string
-}>()
+const props = defineProps<EvmWalletConnectWalletsProps>()
 
-defineEmits<{
-  back: []
-}>()
+defineEmits<EvmWalletConnectWalletsEmits>()
 
 const explorer = useWalletExplorer()
 const searchQuery = ref('')

package/src/composables/uri.ts

@@ -1,12 +1,41 @@
+import { ref, watch, toValue, type MaybeRefOrGetter, type Ref } from 'vue'
+import { createDwebFetch, type DwebClient } from '@1001-digital/dweb-fetch'
 import { useEvmConfig } from '../config'
-import { resolveUri } from '../utils/uri'
 
-export const useResolveUri = () => {
-  const evmConfig = useEvmConfig()
+function toBaseUrl(gateway: string): string {
+  return gateway.replace(/\/(ipfs|ipns)\/?$/, '').replace(/\/+$/, '')
+}
+
+export function useDwebClient(): DwebClient {
+  const config = useEvmConfig()
+
+  return createDwebFetch({
+    ipfs: config.ipfsGateway
+      ? { gateways: [toBaseUrl(config.ipfsGateway)] }
+      : undefined,
+    arweave: config.arweaveGateway
+      ? { gateways: [toBaseUrl(config.arweaveGateway)] }
+      : undefined,
+  })
+}
+
+export function useResolvedUrl(
+  uri: MaybeRefOrGetter<string | undefined>,
+): Ref<string> {
+  const dweb = useDwebClient()
+  const resolved = ref('')
+
+  watch(
+    () => toValue(uri),
+    async (val) => {
+      if (!val) {
+        resolved.value = ''
+        return
+      }
+      resolved.value = await dweb.resolveUrl(val)
+    },
+    { immediate: true },
+  )
 
-  return (uri?: string) =>
-    resolveUri(uri, {
-      ipfsGateway: evmConfig.ipfsGateway,
-      arweaveGateway: evmConfig.arweaveGateway,
-    })
+  return resolved
 }

package/src/index.ts

@@ -2,6 +2,36 @@
 export { EvmConfigKey, defaultEvmConfig, useEvmConfig } from './config'
 export type { EvmConfig, EvmChainConfig } from './config'
 
+// Component types
+export type {
+  EvmAccountProps,
+  EvmAvatarProps,
+  EvmConnectEmits,
+  EvmConnectDialogProps,
+  EvmConnectDialogEmits,
+  EvmProfileProps,
+  EvmProfileEmits,
+  EvmSwitchNetworkProps,
+  EvmSwitchNetworkEmits,
+  EvmConnectorQRProps,
+  EvmMetaMaskQRProps,
+  EvmMetaMaskQREmits,
+  EvmWalletConnectQRProps,
+  EvmWalletConnectWalletsProps,
+  EvmWalletConnectWalletsEmits,
+  TransactionFlowText,
+  EvmTransactionFlowProps,
+  EvmTransactionFlowEmits,
+  EvmSeedPhraseInputProps,
+  EvmSeedPhraseInputEmits,
+  EvmInAppWalletSetupProps,
+  EvmInAppWalletSetupEmits,
+  EvmSiweProps,
+  EvmSiweEmits,
+  EvmSiweDialogProps,
+  EvmSiweDialogEmits,
+} from './types'
+
 // Utils
 export { createCache } from './utils/cache'
 export { shortAddress } from './utils/addresses'
@@ -16,8 +46,8 @@ export {
 } from './utils/ens'
 export type { EnsProfile } from './utils/ens'
 export { stringifyJSON, parseJSON, formatPrice } from './utils/price'
-export { resolveUri } from './utils/uri'
-export type { ResolveUriOptions } from './utils/uri'
+export { createDwebFetch } from '@1001-digital/dweb-fetch'
+export type { DwebClient, DwebFetchConfig } from '@1001-digital/dweb-fetch'
 export { createSiweMessage } from './utils/siwe'
 export type { SiweMessageParams } from './utils/siwe'
 
@@ -30,7 +60,7 @@ export {
   useEnsureChainIdCheck,
 } from './composables/chainId'
 export { useEns, useEnsWithAvatar, useEnsProfile } from './composables/ens'
-export { useResolveUri } from './composables/uri'
+export { useDwebClient, useResolvedUrl } from './composables/uri'
 export { useGasPrice } from './composables/gasPrice'
 export { usePriceFeed } from './composables/priceFeed'
 export { useWalletExplorer } from './composables/walletExplorer'
@@ -41,6 +71,8 @@ export type { SiweSession, UseSiweOptions } from './composables/siwe'
 // Connectors
 export { inAppWallet, prepareInAppWallet } from './connectors/inAppWallet'
 
+export { clientOnlyComponents } from './client-only'
+
 // Components
 export { default as EvmAccount } from './components/EvmAccount.vue'
 export { default as EvmAvatar } from './components/EvmAvatar.vue'

package/src/types.ts

@@ -0,0 +1,148 @@
+import type { Address, Hash, TransactionReceipt } from 'viem'
+
+// EvmAccount
+export interface EvmAccountProps {
+  address?: Address
+}
+
+// EvmAvatar
+export interface EvmAvatarProps {
+  address?: Address
+  large?: boolean
+}
+
+// EvmConnect
+export interface EvmConnectEmits {
+  connecting: []
+  connected: []
+}
+
+// EvmConnectDialog
+export interface EvmConnectDialogProps {
+  className?: string
+}
+
+export interface EvmConnectDialogEmits {
+  connected: [{ address: `0x${string}` | undefined }]
+  disconnected: []
+}
+
+// EvmProfile
+export interface EvmProfileProps {
+  className?: string
+}
+
+export interface EvmProfileEmits {
+  disconnected: []
+}
+
+// EvmSwitchNetwork
+export interface EvmSwitchNetworkProps {
+  className?: string
+}
+
+export interface EvmSwitchNetworkEmits {
+  switched: [{ chainId: number; name: string }]
+  error: [{ message: string }]
+}
+
+// EvmConnectorQR
+export interface EvmConnectorQRProps {
+  uri: string
+}
+
+// EvmMetaMaskQR
+export interface EvmMetaMaskQRProps {
+  uri: string
+}
+
+export interface EvmMetaMaskQREmits {
+  back: []
+}
+
+// EvmWalletConnectQR
+export interface EvmWalletConnectQRProps {
+  uri: string
+}
+
+// EvmWalletConnectWallets
+export interface EvmWalletConnectWalletsProps {
+  uri: string
+}
+
+export interface EvmWalletConnectWalletsEmits {
+  back: []
+}
+
+// EvmTransactionFlow
+export interface TransactionFlowText {
+  title?: Record<string, string>
+  lead?: Record<string, string>
+  action?: Record<string, string>
+}
+
+export interface EvmTransactionFlowProps {
+  chain?: string
+  text?: TransactionFlowText
+  request?: () => Promise<Hash>
+  delayAfter?: number
+  delayAutoclose?: number
+  skipConfirmation?: boolean
+  autoCloseSuccess?: boolean
+  dismissable?: boolean
+}
+
+export interface EvmTransactionFlowEmits {
+  complete: [receipt: TransactionReceipt]
+  cancel: []
+}
+
+// EvmSeedPhraseInput
+export interface EvmSeedPhraseInputProps {
+  modelValue?: string
+  disabled?: boolean
+}
+
+export interface EvmSeedPhraseInputEmits {
+  'update:modelValue': [value: string]
+  valid: [isValid: boolean]
+  submit: []
+}
+
+// EvmInAppWalletSetup
+export interface EvmInAppWalletSetupProps {
+  note?: string
+}
+
+export interface EvmInAppWalletSetupEmits {
+  connected: []
+  back: []
+}
+
+// EvmSiwe
+export interface EvmSiweProps {
+  getNonce: () => Promise<string>
+  verify: (message: string, signature: string) => Promise<boolean>
+  domain?: string
+  statement?: string
+  uri?: string
+  resources?: string[]
+  requestId?: string
+  expirationTime?: string
+}
+
+export interface EvmSiweEmits {
+  authenticated: [{ address: `0x${string}`; chainId: number }]
+  error: [error: string]
+}
+
+// EvmSiweDialog
+export interface EvmSiweDialogProps extends EvmSiweProps {
+  className?: string
+}
+
+export interface EvmSiweDialogEmits {
+  authenticated: [{ address: `0x${string}`; chainId: number }]
+  signedOut: []
+  error: [error: string]
+}

package/src/utils/uri.ts

@@ -1,24 +0,0 @@
-export interface ResolveUriOptions {
-  ipfsGateway?: string
-  arweaveGateway?: string
-}
-
-const DEFAULT_IPFS_GATEWAY = 'https://ipfs.io/ipfs/'
-const DEFAULT_ARWEAVE_GATEWAY = 'https://arweave.net/'
-
-export const resolveUri = (
-  uri?: string,
-  options?: ResolveUriOptions,
-): string => {
-  if (!uri) return ''
-
-  const ipfs = options?.ipfsGateway || DEFAULT_IPFS_GATEWAY
-  const ar = options?.arweaveGateway || DEFAULT_ARWEAVE_GATEWAY
-
-  if (uri.startsWith('data:')) return uri
-  if (uri.startsWith('ipfs://')) return ipfs + uri.replace('ipfs://', '')
-  if (uri.startsWith('ar://')) return ar + uri.replace('ar://', '')
-  if (uri.startsWith('Qm') || uri.startsWith('baf')) return ipfs + uri
-
-  return uri
-}