@1001-digital/components 1.1.10 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1001-digital/components",
-  "version": "1.1.10",
+  "version": "1.2.0",
   "type": "module",
   "sideEffects": [
     "*.css"

package/src/evm/components/EvmConnect.vue

@@ -1,131 +1,102 @@
 <template>
-  <Button
-    v-if="showConnect"
-    @click="chooseModalOpen = true"
-    :class="className"
-  >
-    <slot>Connect Wallet</slot>
-  </Button>
-  <slot
+  <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
-    name="connected"
-    :address="address"
+    class="wallet-options"
   >
-    <EvmAccount :address="address" />
-  </slot>
-
-  <Dialog
-    v-if="showConnect"
-    title="Connect Wallet"
-    v-model:open="chooseModalOpen"
-    @closed="onModalClosed"
-  >
-    <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"
+    <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="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
+        <Icon type="wallet" />
+      </div>
+      <span>{{ connector.name }}</span>
+    </Button>
+    <Button
+      v-if="wcConnector"
+      @click="loginWithSafe"
+      class="block choose-connector"
+    >
+      <img
+        :src="safeIcon"
+        alt="Safe"
       />
-    </template>
-    <div
-      v-else
-      class="wallet-options"
+      <span>Safe</span>
+    </Button>
+    <Button
+      v-if="inAppConnector"
+      @click="showInAppSetup = true"
+      class="block choose-connector"
     >
-      <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="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>
-  </Dialog>
+      <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, watch, onMounted } from 'vue'
+import { ref, computed } from 'vue'
 import type { Connector } from '@wagmi/vue'
-import {
-  useConnection,
-  useConnect,
-  useConnectors,
-  useChainId,
-} from '@wagmi/vue'
+import { 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 EvmMetaMaskQR from './EvmMetaMaskQR.vue'
 import EvmWalletConnectWallets from './EvmWalletConnectWallets.vue'
 import EvmInAppWalletSetup from './EvmInAppWalletSetup.vue'
@@ -155,24 +126,19 @@ const PRIORITY: Record<string, number> = {
   'Base Account': 10,
 }
 
-defineProps<{
-  className?: string
-}>()
 const emit = defineEmits<{
-  connected: [{ address: `0x${string}` | undefined }]
-  disconnected: []
+  connected: []
 }>()
+
 const chainId = useChainId()
 const connectors = useConnectors()
 const { mutateAsync: connectAsync } = useConnect()
-const { address, isConnected } = useConnection()
 
 const inAppConnector = computed(() =>
   connectors.value.find((c) => c.type === 'inAppWallet'),
 )
 const showInAppSetup = ref(false)
 
-const showConnect = computed(() => !isConnected.value)
 const shownConnectors = computed(() => {
   const unique = Array.from(
     new Map(
@@ -199,7 +165,6 @@ const wcConnector = computed(() =>
   connectors.value.find((c) => c.id === 'walletConnect'),
 )
 
-const chooseModalOpen = ref(false)
 const errorMessage = ref('')
 const isConnecting = ref(false)
 const connectingWallet = ref('')
@@ -250,11 +215,8 @@ const login = async (connector: Connector) => {
     await connectAsync({ connector, chainId: chainId.value })
 
     setTimeout(() => {
-      chooseModalOpen.value = false
-      isConnecting.value = false
-      metaMaskUri.value = ''
-      walletConnectUri.value = ''
-      safeDeepLink.value = false
+      resetConnection()
+      emit('connected')
     }, 100)
   } catch (error: unknown) {
     isConnecting.value = false
@@ -262,18 +224,15 @@ const login = async (connector: Connector) => {
     walletConnectUri.value = ''
     safeDeepLink.value = false
 
-    // 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.'
-      }
+    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 {
@@ -295,25 +254,16 @@ const resetConnection = () => {
 }
 
 const onInAppConnected = () => {
-  chooseModalOpen.value = false
   showInAppSetup.value = false
+  emit('connected')
 }
 
-const onModalClosed = () => {
-  chooseModalOpen.value = false
+const reset = () => {
   resetConnection()
   showInAppSetup.value = false
 }
 
-const check = () =>
-  isConnected.value
-    ? emit('connected', { address: address.value })
-    : emit('disconnected')
-watch(isConnected, () => {
-  check()
-  if (!isConnected.value) onModalClosed()
-})
-onMounted(() => check())
+defineExpose({ reset })
 </script>
 
 <style scoped>

package/src/evm/components/EvmConnectDialog.vue

@@ -0,0 +1,75 @@
+<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

@@ -0,0 +1,13 @@
+<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/index.ts

@@ -41,6 +41,8 @@ export { inAppWallet, prepareInAppWallet } from './connectors/inAppWallet'
 export { default as EvmAccount } from './components/EvmAccount.vue'
 export { default as EvmAvatar } from './components/EvmAvatar.vue'
 export { default as EvmConnect } from './components/EvmConnect.vue'
+export { default as EvmConnectDialog } from './components/EvmConnectDialog.vue'
+export { default as EvmConnectionStatus } from './components/EvmConnectionStatus.vue'
 export { default as EvmProfile } from './components/EvmProfile.vue'
 export { default as EvmSwitchNetwork } from './components/EvmSwitchNetwork.vue'
 export { default as EvmConnectorQR } from './components/EvmConnectorQR.vue'