@1001-digital/components 1.2.2 → 1.3.0

package/src/evm/components/EvmConnect.vue

@@ -1,303 +0,0 @@
-<template>
-  <EvmInAppWalletSetup
-    v-if="showInAppSetup"
-    @connected="onInAppConnected"
-    @back="showInAppSetup = false"
-  />
-  <template v-else-if="errorMessage">
-    <Alert type="error">
-      {{ errorMessage }}
-    </Alert>
-    <Button
-      class="link muted small"
-      @click="resetConnection"
-    >
-      <Icon type="chevron-left" />
-      <span>Back</span>
-    </Button>
-  </template>
-  <EvmMetaMaskQR
-    v-else-if="metaMaskUri"
-    :uri="metaMaskUri"
-    @back="resetConnection"
-  />
-  <EvmWalletConnectWallets
-    v-else-if="walletConnectUri"
-    :uri="walletConnectUri"
-    @back="resetConnection"
-  />
-  <template v-else-if="isConnecting">
-    <Loading
-      :txt="`Waiting for ${connectingWallet} confirmation...`"
-      spinner
-      stacked
-    />
-  </template>
-  <div
-    v-else
-    class="wallet-options"
-  >
-    <Button
-      v-for="connector in shownConnectors"
-      :key="connector.uid"
-      @click="() => login(connector)"
-      class="block choose-connector"
-    >
-      <img
-        v-if="ICONS[connector.name] || connector.icon"
-        :src="ICONS[connector.name] || connector.icon"
-        :alt="connector.name"
-      />
-      <div
-        v-else
-        class="default-wallet-icon"
-      >
-        <Icon type="wallet" />
-      </div>
-      <span>{{ connector.name }}</span>
-    </Button>
-    <Button
-      v-if="wcConnector"
-      @click="loginWithSafe"
-      class="block choose-connector"
-    >
-      <img
-        :src="safeIcon"
-        alt="Safe"
-      />
-      <span>Safe</span>
-    </Button>
-    <Button
-      v-if="inAppConnector"
-      @click="() => { emit('connecting'); showInAppSetup = true }"
-      class="block choose-connector"
-    >
-      <img
-        :src="inAppIcon"
-        alt="Seed Phrase"
-      />
-      <span>In App</span>
-    </Button>
-    <Button
-      to="https://ethereum.org/wallets/"
-      target="_blank"
-      class="link muted small"
-    >
-      <Icon type="help" />
-      <span>New to wallets?</span>
-    </Button>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed } from 'vue'
-import type { Connector } from '@wagmi/vue'
-import { useConnect, useConnectors, useChainId } from '@wagmi/vue'
-import Button from '../../base/components/Button.vue'
-import Icon from '../../base/components/Icon.vue'
-import Alert from '../../base/components/Alert.vue'
-import Loading from '../../base/components/Loading.vue'
-import EvmMetaMaskQR from './EvmMetaMaskQR.vue'
-import EvmWalletConnectWallets from './EvmWalletConnectWallets.vue'
-import EvmInAppWalletSetup from './EvmInAppWalletSetup.vue'
-
-import coinbaseIcon from '../assets/wallets/coinbase.svg'
-import metamaskIcon from '../assets/wallets/metamask.svg'
-import phantomIcon from '../assets/wallets/phantom.svg'
-import rabbyIcon from '../assets/wallets/rabby.svg'
-import rainbowIcon from '../assets/wallets/rainbow.svg'
-import safeIcon from '../assets/wallets/safe.png'
-import inAppIcon from '../assets/wallets/in-app.svg'
-import walletconnectIcon from '../assets/wallets/walletconnect.svg'
-
-const ICONS: Record<string, string> = {
-  'Base Account': coinbaseIcon,
-  MetaMask: metamaskIcon,
-  Phantom: phantomIcon,
-  'Rabby Wallet': rabbyIcon,
-  Rainbow: rainbowIcon,
-  Safe: safeIcon,
-  'In App': inAppIcon,
-  WalletConnect: walletconnectIcon,
-}
-
-const PRIORITY: Record<string, number> = {
-  WalletConnect: 20,
-  'Base Account': 10,
-}
-
-const emit = defineEmits<{
-  connecting: []
-  connected: []
-}>()
-
-const chainId = useChainId()
-const connectors = useConnectors()
-const { mutateAsync: connectAsync } = useConnect()
-
-const inAppConnector = computed(() =>
-  connectors.value.find((c) => c.type === 'inAppWallet'),
-)
-const showInAppSetup = ref(false)
-
-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' && c.id !== 'safe' && c.type !== 'inAppWallet',
-        )
-      : unique.filter((c) => c.type !== 'inAppWallet')
-
-  return filtered.sort((a, b) => {
-    const priorityA = PRIORITY[a.name] ?? 5
-    const priorityB = PRIORITY[b.name] ?? 5
-    return priorityA - priorityB
-  })
-})
-
-const wcConnector = computed(() =>
-  connectors.value.find((c) => c.id === 'walletConnect'),
-)
-
-const errorMessage = ref('')
-const isConnecting = ref(false)
-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) => {
-  emit('connecting')
-  errorMessage.value = ''
-  isConnecting.value = true
-  connectingWallet.value = safeDeepLink.value ? 'Safe' : connector.name
-  metaMaskUri.value = ''
-  walletConnectUri.value = ''
-
-  const handleMetaMaskMessage = (event: { type: string; data?: unknown }) => {
-    if (event.type === 'display_uri' && typeof event.data === 'string') {
-      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
-      }
-    }
-  }
-
-  if (connector.id === 'metaMaskSDK') {
-    connector.emitter.on('message', handleMetaMaskMessage)
-  } else if (connector.id === 'walletConnect') {
-    connector.emitter.on('message', handleWcMessage)
-  }
-
-  try {
-    await connectAsync({ connector, chainId: chainId.value })
-
-    emit('connected')
-
-    resetConnection()
-  } catch (error: unknown) {
-    isConnecting.value = false
-    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.'
-    }
-    console.error('Wallet connection error:', error)
-  } finally {
-    if (connector.id === 'metaMaskSDK') {
-      connector.emitter.off('message', handleMetaMaskMessage)
-    } else if (connector.id === 'walletConnect') {
-      connector.emitter.off('message', handleWcMessage)
-    }
-  }
-}
-
-const resetConnection = () => {
-  errorMessage.value = ''
-  isConnecting.value = false
-  connectingWallet.value = ''
-  metaMaskUri.value = ''
-  walletConnectUri.value = ''
-  safeDeepLink.value = false
-}
-
-const onInAppConnected = () => {
-  showInAppSetup.value = false
-  emit('connected')
-}
-
-const reset = () => {
-  resetConnection()
-  showInAppSetup.value = false
-}
-
-defineExpose({ reset })
-</script>
-
-<style scoped>
-.wallet-options {
-  display: grid;
-  gap: var(--spacer);
-
-  button.choose-connector {
-    justify-content: flex-start;
-    padding-inline-start: var(--ui-padding-inline);
-
-    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;
-}
-</style>

package/src/evm/components/EvmConnectDialog.vue

@@ -1,75 +0,0 @@
-<template>
-  <Button
-    v-if="showConnect"
-    @click="open = true"
-    :class="className"
-  >
-    <slot>Connect Wallet</slot>
-  </Button>
-  <slot
-    v-else-if="isConnected"
-    name="connected"
-    :address="address"
-  >
-    <EvmAccount :address="address" />
-  </slot>
-
-  <Dialog
-    v-if="showConnect"
-    title="Connect Wallet"
-    v-model:open="open"
-    @closed="onClosed"
-  >
-    <EvmConnect
-      ref="connectRef"
-      @connected="onConnected"
-    />
-  </Dialog>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, watch, onMounted } from 'vue'
-import { useConnection } from '@wagmi/vue'
-import Button from '../../base/components/Button.vue'
-import Dialog from '../../base/components/Dialog.vue'
-import EvmAccount from './EvmAccount.vue'
-import EvmConnect from './EvmConnect.vue'
-
-defineProps<{
-  className?: string
-}>()
-
-const emit = defineEmits<{
-  connected: [{ address: `0x${string}` | undefined }]
-  disconnected: []
-}>()
-
-const { address, isConnected } = useConnection()
-
-const showConnect = computed(() => !isConnected.value)
-const open = ref(false)
-const connectRef = ref<InstanceType<typeof EvmConnect> | null>(null)
-
-const onConnected = () => {
-  open.value = false
-}
-
-const onClosed = () => {
-  connectRef.value?.reset()
-}
-
-const check = () =>
-  isConnected.value
-    ? emit('connected', { address: address.value })
-    : emit('disconnected')
-
-watch(isConnected, () => {
-  check()
-  if (!isConnected.value) {
-    open.value = false
-    connectRef.value?.reset()
-  }
-})
-
-onMounted(() => check())
-</script>

package/src/evm/components/EvmConnectionStatus.vue

@@ -1,13 +0,0 @@
-<template>
-  <slot
-    :status="status"
-    :address="address"
-    :connector="connector"
-  />
-</template>
-
-<script setup lang="ts">
-import { useConnection } from '@wagmi/vue'
-
-const { address, connector, status } = useConnection()
-</script>

package/src/evm/components/EvmConnectorQR.vue

@@ -1,86 +0,0 @@
-<template>
-  <p>
-    <slot name="instruction">Scan the code in your wallet application</slot>
-  </p>
-  <div class="qr-frame">
-    <canvas ref="qrCanvas"></canvas>
-  </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">
-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;
-  }
-}
-
-.copy-uri {
-  width: fit-content;
-  margin: 0 auto;
-}
-</style>