@1001-digital/components 0.0.3 → 0.0.5

package/src/evm/composables/walletExplorer.ts

@@ -0,0 +1,130 @@
+import { ref, computed } from 'vue'
+import { useEvmConfig } from '../config'
+
+const EXPLORER_API = 'https://explorer-api.walletconnect.com/v3'
+const RECENT_KEY = 'evm:recent-wallets'
+const PAGE_SIZE = 40
+
+export interface ExplorerWallet {
+  id: string
+  name: string
+  image_id: string
+  homepage: string
+  mobile: { native: string; universal: string }
+  desktop: { native: string; universal: string }
+  injected: { namespace: string; injected_id: string }[] | null
+}
+
+export function useWalletExplorer() {
+  const config = useEvmConfig()
+  const projectId = computed(() => config.walletConnectProjectId || '')
+
+  const wallets = ref<ExplorerWallet[]>([])
+  const searchResults = ref<ExplorerWallet[]>([])
+  const totalCount = ref(0)
+  const page = ref(0)
+  const loading = ref(false)
+  const searching = ref(false)
+  const recentIds = ref<string[]>(loadRecent())
+
+  const recentWallets = computed(() =>
+    recentIds.value
+      .map(id => wallets.value.find(w => w.id === id))
+      .filter((w): w is ExplorerWallet => !!w)
+  )
+
+  const hasMore = computed(() => wallets.value.length < totalCount.value)
+
+  function imageUrl(wallet: ExplorerWallet) {
+    return `${EXPLORER_API}/logo/md/${wallet.image_id}?projectId=${projectId.value}`
+  }
+
+  function walletHref(wallet: ExplorerWallet, uri: string) {
+    const encoded = encodeURIComponent(uri)
+
+    const universal = wallet.mobile?.universal
+    if (universal) {
+      const base = universal.endsWith('/') ? universal : universal + '/'
+      return `${base}wc?uri=${encoded}`
+    }
+
+    const native = wallet.mobile?.native
+    if (native) {
+      return `${native}wc?uri=${encoded}`
+    }
+
+    return null
+  }
+
+  async function fetchNextPage() {
+    if (!projectId.value || loading.value) return
+    loading.value = true
+    const nextPage = page.value + 1
+    try {
+      const res = await fetch(
+        `${EXPLORER_API}/wallets?projectId=${projectId.value}&entries=${PAGE_SIZE}&page=${nextPage}&sdks=sign_v2`
+      )
+      const data = await res.json()
+      const fetched = Object.values(data.listings || {}) as ExplorerWallet[]
+      wallets.value = nextPage === 1 ? fetched : [...wallets.value, ...fetched]
+      totalCount.value = data.total || 0
+      page.value = nextPage
+    } catch (e) {
+      console.error('Failed to fetch wallets:', e)
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function search(query: string) {
+    if (!projectId.value || !query || query.length < 2) {
+      searchResults.value = []
+      return
+    }
+    searching.value = true
+    try {
+      const res = await fetch(
+        `${EXPLORER_API}/wallets?projectId=${projectId.value}&entries=${PAGE_SIZE}&page=1&search=${encodeURIComponent(query)}&sdks=sign_v2`
+      )
+      const data = await res.json()
+      searchResults.value = Object.values(data.listings || {})
+    } catch (e) {
+      console.error('Failed to search wallets:', e)
+    } finally {
+      searching.value = false
+    }
+  }
+
+  function loadRecent(): string[] {
+    try {
+      return JSON.parse(localStorage.getItem(RECENT_KEY) || '[]')
+    } catch {
+      return []
+    }
+  }
+
+  function addRecent(walletId: string) {
+    const ids = recentIds.value.filter(id => id !== walletId)
+    ids.unshift(walletId)
+    recentIds.value = ids.slice(0, 3)
+    try {
+      localStorage.setItem(RECENT_KEY, JSON.stringify(recentIds.value))
+    } catch {}
+  }
+
+  return {
+    wallets,
+    searchResults,
+    totalCount,
+    page,
+    loading,
+    searching,
+    recentWallets,
+    hasMore,
+    imageUrl,
+    walletHref,
+    fetchNextPage,
+    search,
+    addRecent,
+  }
+}

package/src/evm/config.ts

@@ -14,6 +14,7 @@ export interface EvmConfig {
     indexerUrls?: string[]
   }
   baseURL?: string
+  walletConnectProjectId?: string
 }
 
 export const EvmConfigKey: InjectionKey<EvmConfig> = Symbol('EvmConfig')

package/src/evm/index.ts

@@ -16,6 +16,8 @@ export {
 } from './utils/ens'
 export type { EnsProfile } from './utils/ens'
 export { stringifyJSON, parseJSON, formatPrice } from './utils/price'
+export { resolveUri } from './utils/uri'
+export type { ResolveUriOptions } from './utils/uri'
 
 // Composables
 export { useBaseURL } from './composables/base'
@@ -26,13 +28,20 @@ export {
   useEnsureChainIdCheck,
 } from './composables/chainId'
 export { useEns, useEnsWithAvatar, useEnsProfile } from './composables/ens'
+export { useResolveUri } from './composables/uri'
 export { useGasPrice } from './composables/gasPrice'
 export { usePriceFeed } from './composables/priceFeed'
+export { useWalletExplorer } from './composables/walletExplorer'
+export type { ExplorerWallet } from './composables/walletExplorer'
 
 // Components
 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 EvmProfile } from './components/EvmProfile.vue'
