@1001-digital/components 0.0.4 → 1.0.0

package/src/evm/components/EvmProfile.vue

@@ -0,0 +1,183 @@
+<template>
+  <Button
+    @click="dialogOpen = true"
+    :class="className"
+  >
+    <slot
+      :address="address"
+      :display="display"
+      :ens-name="ensName"
+      :ens-avatar="ensAvatar"
+    >
+      {{ display }}
+    </slot>
+  </Button>
+
+  <Dialog
+    v-model:open="dialogOpen"
+    class="evm-profile"
+    title="Account"
+  >
+    <div class="profile-header">
+      <div
+        class="banner"
+        :style="
+          ensHeader ? { backgroundImage: `url(${ensHeader})` } : undefined
+        "
+      />
+      <div class="avatar-wrapper">
+        <EvmAvatar :address="address" large />
+      </div>
+    </div>
+
+    <div class="profile-identity">
+      <strong v-if="ensName">{{ ensName }}</strong>
+      <Button
+        class="link muted small"
+        @click="copyAddress"
+      >
+        <span>{{ shortAddr }}</span>
+        <Icon :type="copied ? 'check' : 'copy'" />
+      </Button>
+    </div>
+
+    <div class="profile-actions">
+      <EvmSwitchNetwork>
+        <template #default="{ currentChain }">
+          <Icon type="wallet" />
+          <span>Switch Network ({{ currentChain?.name || 'Unknown' }})</span>
+        </template>
+      </EvmSwitchNetwork>
+
+      <Button
+        v-if="ensName"
+        :to="`https://app.ens.domains/${ensName}`"
+        target="_blank"
+      >
+        <Icon type="link" />
+        <span>Manage ENS</span>
+      </Button>
+
+      <Button
+        class="danger"
+        @click="disconnect"
+      >
+        <span>Disconnect</span>
+      </Button>
+    </div>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, nextTick } from 'vue'
+import { useConnection, useDisconnect } from '@wagmi/vue'
+import { useClipboard } from '@vueuse/core'
+import { useConfirm } from '../../base/composables/confirm'
+import { useEnsProfile } from '../composables/ens'
+import { useResolveUri } from '../composables/uri'
+import { shortAddress } from '../utils/addresses'
+import Button from '../../base/components/Button.vue'
+import Dialog from '../../base/components/Dialog.vue'
+import Icon from '../../base/components/Icon.vue'
+import EvmAvatar from './EvmAvatar.vue'
+import EvmSwitchNetwork from './EvmSwitchNetwork.vue'
+
+defineProps<{
+  className?: string
+}>()
+
+const emit = defineEmits<{
+  disconnected: []
+}>()
+
+const { address } = useConnection()
+const { mutate: disconnectWallet } = useDisconnect()
+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 shortAddr = computed(() =>
+  address.value ? shortAddress(address.value) : '',
+)
+
+const display = computed(() => ensName.value || shortAddr.value)
+
+const dialogOpen = ref(false)
+
+const copyAddress = () => {
+  if (address.value) copy(address.value)
+}
+
+const disconnect = async () => {
+  const confirmed = await confirm({
+    title: 'Disconnect Wallet',
+    description: 'Are you sure you want to disconnect your wallet?',
+    okText: 'Disconnect',
+  })
+
+  if (!confirmed) return
+
+  dialogOpen.value = false
+  await nextTick()
+  disconnectWallet()
+  emit('disconnected')
+}
+</script>
+
+<style scoped>
+.profile-header {
+  position: relative;
+  margin: calc(var(--spacer) * -3) calc(var(--spacer) * -1) 0;
+  margin-bottom: 0;
+  z-index: -1;
+
+  .banner {
+    aspect-ratio: 3 / 1;
+    width: 100%;
+    height: auto;
+    background-color: var(--gray-z-1);
+    background-size: cover;
+    background-position: center;
+    border-bottom: var(--border);
+  }
+
+  .avatar-wrapper {
+    display: flex;
+    justify-content: center;
+    margin-top: -10%;
+    position: relative;
+    z-index: 1;
+  }
+
+  :deep(.evm-avatar) {
+    border: 3px solid var(--background);
+  }
+}
+
+.profile-identity {
+  display: grid;
+  justify-items: center;
+  gap: var(--spacer-sm);
+
+  > strong {
+    font-size: var(--font-lg);
+  }
+}
+
+.profile-actions {
+  display: grid;
+  gap: var(--spacer);
+  padding-block-start: var(--spacer);
+
+  & :deep(.button),
+  & :deep(button) {
+    width: 100%;
+  }
+}
+</style>

package/src/evm/components/EvmSwitchNetwork.vue

