@1001-digital/components 0.0.1

package/src/base/composables/time.ts

@@ -0,0 +1,82 @@
+import { ref, computed, watch } from 'vue'
+import type { Ref } from 'vue'
+import { DateTime } from 'luxon'
+import { nowInSeconds } from '../utils/time'
+
+let nowInterval: ReturnType<typeof setInterval> | undefined
+
+const now = ref<number>(nowInSeconds())
+
+export const useSeconds = () => {
+  if (typeof window !== 'undefined' && !nowInterval) {
+    nowInterval = setInterval(() => {
+      now.value = nowInSeconds()
+    }, 1000)
+  }
+
+  return now
+}
+
+export const useCountDown = (
+  s: Ref<number | bigint>,
+  showSecondsWithin: number = 60,
+) => {
+  const duration = computed(() => Math.abs(Number(s.value)))
+
+  const seconds = computed(() => duration.value % 60)
+  const minutes = computed(() => Math.floor(duration.value / 60) % 60)
+  const hours = computed(() => Math.floor(duration.value / 60 / 60) % 24)
+  const days = computed(() => Math.floor(duration.value / 60 / 60 / 24))
+
+  const str = computed(() =>
+    [
+      days.value ? `${days.value}d` : null,
+      hours.value ? `${hours.value}h` : null,
+      minutes.value ? `${minutes.value}m` : null,
+      duration.value < showSecondsWithin && seconds.value
+        ? `${seconds.value}s`
+        : null,
+    ]
+      .filter((s) => !!s)
+      .join(' '),
+  )
+
+  return {
+    seconds,
+    minutes,
+    hours,
+    days,
+    str,
+  }
+}
+
+export const useTimeAgo = (time: Ref<string | undefined>) => {
+  const ago = ref<string>()
+  const nowRef = useSeconds()
+
+  watch(
+    nowRef,
+    () => {
+      if (time.value) {
+        ago.value =
+          DateTime.fromISO(time.value).toRelative({
+            style: 'short',
+            locale: 'en',
+          }) ?? undefined
+      }
+    },
+    {
+      immediate: true,
+    },
+  )
+
+  return ago
+}
+
+/** @deprecated Use `useTimeAgo` instead. */
+export const useSecondsAgo = (...args: Parameters<typeof useTimeAgo>) => {
+  console.warn(
+    '[deprecated] useSecondsAgo is deprecated, use useTimeAgo instead.',
+  )
+  return useTimeAgo(...args)
+}

package/src/base/composables/toast.ts

@@ -0,0 +1,40 @@
+import { ref } from 'vue'
+
+export interface ToastAction {
+  label: string
+  onClick: () => void
+}
+
+export type ToastVariant = 'info' | 'success' | 'error'
+
+export interface Toast {
+  id: string
+  title?: string
+  description?: string
+  variant?: ToastVariant
+  action?: ToastAction
+  duration?: number
+}
+
+const toasts = ref<Toast[]>([])
+
+export const useToast = () => {
+  const add = (toast: Omit<Toast, 'id'>) => {
+    const id = crypto.randomUUID()
+    toasts.value.push({ ...toast, id })
+    return id
+  }
+
+  const update = (id: string, partial: Partial<Omit<Toast, 'id'>>) => {
+    const index = toasts.value.findIndex((t) => t.id === id)
+    if (index !== -1) {
+      toasts.value[index] = { ...toasts.value[index], ...partial, id }
+    }
+  }
+
+  const dismiss = (id: string) => {
+    toasts.value = toasts.value.filter((t) => t.id !== id)
+  }
+
+  return { toasts, add, update, dismiss }
+}

package/src/base/icons.ts

@@ -0,0 +1,20 @@
+import type { InjectionKey } from 'vue'
+
+export type IconAliases = Record<string, string>
+
+export const IconAliasesKey: InjectionKey<IconAliases> = Symbol('IconAliases')
+
+export const defaultIconAliases: IconAliases = {
+  add: 'lucide:plus',
+  check: 'lucide:check',
+  close: 'lucide:x',
+  'chevron-down': 'lucide:chevron-down',
+  'chevron-right': 'lucide:chevron-right',
+  copy: 'lucide:copy',
+  edit: 'lucide:pencil',
+  help: 'lucide:circle-question-mark',
+  home: 'lucide:house',
+  link: 'lucide:link',
+  loader: 'lucide:loader-2',
+  wallet: 'lucide:wallet',
+}

package/src/base/link.ts

@@ -0,0 +1,4 @@
+import type { Component, InjectionKey } from 'vue'
+
+export const LinkComponentKey: InjectionKey<Component | string> =
+  Symbol('LinkComponent')

package/src/base/utils/format-number.ts