+export { default as EvmSwitchNetwork } from './components/EvmSwitchNetwork.vue'
 export { default as EvmConnectorQR } from './components/EvmConnectorQR.vue'
 export { default as EvmMetaMaskQR } from './components/EvmMetaMaskQR.vue'
 export { default as EvmWalletConnectQR } from './components/EvmWalletConnectQR.vue'
+export { default as EvmWalletConnectWallets } from './components/EvmWalletConnectWallets.vue'
 export { default as EvmTransactionFlow } from './components/EvmTransactionFlow.vue'

package/src/evm/utils/uri.ts

@@ -0,0 +1,24 @@
+export interface ResolveUriOptions {
+  ipfsGateway?: string
+  arweaveGateway?: string
+}
+
+const DEFAULT_IPFS_GATEWAY = 'https://ipfs.io/ipfs/'
+const DEFAULT_ARWEAVE_GATEWAY = 'https://arweave.net/'
+
+export const resolveUri = (
+  uri?: string,
+  options?: ResolveUriOptions,
+): string => {
+  if (!uri) return ''
+
+  const ipfs = options?.ipfsGateway || DEFAULT_IPFS_GATEWAY
+  const ar = options?.arweaveGateway || DEFAULT_ARWEAVE_GATEWAY
+
+  if (uri.startsWith('data:')) return uri
+  if (uri.startsWith('ipfs://')) return ipfs + uri.replace('ipfs://', '')
+  if (uri.startsWith('ar://')) return ar + uri.replace('ar://', '')
+  if (uri.startsWith('Qm') || uri.startsWith('baf')) return ipfs + uri
+
+  return uri
+}

package/src/index.ts

@@ -2,9 +2,13 @@
 export { default as Actions } from './base/components/Actions.vue'
 export { default as Alert } from './base/components/Alert.vue'
 export { default as Button } from './base/components/Button.vue'
+export { default as Calendar } from './base/components/Calendar.vue'
 export { default as Card } from './base/components/Card.vue'
+export { default as Combobox } from './base/components/Combobox.vue'
+export { default as ConfirmDialog } from './base/components/ConfirmDialog.vue'
 export { default as CardLink } from './base/components/CardLink.vue'
 export { default as Dialog } from './base/components/Dialog.vue'
+export { default as Globals } from './base/components/Globals.vue'
 export { default as Dropdown } from './base/components/Dropdown.vue'
 export { default as DropdownCheckboxItem } from './base/components/DropdownCheckboxItem.vue'
 export { default as DropdownGroup } from './base/components/DropdownGroup.vue'
@@ -16,6 +20,8 @@ export { default as DropdownSeparator } from './base/components/DropdownSeparato
 export { default as DropdownSub } from './base/components/DropdownSub.vue'
 export { default as Form } from './base/components/Form.vue'
 export { default as FormCheckbox } from './base/components/FormCheckbox.vue'
+export { default as FormDateField } from './base/components/FormDateField.vue'
+export { default as FormDatePicker } from './base/components/FormDatePicker.vue'
 export { default as FormGroup } from './base/components/FormGroup.vue'
 export { default as FormInputGroup } from './base/components/FormInputGroup.vue'
 export { default as FormItem } from './base/components/FormItem.vue'
@@ -25,13 +31,17 @@ export { default as FormSelect } from './base/components/FormSelect.vue'
 export { default as FormTextarea } from './base/components/FormTextarea.vue'
 export { default as Icon } from './base/components/Icon.vue'
 export { default as Loading } from './base/components/Loading.vue'
+export { default as Opepicon } from './base/components/Opepicon.vue'
 export { default as Popover } from './base/components/Popover.vue'
+export { default as Progress } from './base/components/Progress.vue'
 export { default as Tag } from './base/components/Tag.vue'
 export { default as Tags } from './base/components/Tags.vue'
 export { default as Toasts } from './base/components/Toasts.vue'
 export { default as Tooltip } from './base/components/Tooltip.vue'
 
 // Composables
+export { useConfirm } from './base/composables/confirm'
+export type { ConfirmOptions } from './base/composables/confirm'
 export { useToast } from './base/composables/toast'
 export type {
   Toast as ToastType,
@@ -59,6 +69,14 @@ export {
   asUTCDate,
 } from './base/utils/time'
 
+// Date types
+export {
+  CalendarDate,
+  CalendarDateTime,
+  ZonedDateTime,
+} from '@internationalized/date'
+export type { DateValue } from '@internationalized/date'
+
 // Injection keys & types
 export { IconAliasesKey, defaultIconAliases } from './base/icons'
 export type { IconAliases } from './base/icons'