@1001-digital/components 1.2.0 → 1.2.2

package/package.json

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

package/src/evm/components/EvmConnect.vue

@@ -69,7 +69,7 @@
     </Button>
     <Button
       v-if="inAppConnector"
-      @click="showInAppSetup = true"
+      @click="() => { emit('connecting'); showInAppSetup = true }"
       class="block choose-connector"
     >
       <img
@@ -127,6 +127,7 @@ const PRIORITY: Record<string, number> = {
 }
 
 const emit = defineEmits<{
+  connecting: []
   connected: []
 }>()
 
@@ -179,6 +180,7 @@ const loginWithSafe = () => {
 }
 
 const login = async (connector: Connector) => {
+  emit('connecting')
   errorMessage.value = ''
   isConnecting.value = true
   connectingWallet.value = safeDeepLink.value ? 'Safe' : connector.name
@@ -214,10 +216,9 @@ const login = async (connector: Connector) => {
   try {
     await connectAsync({ connector, chainId: chainId.value })
 
-    setTimeout(() => {
-      resetConnection()
-      emit('connected')
-    }, 100)
+    emit('connected')
+
+    resetConnection()
   } catch (error: unknown) {
     isConnecting.value = false
     metaMaskUri.value = ''

package/src/evm/components/EvmSiwe.vue

@@ -0,0 +1,190 @@
+<template>
+  <Loading
+    v-if="step === 'signing'"
+    spinner
+    stacked
+    :txt="connector?.name
+      ? `Requesting signature from ${connector.name}...`
+      : 'Requesting signature...'"
+  />
+
+  <Loading
+    v-else-if="step === 'verifying'"
+    spinner
+    stacked
+    txt="Verifying signature..."
+  />
+
+  <template v-else-if="step === 'complete'">
+    <slot name="complete">
+      <Alert type="info">
+        <p>Successfully signed in.</p>
+      </Alert>
+    </slot>
+  </template>
+
+  <template v-else-if="step === 'error'">
+    <Alert type="error">
+      <p>{{ errorMessage }}</p>
+    </Alert>
+    <Button
+      class="secondary"
+      @click="signIn"
+    >Try Again</Button>
+  </template>
+
+  <template v-else>
+    <slot name="idle">
+      <p v-if="props.statement">{{ props.statement }}</p>
+    </slot>
+    <Button @click="signIn">
+      Sign In
+    </Button>
+  </template>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { signMessage } from '@wagmi/core'
+import { useConfig, useConnection } from '@wagmi/vue'
+import type { Config } from '@wagmi/vue'
+import Button from '../../base/components/Button.vue'
+import Alert from '../../base/components/Alert.vue'
+import Loading from '../../base/components/Loading.vue'
+import { createSiweMessage } from '../utils/siwe'
+import { useSiwe } from '../composables/siwe'
+
+type Step = 'idle' | 'signing' | 'verifying' | 'complete' | 'error'
+
+const props = defineProps<{
+  getNonce: () => Promise<string>
+  verify: (message: string, signature: string) => Promise<boolean>
+  domain?: string
+  statement?: string
+  uri?: string
+  resources?: string[]
+  requestId?: string
+  expirationTime?: string
+}>()
+
+const emit = defineEmits<{
+  authenticated: [{ address: `0x${string}`; chainId: number }]
+  error: [error: string]
+}>()
+
+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
+    if (re.test((current as { message?: string }).message || '')) return true
+    current = current.cause as Record<string, unknown> | undefined
+  }
+  return false
+}
+
+const config = useConfig()
+const { address, chainId, connector } = useConnection()
+const { setSession } = useSiwe()
+
+const step = ref<Step>('idle')
+const errorMessage = ref('')
+
+const signIn = async () => {
+  const currentAddress = address.value
+  const currentChainId = chainId.value
+
+  if (!currentAddress || !currentChainId) {
+    errorMessage.value = 'Wallet not connected.'
+    step.value = 'error'
+    emit('error', errorMessage.value)
+    return
+  }
+
+  errorMessage.value = ''
+
+  // Get nonce
+  let nonce: string
+  try {
+    nonce = await props.getNonce()
+  } catch {
+    errorMessage.value = 'Failed to get authentication nonce.'
+    step.value = 'error'
+    emit('error', errorMessage.value)
+    return
+  }
+
+  // Sign message
+  step.value = 'signing'
+  const message = createSiweMessage({
+    domain: props.domain || window.location.host,
+    address: currentAddress,
+    uri: props.uri || window.location.origin,
+    chainId: currentChainId,
+    nonce,
+    statement: props.statement,
+    expirationTime: props.expirationTime,
+    requestId: props.requestId,
+    resources: props.resources,
+  })
+
+  let signature: string
+  try {
+    signature = await signMessage(config as Config, { message })
+  } catch (e: unknown) {
+    if (isUserRejection(e)) {
+      errorMessage.value = 'Signature rejected by user.'
+    } else {
+      const err = e as { shortMessage?: string; message?: string }
+      errorMessage.value = err.shortMessage || err.message || 'Failed to sign message.'
+    }
+    step.value = 'error'
+    emit('error', errorMessage.value)
+    console.error('SIWE signing error:', e)
+    return
+  }
+
+  // Verify with backend
+  step.value = 'verifying'
+  try {
+    const verified = await props.verify(message, signature)
+
+    if (!verified) {
+      throw new Error('Signature verification failed')
+    }
+  } catch (e: unknown) {
+    const err = e as { message?: string }
+    errorMessage.value = err.message || 'Verification failed.'
+    step.value = 'error'
+    emit('error', errorMessage.value)
+    console.error('SIWE verification error:', e)
+    return
+  }
+
+  // Update shared authentication state
+  setSession({
+    address: currentAddress,
+    chainId: currentChainId,
+  })
+
+  step.value = 'complete'
+  emit('authenticated', {
+    address: currentAddress,
+    chainId: currentChainId,
+  })
+}
+
+const reset = () => {
+  step.value = 'idle'
+  errorMessage.value = ''
+}
+
+defineExpose({ reset })
+</script>
+
+<style scoped>
+.secondary {
+  margin-top: var(--spacer-sm);
+}
+</style>

package/src/evm/components/EvmSiweDialog.vue

@@ -0,0 +1,93 @@
+<template>
+  <Button
+    v-if="!isAuthenticated"
+    @click="open = true"
+    :class="className"
+  >
+    <slot>Sign In</slot>
+  </Button>
+  <slot
+    v-else
+    name="authenticated"
+    :address="session?.address"
+    :sign-out="handleSignOut"
+  >
+    <Button
+      @click="handleSignOut"
+      :class="className"
+    >Sign Out</Button>
+  </slot>
+
+  <Dialog
+    v-if="!isAuthenticated"
+    title="Sign In with Ethereum"
+    v-model:open="open"
+    @closed="onClosed"
+  >
+    <EvmSiwe
+      ref="siweRef"
+      :get-nonce="getNonce"
+      :verify="verify"
+      :domain="domain"
+      :statement="statement"
+      :uri="uri"
+      :resources="resources"
+      :request-id="requestId"
+      :expiration-time="expirationTime"
+      @authenticated="onAuthenticated"
+      @error="(e) => emit('error', e)"
+    />
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import Button from '../../base/components/Button.vue'
+import Dialog from '../../base/components/Dialog.vue'
+import EvmSiwe from './EvmSiwe.vue'
+import { useSiwe } from '../composables/siwe'
+
+const props = defineProps<{
+  className?: string
+  getNonce: () => Promise<string>
+  verify: (message: string, signature: string) => Promise<boolean>
+  domain?: string
+  statement?: string
+  uri?: string
+  resources?: string[]
+  requestId?: string
+  expirationTime?: string
+}>()
+
+const emit = defineEmits<{
+  authenticated: [{ address: `0x${string}`; chainId: number }]
+  signedOut: []
+  error: [error: string]
+}>()
+
+const { isAuthenticated, session, signOut } = useSiwe()
+
+const open = ref(false)
+const siweRef = ref<InstanceType<typeof EvmSiwe> | null>(null)
+
+const onAuthenticated = (data: { address: `0x${string}`; chainId: number }) => {
+  open.value = false
+  emit('authenticated', data)
+}
+
+const onClosed = () => {
+  siweRef.value?.reset()
+}
+
+const handleSignOut = () => {
+  signOut()
+  emit('signedOut')
+}
+
+watch(isAuthenticated, (authenticated) => {
+  if (!authenticated) {
+    open.value = false
+    siweRef.value?.reset()
+  }
+})
+</script>

package/src/evm/composables/siwe.ts

@@ -0,0 +1,89 @@
+import { ref, readonly } from 'vue'
+import { signMessage } from '@wagmi/core'
+import { useConfig, useConnection } from '@wagmi/vue'
+import type { Config } from '@wagmi/vue'
+import { createSiweMessage, type SiweMessageParams } from '../utils/siwe'
+
+export interface SiweSession {
+  address: `0x${string}`
+  chainId: number
+}
+
+export interface UseSiweOptions {
+  getNonce: () => Promise<string>
+  verify: (message: string, signature: string) => Promise<boolean>
+  domain?: string
+  uri?: string
+  statement?: string
+  expirationTime?: string
+  requestId?: string
+  resources?: string[]
+}
+
+const _isAuthenticated = ref(false)
+const _session = ref<SiweSession | null>(null)
+
+export const useSiwe = () => {
+  const config = useConfig()
+  const { address, chainId } = useConnection()
+
+  const setSession = (session: SiweSession) => {
+    _isAuthenticated.value = true
+    _session.value = session
+  }
+
+  const clearSession = () => {
+    _isAuthenticated.value = false
+    _session.value = null
+  }
+
+  const signIn = async (options: UseSiweOptions) => {
+    const currentAddress = address.value
+    const currentChainId = chainId.value
+
+    if (!currentAddress || !currentChainId) {
+      throw new Error('Wallet not connected')
+    }
+
+    const nonce = await options.getNonce()
+
+    const messageParams: SiweMessageParams = {
+      domain: options.domain || window.location.host,
+      address: currentAddress,
+      uri: options.uri || window.location.origin,
+      chainId: currentChainId,
+      nonce,
+      statement: options.statement,
+      expirationTime: options.expirationTime,
+      requestId: options.requestId,
+      resources: options.resources,
+    }
+
+    const message = createSiweMessage(messageParams)
+    const signature = await signMessage(config as Config, { message })
+
+    const verified = await options.verify(message, signature)
+
+    if (!verified) {
+      throw new Error('Signature verification failed')
+    }
+
+    setSession({
+      address: currentAddress,
+      chainId: currentChainId,
+    })
+  }
+
+  const signOut = () => {
+    clearSession()
+  }
+
+  return {
+    isAuthenticated: readonly(_isAuthenticated),
+    session: readonly(_session),
+    signIn,
+    signOut,
+    setSession,
+    clearSession,
+  }
+}

package/src/evm/index.ts

@@ -18,6 +18,8 @@ export type { EnsProfile } from './utils/ens'
 export { stringifyJSON, parseJSON, formatPrice } from './utils/price'
 export { resolveUri } from './utils/uri'
 export type { ResolveUriOptions } from './utils/uri'
+export { createSiweMessage } from './utils/siwe'
+export type { SiweMessageParams } from './utils/siwe'
 
 // Composables
 export { useBaseURL } from './composables/base'
@@ -33,6 +35,8 @@ export { useGasPrice } from './composables/gasPrice'
 export { usePriceFeed } from './composables/priceFeed'
 export { useWalletExplorer } from './composables/walletExplorer'
 export type { ExplorerWallet } from './composables/walletExplorer'
+export { useSiwe } from './composables/siwe'
+export type { SiweSession, UseSiweOptions } from './composables/siwe'
 
 // Connectors
 export { inAppWallet, prepareInAppWallet } from './connectors/inAppWallet'
@@ -52,3 +56,5 @@ export { default as EvmWalletConnectWallets } from './components/EvmWalletConnec
 export { default as EvmTransactionFlow } from './components/EvmTransactionFlow.vue'
 export { default as EvmSeedPhraseInput } from './components/EvmSeedPhraseInput.vue'
 export { default as EvmInAppWalletSetup } from './components/EvmInAppWalletSetup.vue'
+export { default as EvmSiwe } from './components/EvmSiwe.vue'
+export { default as EvmSiweDialog } from './components/EvmSiweDialog.vue'

package/src/evm/utils/siwe.ts

@@ -0,0 +1,70 @@
+export interface SiweMessageParams {
+  domain: string
+  address: string
+  uri: string
+  version?: string
+  chainId: number
+  nonce: string
+  issuedAt?: string
+  expirationTime?: string
+  notBefore?: string
+  requestId?: string
+  statement?: string
+  resources?: string[]
+}
+
+export function createSiweMessage(params: SiweMessageParams): string {
+  const {
+    domain,
+    address,
+    uri,
+    version = '1',
+    chainId,
+    nonce,
+    issuedAt = new Date().toISOString(),
+    expirationTime,
+    notBefore,
+    requestId,
+    statement,
+    resources,
+  } = params
+
+  const lines: string[] = [
+    `${domain} wants you to sign in with your Ethereum account:`,
+    address,
+    '',
+  ]
+
+  if (statement) {
+    lines.push(statement, '')
+  }
+
+  lines.push(
+    `URI: ${uri}`,
+    `Version: ${version}`,
+    `Chain ID: ${chainId}`,
+    `Nonce: ${nonce}`,
+    `Issued At: ${issuedAt}`,
+  )
+
+  if (expirationTime) {
+    lines.push(`Expiration Time: ${expirationTime}`)
+  }
+
+  if (notBefore) {
+    lines.push(`Not Before: ${notBefore}`)
+  }
+
+  if (requestId) {
+    lines.push(`Request ID: ${requestId}`)
+  }
+
+  if (resources?.length) {
+    lines.push('Resources:')
+    for (const resource of resources) {
+      lines.push(`- ${resource}`)
+    }
+  }
+
+  return lines.join('\n')
+}