@1001-digital/components 0.0.4 → 1.0.0

package/src/base/components/PinInput.vue

@@ -0,0 +1,105 @@
+<template>
+  <PinInputRoot
+    v-model="model"
+    class="pin-input"
+    :disabled="disabled"
+    :placeholder="placeholder"
+    :mask="mask"
+    :otp="otp"
+    :type="type"
+    :name="name"
+    :required="required"
+    :dir="dir"
+    @complete="$emit('complete', $event)"
+  >
+    <PinInputInput
+      v-for="(_, i) in length"
+      :key="i"
+      :index="i"
+      :disabled="disabled"
+      class="pin-input-field"
+    />
+  </PinInputRoot>
+</template>
+
+<script setup lang="ts">
+import { PinInputInput, PinInputRoot } from 'reka-ui'
+
+const model = defineModel<string[]>()
+
+withDefaults(
+  defineProps<{
+    length?: number
+    disabled?: boolean
+    placeholder?: string
+    mask?: boolean
+    otp?: boolean
+    type?: 'text' | 'number'
+    name?: string
+    required?: boolean
+    dir?: 'ltr' | 'rtl'
+  }>(),
+  {
+    length: 4,
+    placeholder: '',
+    type: 'text',
+  },
+)
+
+defineEmits<{
+  complete: [value: string[]]
+}>()
+</script>
+
+<style scoped>
+@layer components {
+  .pin-input {
+    display: flex;
+    gap: var(--pin-input-gap);
+  }
+
+  .pin-input-field {
+    all: unset;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    inline-size: var(--pin-input-size);
+    block-size: var(--pin-input-size);
+    border-radius: var(--pin-input-border-radius);
+    box-shadow: var(--border-shadow);
+    background: var(--pin-input-background);
+    color: var(--pin-input-color);
+    font-family: var(--font-family);
+    font-size: var(--pin-input-font-size);
+    font-weight: var(--pin-input-font-weight);
+    text-transform: var(--ui-text-transform);
+    letter-spacing: var(--ui-letter-spacing);
+    transition:
+      box-shadow var(--speed),
+      background var(--speed);
+
+    &:is(:hover, :focus) {
+      box-shadow: var(--border-shadow-highlight);
+    }
+
+    &:focus {
+      background: var(--pin-input-background-focus);
+      outline: none;
+    }
+
+    &::placeholder {
+      color: var(--ui-placeholder-color);
+    }
+
+    &[data-disabled] {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    &[data-complete] {
+      box-shadow: 0 0 0 var(--border-width) var(--pin-input-complete-border-color);
+    }
+  }
+}
+</style>

package/src/base/components/Progress.vue

@@ -0,0 +1,66 @@
+<template>
+  <ProgressRoot
+    v-model="model"
+    class="progress"
+    :max="max"
+  >
+    <ProgressIndicator
+      class="progress-indicator"
+      :style="model != null ? { width: `${percentage}%` } : undefined"
+    />
+  </ProgressRoot>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { ProgressIndicator, ProgressRoot } from 'reka-ui'
+
+const model = defineModel<number | null>()
+
+const props = withDefaults(
+  defineProps<{
+    max?: number
+  }>(),
+  {
+    max: 100,
+  },
+)
+
+const percentage = computed(() =>
+  model.value != null ? (model.value / props.max) * 100 : 0,
+)
+</script>
+
+<style scoped>
+@layer components {
+  .progress {
+    position: relative;
+    inline-size: 100%;
+    block-size: var(--progress-height);
+    background: var(--progress-track-background);
+    border-radius: var(--progress-radius);
+    overflow: hidden;
+  }
+
+  .progress-indicator {
+    block-size: 100%;
+    background: var(--progress-indicator-background);
+    border-radius: var(--progress-radius);
+    transition: width var(--speed);
+  }
+
+  [data-state='indeterminate'] > .progress-indicator {
+    inline-size: 30%;
+    animation: progress-indeterminate 1.5s ease-in-out infinite;
+  }
+
+  @keyframes progress-indeterminate {
+    0% {
+      translate: -100% 0;
+    }
+    100% {
+      translate: 400% 0;
+    }
+  }
+}
+</style>

package/src/base/components/Toasts.vue

@@ -28,13 +28,17 @@
         <Icon type="close" />
       </ToastClose>
 
-      <section v-if="toast.description || toast.action">
+      <section v-if="toast.description || toast.action || toast.progress">
         <ToastDescription
           v-if="toast.description"
           class="toast-description"
         >
           {{ toast.description }}
         </ToastDescription>
+        <Progress
+          v-if="toast.progress"
+          :model-value="toast.progress === true ? null : toast.progress"
+        />
         <ToastAction
           v-if="toast.action"
           :alt-text="toast.action.label"
@@ -62,6 +66,7 @@
 import Actions from './Actions.vue'
 import Button from './Button.vue'
 import Icon from './Icon.vue'
+import Progress from './Progress.vue'
 import { useToast } from '../composables/toast'
 import {
   ToastAction,

package/src/base/composables/confirm.ts

@@ -0,0 +1,29 @@
+import { ref } from 'vue'
+
+export interface ConfirmOptions {
+  title: string
+  description?: string
+  okText?: string
+  cancelText?: string
+}
+
+export interface ConfirmState extends ConfirmOptions {
+  resolve: (value: boolean) => void
+}
+
+const state = ref<ConfirmState | null>(null)
+
+export const useConfirm = () => {
+  const confirm = (options: ConfirmOptions) => {
+    return new Promise<boolean>((resolve) => {
+      state.value = { ...options, resolve }
+    })
+  }
+
+  const resolve = (value: boolean) => {
+    state.value?.resolve(value)
+    state.value = null
+  }
+
+  return { state, confirm, resolve }
+}

package/src/base/composables/toast.ts

@@ -15,6 +15,7 @@ export interface Toast {
   action?: ToastAction
   duration?: number
   loading?: boolean
+  progress?: number | boolean
 }
 
 const toasts = ref<Toast[]>([])

package/src/base/icons.ts

@@ -6,10 +6,12 @@ export const IconAliasesKey: InjectionKey<IconAliases> = Symbol('IconAliases')
 
 export const defaultIconAliases: IconAliases = {
   add: 'lucide:plus',
+  calendar: 'lucide:calendar',
   check: 'lucide:check',
-  close: 'lucide:x',
+  'chevron-left': 'lucide:chevron-left',
   'chevron-down': 'lucide:chevron-down',
   'chevron-right': 'lucide:chevron-right',
+  close: 'lucide:x',
   copy: 'lucide:copy',
   edit: 'lucide:pencil',
   help: 'lucide:circle-question-mark',

package/src/evm/components/EvmAvatar.vue

@@ -0,0 +1,62 @@
+<template>
+  <slot
+    :src="src"
+    :ens="ens"
+    :is-current="isCurrent"
+  >
+    <img
+      v-if="src"
+      :src="src"
+      :alt="ens || 'Avatar'"
+      :class="['evm-avatar', { large }]"
+    />
+    <Opepicon
+      v-else-if="address"
+      :seed="address"
+      :size="large ? 256 : 64"
+      :class="['evm-avatar', { large }]"
+    />
+  </slot>
+</template>
+
+<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 Opepicon from '../../base/components/Opepicon.vue'
+
+const props = defineProps<{
+  address?: Address
+  large?: boolean
+}>()
+const address = computed(() => props.address)
+
+const { address: currentAddress } = useConnection()
+
+const isCurrent = computed<boolean>(
+  () => currentAddress.value?.toLowerCase() === address.value?.toLowerCase(),
+)
+
+const { data: ensData } = useEnsWithAvatar(address)
+const resolve = useResolveUri()
+
+const ens = computed(() => ensData.value?.ens || null)
+const src = computed(() => resolve(ensData.value?.data?.avatar))
+</script>
+
+<style scoped>
+.evm-avatar {
+  width: var(--size-5);
+  height: var(--size-5);
+  border-radius: 50%;
+  background-color: var(--background);
+  object-fit: cover;
+
+  &.large {
+    width: var(--size-9);
+    height: var(--size-9);
+  }
+}
+</style>

package/src/evm/components/EvmConnect.vue

@@ -26,17 +26,17 @@
     >
       {{ errorMessage }}
     </Alert>
-    <EvmWalletConnectQR
-      v-if="walletConnectUri"
-      :uri="walletConnectUri"
-    />
     <EvmMetaMaskQR
       v-else-if="metaMaskUri"
       :uri="metaMaskUri"
     />
+    <EvmWalletConnectWallets
+      v-else-if="walletConnectUri"
+      :uri="walletConnectUri"
+    />
     <template v-else-if="isConnecting">
       <Loading
-        txt="Waiting for wallet confirmation..."
+        :txt="`Waiting for ${connectingWallet} confirmation...`"
         spinner
         stacked
       />
@@ -66,6 +66,17 @@
         </div>
         <span>{{ connector.name }}</span>
       </Button>
+      <Button
+        v-if="wcConnector"
+        @click="loginWithSafe"
+        class="choose-connector"
+      >
+        <img
+          :src="`${base}icons/wallets/safe.png`"
+          alt="Safe"
+        />
+        <span>Safe</span>
+      </Button>
       <Button
         to="https://ethereum.org/wallets/"
         target="_blank"
@@ -93,22 +104,23 @@ import Icon from '../../base/components/Icon.vue'
 import Alert from '../../base/components/Alert.vue'
 import Loading from '../../base/components/Loading.vue'
 import EvmAccount from './EvmAccount.vue'
-import EvmWalletConnectQR from './EvmWalletConnectQR.vue'
 import EvmMetaMaskQR from './EvmMetaMaskQR.vue'
+import EvmWalletConnectWallets from './EvmWalletConnectWallets.vue'
 import { useBaseURL } from '../composables/base'
 
 const ICONS: Record<string, string> = {
-  'Coinbase Wallet': 'coinbase.svg',
+  'Base Account': 'coinbase.svg',
   MetaMask: 'metamask.svg',
   Phantom: 'phantom.svg',
   'Rabby Wallet': 'rabby.svg',
   Rainbow: 'rainbow.svg',
+  Safe: 'safe.png',
   WalletConnect: 'walletconnect.svg',
 }
 
 const PRIORITY: Record<string, number> = {
   WalletConnect: 20,
-  'Coinbase Wallet': 10,
+  'Base Account': 10,
 }
 
 defineProps<{
@@ -134,7 +146,9 @@ const shownConnectors = computed(() => {
   )
 
   const filtered =
-    unique.length > 1 ? unique.filter((c) => c.id !== 'injected') : unique
+    unique.length > 1
+      ? unique.filter((c) => c.id !== 'injected' && c.id !== 'safe')
+      : unique
 
   return filtered.sort((a, b) => {
     const priorityA = PRIORITY[a.name] ?? 5
@@ -143,30 +157,55 @@ const shownConnectors = computed(() => {
   })
 })
 
+const wcConnector = computed(() =>
+  connectors.value.find((c) => c.id === 'walletConnect'),
+)
+
 const chooseModalOpen = ref(false)
 const errorMessage = ref('')
 const isConnecting = ref(false)
-const walletConnectUri = ref('')
+const connectingWallet = ref('')
 const metaMaskUri = ref('')
+const walletConnectUri = ref('')
+const safeDeepLink = ref(false)
+
+const loginWithSafe = () => {
+  if (!wcConnector.value) return
+  safeDeepLink.value = true
+  login(wcConnector.value)
+}
 
 const login = async (connector: Connector) => {
   errorMessage.value = ''
   isConnecting.value = true
-  walletConnectUri.value = ''
+  connectingWallet.value = safeDeepLink.value ? 'Safe' : connector.name
   metaMaskUri.value = ''
+  walletConnectUri.value = ''
 
-  const handleMessage = (event: { type: string; data?: unknown }) => {
+  const handleMetaMaskMessage = (event: { type: string; data?: unknown }) => {
     if (event.type === 'display_uri' && typeof event.data === 'string') {
-      if (connector.id === 'walletConnect') {
+      metaMaskUri.value = event.data
+    }
+  }
+
+  const handleWcMessage = (event: { type: string; data?: unknown }) => {
+    if (event.type === 'display_uri' && typeof event.data === 'string') {
+      if (safeDeepLink.value) {
+        window.open(
+          `https://app.safe.global/wc?uri=${encodeURIComponent(event.data)}`,
+          '_blank',
+          'noreferrer',
+        )
+      } else {
         walletConnectUri.value = event.data
-      } else if (connector.id === 'metaMaskSDK') {
-        metaMaskUri.value = event.data
       }
     }
   }
 
-  if (connector.id === 'walletConnect' || connector.id === 'metaMaskSDK') {
-    connector.emitter.on('message', handleMessage)
+  if (connector.id === 'metaMaskSDK') {
+    connector.emitter.on('message', handleMetaMaskMessage)
+  } else if (connector.id === 'walletConnect') {
+    connector.emitter.on('message', handleWcMessage)
   }
 
   try {
@@ -175,28 +214,35 @@ const login = async (connector: Connector) => {
     setTimeout(() => {
       chooseModalOpen.value = false
       isConnecting.value = false
-      walletConnectUri.value = ''
       metaMaskUri.value = ''
+      walletConnectUri.value = ''
+      safeDeepLink.value = false
     }, 100)
   } catch (error: unknown) {
     isConnecting.value = false
-    walletConnectUri.value = ''
     metaMaskUri.value = ''
+    walletConnectUri.value = ''
+    safeDeepLink.value = false
 
-    const errorMsg = error instanceof Error ? error.message : ''
-    if (
-      errorMsg.includes('User rejected') ||
-      errorMsg.includes('rejected') ||
-      errorMsg.includes('denied')
-    ) {
-      errorMessage.value = 'Connection cancelled. Please try again.'
-    } else {
-      errorMessage.value = 'Failed to connect. Please try again.'
+    // Only show errors if our dialog is still open
+    if (chooseModalOpen.value) {
+      const errorMsg = error instanceof Error ? error.message : ''
+      if (
+        errorMsg.includes('User rejected') ||
+        errorMsg.includes('rejected') ||
+        errorMsg.includes('denied')
+      ) {
+        errorMessage.value = 'Connection cancelled. Please try again.'
+      } else {
+        errorMessage.value = 'Failed to connect. Please try again.'
+      }
     }
     console.error('Wallet connection error:', error)
   } finally {
-    if (connector.id === 'walletConnect' || connector.id === 'metaMaskSDK') {
-      connector.emitter.off('message', handleMessage)
+    if (connector.id === 'metaMaskSDK') {
+      connector.emitter.off('message', handleMetaMaskMessage)
+    } else if (connector.id === 'walletConnect') {
+      connector.emitter.off('message', handleWcMessage)
     }
   }
 }
@@ -204,15 +250,20 @@ const login = async (connector: Connector) => {
 const onModalClosed = () => {
   errorMessage.value = ''
   isConnecting.value = false
-  walletConnectUri.value = ''
+  connectingWallet.value = ''
   metaMaskUri.value = ''
+  walletConnectUri.value = ''
+  safeDeepLink.value = false
 }
 
 const check = () =>
   isConnected.value
     ? emit('connected', { address: address.value })
     : emit('disconnected')
-watch(isConnected, () => check())
+watch(isConnected, () => {
+  check()
+  if (!isConnected.value) onModalClosed()
+})
 onMounted(() => check())
 </script>
 

package/src/evm/components/EvmConnectorQR.vue

@@ -5,17 +5,15 @@
   <div class="qr-frame">
     <canvas ref="qrCanvas"></canvas>
   </div>
-  <p class="uri-label">Or copy the connection URI:</p>
-  <div class="uri-display">
-    <code>{{ uri }}</code>
-    <Button
-      @click="copyUri"
-      class="copy-button"
-      :class="{ copied: isCopied }"
-    >
-      <Icon :type="isCopied ? 'check' : 'copy'" />
-    </Button>
-  </div>
+  <Button
+    @click="copyUri"
+    class="copy-uri tertiary small"
+  >
+    <Icon :type="isCopied ? 'check' : 'copy'" />
+    <span>
+      {{ isCopied ? 'Copied' : 'Copy Link' }}
+    </span>
+  </Button>
 </template>
 
 <script setup lang="ts">
@@ -81,36 +79,8 @@ p {
   }
 }
 
-.uri-display {
-  display: flex;
-  align-items: center;
-  gap: var(--spacer-xs);
-  background: var(--color-bg-secondary);
-  border: var(--border);
-  border-radius: var(--border-radius-sm);
-  overflow: hidden;
-  height: min-content;
-  padding: 0;
-
-  code {
-    flex: 1;
-    font-size: var(--font-xs);
-    font-family: monospace;
-    white-space: nowrap;
-    overflow: hidden;
-    padding: 0 var(--spacer-sm);
-    color: var(--muted);
-  }
-
-  .copy-button {
-    flex-shrink: 0;
-    padding: var(--spacer-xs);
-    min-width: auto;
-    margin: -1px;
-
-    &.copied {
-      color: var(--color-success);
-    }
-  }
+.copy-uri {
+  width: fit-content;
+  margin: 0 auto;
 }
 </style>