@@ -0,0 +1,130 @@
+<template>
+  <Button
+    @click="dialogOpen = true"
+    :class="className"
+  >
+    <slot :current-chain="currentChain">
+      {{ currentChain?.name || 'Unknown Network' }}
+    </slot>
+  </Button>
+
+  <Dialog
+    title="Switch Network"
+    v-model:open="dialogOpen"
+    @closed="onClosed"
+  >
+    <Alert
+      v-if="errorMessage"
+      type="error"
+    >
+      {{ errorMessage }}
+    </Alert>
+
+    <Loading
+      v-if="switching"
+      spinner
+      stacked
+      :txt="`Switching to ${switchingTo}...`"
+    />
+
+    <div
+      v-if="!switching"
+      class="chain-list"
+    >
+      <Button
+        v-for="chain in chains"
+        :key="chain.id"
+        :disabled="chain.id === currentChainId || undefined"
+        :class="['chain-item', { active: chain.id === currentChainId }]"
+        @click="() => switchTo(chain)"
+      >
+        <span>{{ chain.name }}</span>
+        <Icon
+          v-if="chain.id === currentChainId"
+          type="check"
+        />
+      </Button>
+    </div>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import type { Chain } from 'viem'
+import { useConfig, useConnection, useSwitchChain } from '@wagmi/vue'
+import Button from '../../base/components/Button.vue'
+import Dialog from '../../base/components/Dialog.vue'
+import Icon from '../../base/components/Icon.vue'
+import Alert from '../../base/components/Alert.vue'
+import Loading from '../../base/components/Loading.vue'
+
+defineProps<{
+  className?: string
+}>()
+
+const emit = defineEmits<{
+  switched: [{ chainId: number; name: string }]
+  error: [{ message: string }]
+}>()
+
+const config = useConfig()
+const { chainId: currentChainId } = useConnection()
+const { mutateAsync: switchChainAsync } = useSwitchChain()
+
+const chains = computed<readonly Chain[]>(() => config.chains)
+const currentChain = computed(() =>
+  chains.value.find((c) => c.id === currentChainId.value),
+)
+
+const dialogOpen = ref(false)
+const switching = ref(false)
+const switchingTo = ref('')
+const errorMessage = ref('')
+
+const switchTo = async (chain: Chain) => {
+  if (chain.id === currentChainId.value) return
+
+  switching.value = true
+  switchingTo.value = chain.name
+  errorMessage.value = ''
+
+  try {
+    await switchChainAsync({ chainId: chain.id })
+    emit('switched', { chainId: chain.id, name: chain.name })
+    dialogOpen.value = false
+  } catch (e: unknown) {
+    const message = e instanceof Error ? e.message : 'Failed to switch network.'
+    errorMessage.value = message.includes('rejected') || message.includes('denied')
+      ? 'Network switch cancelled.'
+      : 'Failed to switch network. Please try again.'
+    emit('error', { message: errorMessage.value })
+  } finally {
+    switching.value = false
+    switchingTo.value = ''
+  }
+}
+
+const onClosed = () => {
+  switching.value = false
+  switchingTo.value = ''
+  errorMessage.value = ''
+}
+</script>
+
+<style scoped>
+.chain-list {
+  display: grid;
+  gap: var(--spacer-sm);
+}
+
+.chain-item {
+  width: 100%;
+  inline-size: auto;
+  justify-content: space-between;
+
+  &.active {
+    pointer-events: none;
+    opacity: 1;
+  }
+}
+</style>

package/src/evm/components/EvmTransactionFlow.vue

@@ -12,6 +12,7 @@
     :click-outside="canDismiss"
     :title="text.title[step]"
     class="transaction-flow"
+    compat
   >
     <slot name="before" />
 
@@ -19,7 +20,9 @@
       v-if="step === 'requesting'"
       spinner
       stacked
-      :txt="text.lead[step] || ''"
+      :txt="connector?.name
+        ? `Requesting signature from ${connector.name}...`
+        : text.lead[step] || ''"
     />
 
     <p v-if="step !== 'requesting' && step !== 'error' && text.lead[step]">
@@ -73,7 +76,7 @@
 <script setup lang="ts">
 import { ref, computed, watch, onBeforeUnmount } from 'vue'
 import { waitForTransactionReceipt, watchChainId } from '@wagmi/core'
-import { useConfig, type Config } from '@wagmi/vue'
+import { useConfig, useConnection, type Config } from '@wagmi/vue'
 import type { TransactionReceipt, Hash } from 'viem'
 import Dialog from '../../base/components/Dialog.vue'
 import Loading from '../../base/components/Loading.vue'
@@ -120,14 +123,9 @@ const defaultText = {
   },
 } satisfies TextConfig
 