@@ -0,0 +1,29 @@
+export const formatNumber = (num: number) => num?.toLocaleString('en-US')
+
+export const roundAndFormatNumber = (num: number, decimals: number = 2) => {
+  const multiplier = Math.pow(10, decimals)
+  const rounded = Math.round(num * multiplier) / multiplier
+  return formatNumber(rounded === num ? num : rounded)
+}
+
+export const asPercentageOf = (num: number = 0, base: number = 1) => {
+  return formatNumber(Math.round((num / base) * 100))
+}
+
+export function formatUSD(
+  value: string | number,
+  fractionDigits: number = 0,
+): string {
+  const numberValue = typeof value === 'string' ? parseFloat(value) : value
+
+  if (isNaN(numberValue)) {
+    throw new Error('Invalid number input')
+  }
+
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+    minimumFractionDigits: fractionDigits,
+    maximumFractionDigits: fractionDigits,
+  }).format(numberValue)
+}

package/src/base/utils/time.ts

@@ -0,0 +1,20 @@
+import { DateTime } from 'luxon'
+
+export const delay = (ms: number): Promise<void> =>
+  new Promise((resolve) => setTimeout(resolve, ms))
+
+export const daysInSeconds = (days: number): number => days * 60 * 60 * 24
+
+export const nowInSeconds = (): number => Math.floor(Date.now() / 1000)
+
+export const asUTCDate = (date: Date | null) =>
+  date
+    ? DateTime.utc(
+        date.getFullYear(),
+        date.getMonth() + 1,
+        date.getDate(),
+        date.getHours(),
+        date.getMinutes(),
+        date.getSeconds(),
+      )
+    : null

package/src/evm/components/EvmAccount.vue

@@ -0,0 +1,28 @@
+<template>
+  <slot
+    :display="display"
+    :is-current="isCurrent"
+  >
+    <span>{{ display }}</span>
+  </slot>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { Address } from 'viem'
+import { useConnection } from '@wagmi/vue'
+import { shortAddress } from '../utils/addresses'
+
+const props = defineProps<{
+  address?: Address
+}>()
+const address = computed(() => props.address)
+
+const { address: currentAddress } = useConnection()
+
+const isCurrent = computed<boolean>(
+  () => currentAddress.value?.toLowerCase() === address.value?.toLowerCase(),
+)
+
+const display = computed<string>(() => shortAddress(address.value!))
+</script>

package/src/evm/components/EvmConnect.vue

@@ -0,0 +1,254 @@
+<template>
+  <Button
+    v-if="showConnect"
+    @click="chooseModalOpen = true"
+    :class="className"
+  >
+    <slot>Connect Wallet</slot>
+  </Button>
+  <slot
+    v-else
+    name="connected"
+    :address="address"
+  >
+    <EvmAccount :address="address" />
+  </slot>
+
+  <Dialog
+    v-if="showConnect"
+    title="Connect Wallet"
+    v-model:open="chooseModalOpen"
+    @closed="onModalClosed"
+  >
+    <Alert
+      v-if="errorMessage"
+      type="error"
+    >
+      {{ errorMessage }}
+    </Alert>
+    <EvmWalletConnectQR
+      v-if="walletConnectUri"
+      :uri="walletConnectUri"
+    />
+    <EvmMetaMaskQR
+      v-else-if="metaMaskUri"
+      :uri="metaMaskUri"
+    />
+    <template v-else-if="isConnecting">
+      <Loading
+        txt="Waiting for wallet confirmation..."
+        spinner
+        stacked
+      />
+    </template>
+    <div
+      v-else
+      class="wallet-options"
+    >
+      <Button
+        v-for="connector in shownConnectors"
+        :key="connector.uid"
+        @click="() => login(connector)"
+        class="choose-connector"
+      >
+        <img
+          v-if="ICONS[connector.name]"
+          :src="
+            connector.icon || `${base}icons/wallets/${ICONS[connector.name]}`
+          "
+          :alt="connector.name"
+        />
+        <div
+          v-else
+          class="default-wallet-icon"
+        >
+          <Icon type="wallet" />
+        </div>
+        <span>{{ connector.name }}</span>
+      </Button>
+      <Button
+        to="https://ethereum.org/wallets/"
+        target="_blank"
+        class="link muted small"
+      >
+        <Icon type="help" />
+        <span>New to wallets?</span>
+      </Button>
+    </div>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onMounted } from 'vue'
+import type { Connector } from '@wagmi/vue'
+import {
+  useConnection,
+  useConnect,
+  useConnectors,
+  useChainId,
+} 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'
+import EvmAccount from './EvmAccount.vue'
+import EvmWalletConnectQR from './EvmWalletConnectQR.vue'
+import EvmMetaMaskQR from './EvmMetaMaskQR.vue'
+import { useBaseURL } from '../composables/base'
+
+const ICONS: Record<string, string> = {
+  'Coinbase Wallet': 'coinbase.svg',
+  MetaMask: 'metamask.svg',
+  Phantom: 'phantom.svg',
+  'Rabby Wallet': 'rabby.svg',
+  Rainbow: 'rainbow.svg',
+  WalletConnect: 'walletconnect.svg',
+}
+
+const PRIORITY: Record<string, number> = {
+  WalletConnect: 20,
+  'Coinbase Wallet': 10,
+}
+
+defineProps<{
+  className?: string
+}>()
+const emit = defineEmits<{
+  connected: [{ address: `0x${string}` | undefined }]
+  disconnected: []
+}>()
+const base = useBaseURL()
+
+const chainId = useChainId()
+const connectors = useConnectors()
+const { mutateAsync: connectAsync } = useConnect()
+const { address, isConnected } = useConnection()
+
+const showConnect = computed(() => !isConnected.value)
+const shownConnectors = computed(() => {
+  const unique = Array.from(
+    new Map(
+      connectors.value?.map((connector) => [connector.name, connector]),
+    ).values(),
+  )
+
+  const filtered =
+    unique.length > 1 ? unique.filter((c) => c.id !== 'injected') : unique
+
+  return filtered.sort((a, b) => {
+    const priorityA = PRIORITY[a.name] ?? 5
+    const priorityB = PRIORITY[b.name] ?? 5
+    return priorityA - priorityB
+  })
+})
+
+const chooseModalOpen = ref(false)
+const errorMessage = ref('')
+const isConnecting = ref(false)
+const walletConnectUri = ref('')
+const metaMaskUri = ref('')
+
+const login = async (connector: Connector) => {
+  errorMessage.value = ''
+  isConnecting.value = true
+  walletConnectUri.value = ''
+  metaMaskUri.value = ''
+
+  const handleMessage = (event: { type: string; data?: unknown }) => {
+    if (event.type === 'display_uri' && typeof event.data === 'string') {
+      if (connector.id === 'walletConnect') {
+        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)
+  }
+
+  try {
+    await connectAsync({ connector, chainId: chainId.value })
+
+    setTimeout(() => {
+      chooseModalOpen.value = false
+      isConnecting.value = false
+      walletConnectUri.value = ''
+      metaMaskUri.value = ''
+    }, 100)
+  } catch (error: unknown) {
+    isConnecting.value = false
+    walletConnectUri.value = ''
+    metaMaskUri.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)
+    }
+  }
+}
+
+const onModalClosed = () => {
+  errorMessage.value = ''
+  isConnecting.value = false
+  walletConnectUri.value = ''
+  metaMaskUri.value = ''
+}
+
+const check = () =>
+  isConnected.value
+    ? emit('connected', { address: address.value })
+    : emit('disconnected')
+watch(isConnected, () => check())
+onMounted(() => check())
+</script>
+
+<style scoped>
+.wallet-options {
+  display: grid;
+  gap: var(--spacer);
+
+  button.choose-connector {
+    width: 100%;
+    inline-size: auto;
+    justify-content: flex-start;
+
+    img,
+    .default-wallet-icon {
+      margin: -1rem 0 -1rem -0.6rem;
+      width: var(--size-5);
+      height: var(--size-5);
+    }
+
+    .default-wallet-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: var(--gray-z-2);
+    }
+
+    span:last-child {
+      border-left: var(--border);
+      padding-left: var(--spacer-sm);
+    }
+  }
+}
+
+.link.muted {
+  justify-self: center;
+  font-size: var(--font-xs);
+}
+</style>

package/src/evm/components/EvmConnectorQR.vue

@@ -0,0 +1,116 @@
+<template>
+  <p>
+    <slot name="instruction">Scan the code in your wallet application</slot>
+  </p>
+  <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>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onMounted } from 'vue'
+import QRCode from 'qrcode'
+import { useClipboard } from '@vueuse/core'
+import Button from '../../base/components/Button.vue'
+import Icon from '../../base/components/Icon.vue'
+
+const props = defineProps<{
+  uri: string
+}>()
+
+const qrCanvas = ref<HTMLCanvasElement | null>(null)
+const { copy, copied: isCopied } = useClipboard()
+
+const generateQR = async () => {
+  if (!qrCanvas.value || !props.uri) return
+
+  try {
+    await QRCode.toCanvas(qrCanvas.value, props.uri, {
+      width: 300,
+      margin: 2,
+      color: {
+        dark: '#000000',
+        light: '#FFFFFF',
+      },
+    })
+  } catch (error) {
+    console.error('Failed to generate QR code:', error)
+  }
+}
+
+const copyUri = () => copy(props.uri)
+
+watch(() => props.uri, generateQR, { immediate: true })
+
+onMounted(() => {
+  generateQR()
+})
+</script>
+
+<style scoped>
+p {
+  text-align: center;
+  @mixin ui-font;
+  color: var(--muted);
+  font-size: var(--font-sm);
+}
+
+.qr-frame {
+  background: white;
+  padding: var(--spacer-sm);
+  max-width: 15rem;
+  max-height: 15rem;
+  border: var(--border);
+  border-radius: var(--border-radius);
+  margin: 0 auto;
+
+  canvas {
+    width: 100% !important;
+    height: 100% !important;
+  }
+}
+
+.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);
+    }
+  }
+}
+</style>

package/src/evm/components/EvmMetaMaskQR.vue

@@ -0,0 +1,15 @@
+<template>
+  <EvmConnectorQR :uri="uri">
+    <template #instruction>
+      Scan the code in your MetaMask mobile app
+    </template>
+  </EvmConnectorQR>
+</template>
+
+<script setup lang="ts">
+import EvmConnectorQR from './EvmConnectorQR.vue'
+
+defineProps<{
+  uri: string
+}>()
+</script>