-const checkChain = useEnsureChainIdCheck()
-
-const wagmiConfig = useConfig()
-const blockExplorer = useBlockExplorer()
-const toast = useToast()
-
 const props = withDefaults(
   defineProps<{
+    chain?: string
     text?: TextConfig
     request?: () => Promise<Hash>
     delayAfter?: number
@@ -145,6 +143,24 @@ const props = withDefaults(
   },
 )
 
+function isUserRejection(e: unknown): boolean {
+  const re = /reject|denied|cancel/i
+  let current = e as Record<string, unknown> | undefined
+  while (current) {
+    if ((current as { code?: number }).code === 4001) return true
+    if (re.test((current as { details?: string }).details || '')) return true
+    current = current.cause as Record<string, unknown> | undefined
+  }
+  return false
+}
+
+const checkChain = useEnsureChainIdCheck(props.chain)
+
+const wagmiConfig = useConfig()
+const { connector } = useConnection()
+const blockExplorer = useBlockExplorer(props.chain)
+const toast = useToast()
+
 const emit = defineEmits<{
   complete: [receipt: TransactionReceipt]
   cancel: []
@@ -192,8 +208,11 @@ const receipt = ref<TransactionReceipt | null>(null)
 const txLink = computed(() => `${blockExplorer}/tx/${tx.value}`)
 
 let mounted = true
+let progressTimer: ReturnType<typeof setInterval> | undefined
+
 onBeforeUnmount(() => {
   mounted = false
+  clearInterval(progressTimer)
 })
 
 const canDismiss = computed(
@@ -217,10 +236,10 @@ const initializeRequest = async (request = cachedRequest.value) => {
     step.value = 'requesting'
     tx.value = await request!()
   } catch (e: unknown) {
-    const err = e as { cause?: { code?: number }; shortMessage?: string }
-    if (err?.cause?.code === 4001) {
+    if (isUserRejection(e)) {
       error.value = 'Transaction rejected by user.'
     } else {
+      const err = e as { shortMessage?: string }
       error.value = err.shortMessage || 'Error submitting transaction request.'
     }
     step.value = 'error'
@@ -238,17 +257,26 @@ const initializeRequest = async (request = cachedRequest.value) => {
     description: text.value.lead.waiting,
     duration: Infinity,
     loading: true,
+    progress: 0,
     action: {
       label: 'View on Block Explorer',
       onClick: () => window.open(link, '_blank'),
     },
   })
 
+  const start = Date.now()
+  progressTimer = setInterval(() => {
+    const elapsed = (Date.now() - start) / 1000
+    toast.update(toastId, { progress: Math.round(90 * (1 - Math.exp(-elapsed / 15))) })
+  }, 500)
+
   try {
     const receiptObject = await waitForTransactionReceipt(
       wagmiConfig as Config,
       { hash: tx.value },
     )
+    clearInterval(progressTimer)
+    toast.update(toastId, { progress: 100, loading: false })
     await delay(props.delayAfter)
     receipt.value = receiptObject
     emit('complete', receiptObject)
@@ -257,10 +285,11 @@ const initializeRequest = async (request = cachedRequest.value) => {
       variant: 'success',
       title: text.value.title.complete,
       description: text.value.lead.complete,
-      loading: false,
+      progress: false,
       ...(props.autoCloseSuccess && { duration: props.delayAutoclose }),
     })
   } catch (e: unknown) {
+    clearInterval(progressTimer)
     const err = e as { shortMessage?: string }
     if (mounted) {
       toast.dismiss(toastId)
@@ -272,6 +301,7 @@ const initializeRequest = async (request = cachedRequest.value) => {
         title: text.value.title.error,
         description: err.shortMessage || 'Transaction failed.',
         loading: false,
+        progress: false,
       })
     }
     console.log(e)

package/src/evm/components/EvmWalletConnectWallets.vue

@@ -0,0 +1,199 @@
+<template>
+  <div class="wc-wallets">
+    <EvmConnectorQR :uri="uri">
+      <template #instruction> Scan with your wallet app </template>
+    </EvmConnectorQR>
+
+    <div class="separator">
+      <span>Or choose a wallet</span>
+    </div>
+
+    <FormItem>
+      <template #prefix>
+        <Icon type="lucide:search" />
+      </template>
+      <input
+        v-model="searchQuery"
+        type="text"
+        placeholder="Search wallets"
+        @input="onSearchInput"
+      />
+    </FormItem>
+
+    <div
+      v-if="displayedWallets.length > 0"
+      class="wallet-grid"
+    >
+      <Button
+        v-for="wallet in displayedWallets"
+        :key="wallet.id"
+        @click="openWallet(wallet)"
+        class="wallet-card tertiary"
+      >
+        <img
+          :src="explorer.imageUrl(wallet)"
+          :alt="wallet.name"
+          loading="lazy"
+        />
+        <span>{{ wallet.name }}</span>
+      </Button>
+    </div>
+
+    <p
+      v-if="
+        searchQuery &&
+        !explorer.searching.value &&
+        displayedWallets.length === 0
+      "
+      class="empty-state"
+    >
+      No wallets found
+    </p>
+
+    <Loading
+      v-if="explorer.loading.value || explorer.searching.value"
+      spinner
+      stacked
+      txt=""
+    />
+
+    <Button
+      to="https://ethereum.org/wallets/"
+      target="_blank"
+      class="link muted small help-link"
+    >
+      <Icon type="help" />
+      <span>New to wallets?</span>
+    </Button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
+import Button from '../../base/components/Button.vue'
+import FormItem from '../../base/components/FormItem.vue'
+import Icon from '../../base/components/Icon.vue'
+import Loading from '../../base/components/Loading.vue'
+import EvmConnectorQR from './EvmConnectorQR.vue'
+import {
+  useWalletExplorer,
+  type ExplorerWallet,
+} from '../composables/walletExplorer'
+
+const props = defineProps<{
+  uri: string
+}>()
+
+const explorer = useWalletExplorer()
+const searchQuery = ref('')
+let searchTimeout: ReturnType<typeof setTimeout>
+
+const TOP_COUNT = 9
+
+const displayedWallets = computed(() => {
+  if (searchQuery.value) return explorer.searchResults.value
+
+  const recents = explorer.recentWallets.value
+  const recentIds = new Set(recents.map((w) => w.id))
+  const rest = explorer.wallets.value
+    .filter((w) => !recentIds.has(w.id))
+    .slice(0, TOP_COUNT - recents.length)
+
+  return [...recents, ...rest]
+})
+
+function openWallet(wallet: ExplorerWallet) {
+  const href = explorer.walletHref(wallet, props.uri)
+  if (href) {
+    window.open(href, '_blank', 'noreferrer')
+  }
+  explorer.addRecent(wallet.id)
+}
+
+function onSearchInput() {
+  clearTimeout(searchTimeout)
+  searchTimeout = setTimeout(() => {
+    if (searchQuery.value) {
+      explorer.search(searchQuery.value)
+    }
+  }, 300)
+}
+
+onBeforeUnmount(() => {
+  clearTimeout(searchTimeout)
+})
+
+onMounted(() => {
+  explorer.fetchNextPage()
+})
+</script>
+
+<style scoped>
+.wc-wallets {
+  display: grid;
+  gap: var(--spacer);
+}
+
+/* Separator */
+.separator {
+  display: flex;
+  align-items: center;
+  gap: var(--spacer-sm);
+  @mixin ui-font;
+  color: var(--muted);
+  font-size: var(--font-sm);
+
+  &::before,
+  &::after {
+    content: '';
+    flex: 1;
+    border-top: var(--border);
+  }
+}
+
+/* Wallet grid */
+.wallet-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
+  gap: var(--spacer-sm);
+}
+
+.wallet-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacer-sm);
+  block-size: auto;
+  min-inline-size: 0;
+  inline-size: 100%;
+
+  img {
+    width: var(--size-6);
+    height: var(--size-6);
+    border-radius: var(--border-radius);
+    margin-top: var(--spacer-xs);
+  }
+
+  span {
+    font-size: var(--font-xs);
+    text-align: center;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 100%;
+  }
+}
+
+/* Help link */
+.help-link {
+  justify-self: center;
+  font-size: var(--font-xs);
+}
+
+/* Empty state */
+.empty-state {
+  text-align: center;
+  @mixin ui-font;
+  color: var(--muted);
+}
+</style>

package/src/evm/composables/chainId.ts

@@ -22,8 +22,8 @@ export const useMainChainId = () => useChainConfig().id
 export const useBlockExplorer = (key?: string) =>
   useChainConfig(key).blockExplorer
 
-export const useEnsureChainIdCheck = () => {
-  const chainId = useMainChainId()
+export const useEnsureChainIdCheck = (key?: string) => {
+  const chainId = useChainConfig(key).id
   const { mutateAsync: switchChain } = useSwitchChain()
   const { chainId: currentChainId } = useConnection()
 

package/src/evm/composables/uri.ts

@@ -0,0 +1,11 @@
+import { resolveUri } from '../utils/uri'
+
+export const useResolveUri = () => {
+  const appConfig = useAppConfig()
+
+  return (uri?: string) =>
+    resolveUri(uri, {
+      ipfsGateway: appConfig.evm?.ipfsGateway,
+      arweaveGateway: appConfig.evm?.arweaveGateway,
+    })
+}