Connector API v2

.changeset/tough-boats-fry.md

@@ -0,0 +1,7 @@
+---
+'@fractl-ui/evm': patch
+'@fractl-ui/starknet': patch
+'fractl-ui': patch
+---
+
+i will find this text and edit it later

.gitignore

@@ -26,3 +26,4 @@ dist-ssr
 *.sln
 *.sw?
 .vercel
+workbench/src/fractl

.scripts/mount.sh

@@ -0,0 +1,5 @@
+#!/usr/bin/env sh
+echo "mount ./packages/ui/src to ./workbench/src/fractl"
+echo "$(pwd) should be the root of the repo"
+
+sudo mount --bind ./packages/ui/src ./workbench/src/fractl

package.json

@@ -9,6 +9,7 @@
 		"prepare": "husky install",
 		"build": "pnpm -F='./packages/*' --parallel build",
 		"check": "pnpm -r --no-bail --parallel check",
+		"dev": "pnpm -F wb dev",
 		"dev:site": "pnpm -F site dev",
 		"dev:pkg": "pnpm -F='./packages/*' --parallel dev",
 		"build:site": "pnpm -F site build",
@@ -37,4 +38,4 @@
 		"tslib": "^2.6.3",
 		"typescript": "^5.5.4"
 	}
-}
+}

packages/evm/package.json

@@ -41,7 +41,8 @@
 	},
 	"devDependencies": {
 		"@fractl-ui/types": "workspace:^",
-		"vite-plugin-dts": "^3.7.2",
-		"vite": "^5.3.5"
+		"@usecapsule/web-sdk": "^1.23.0",
+		"vite": "^5.3.5",
+		"vite-plugin-dts": "^3.7.2"
 	}
-}
+}

packages/evm/src/addConnection.ts

@@ -1,6 +1,6 @@
 import type { AccountData, AccountDataResponse, Config } from '@fractl-ui/types'
 import {
-	connect,
+	connect as wagmiConnect,
 	reconnect,
 	disconnect,
 	getAccount,
@@ -14,106 +14,99 @@ import {
 } from '@wagmi/core'
 import { formatUnits } from 'viem/utils'
 import { map } from 'nanostores'
+import { getUri } from './connect.js'
 
 type WagmiConfig = Config<Connector>
 
 /**
  * Provides connection details to fractl-modal passed into it's config parameter
  */
-export const addEvmConnection = async (
-	config: wagmiConfig,
-	{ resolver } = { resolver: 'ENS' }
-): Promise<WagmiConfig> => {
+export const eip155 = (config: wagmiConfig): WagmiConfig => {
 	const state = map({
 		current: config.state.connections.get(config.state.current),
 		status: config.state.status
 	})
 
-	const accountData = map<AccountData>({
-		account: null,
-		balance: null,
-		nameService: {
-			name: null,
-			avatar: null
-		}
-	})
-
 	config.subscribe(
 		(state) => state.current,
 		(current) => state.setKey('current', config.state.connections.get(current))
 	)
 	config.subscribe(
 		(state) => state.status,
 		(status) => {
-			updateAccount(status)
 			state.setKey('status', status)
 		}
 	)
 
-	async function updateAccount(
-		status: 'connected' | 'connecting' | 'disconnected' | 'reconnecting'
-	) {
-		if (status !== 'connected') {
-			accountData.setKey('account', null)
-			accountData.setKey('balance', null)
-			accountData.setKey('nameService', { name: undefined, avatar: undefined })
-			return
-		}
-
-		const account = getAccount(config)
-		accountData.setKey('account', account)
-		/* Not sure if this is possible */
-		if (!account.isConnected) throw Error('account is not connected')
-		const address = account.address!
-
-		try {
-			const _balance = await getBalance(config, { address })
-			const balance: AccountDataResponse['balance'] = {
-				symbol: _balance.symbol,
-				value: formatUnits(_balance.value, _balance.decimals)
+	type WatchAccountProps = {
+		address: `0x${string}`
+		resolver?: string
+	}
+	const watchAccount = ({ address, resolver }: WatchAccountProps) => {
+		resolver = resolver ?? 'ENS'
+		const account = map<AccountData>({
+			address,
+			balance: null,
+			nameService: {
+				name: null,
+				avatar: null
 			}
-			accountData.setKey('balance', balance)
-
-			let name: GetEnsNameReturnType, avatar: GetEnsAvatarReturnType
+		})
+		;(async function () {
+			try {
+				const _balance = await getBalance(config, { address })
+				const balance: AccountDataResponse['balance'] = {
+					symbol: _balance.symbol,
+					value: formatUnits(_balance.value, _balance.decimals)
+				}
+				account.setKey('balance', balance)
 
-			switch (resolver) {
-				default:
-					name = await getEnsName(config, {
-						address,
-						blockTag: 'finalized'
-					})
-
-					avatar =
-						name &&
-						(await getEnsAvatar(config, {
-							name,
+				let name: GetEnsNameReturnType, avatar: GetEnsAvatarReturnType
+				switch (resolver) {
+					default:
+						name = await getEnsName(config, {
+							address,
 							blockTag: 'finalized'
-						}))
+						})
+
+						avatar =
+							name &&
+							(await getEnsAvatar(config, {
+								name,
+								blockTag: 'finalized'
+							}))
+				}
+				account.setKey('nameService', { name, avatar })
+				console.debug(account.get())
+			} catch (error) {
+				console.error('fetch error', error, account.get())
 			}
+		})()
+		return account
+	}
 
-			// accountData.setKey('account', account)
-			accountData.setKey('nameService', { name, avatar })
-			console.log(accountData.get())
-		} catch (error) {
-			console.log(accountData.get())
-			console.error('fetch error', error)
-		}
+	const connect = (connector: Connector) => async () => {
+		const { accounts, chainId } = await wagmiConnect(config, { connector })
+		return { accounts, chainId }
 	}
 
 	return {
+		namespace: 'eip155',
 		state: { subscribe: state.subscribe },
-		accountData: { subscribe: accountData.subscribe },
 		get connectors() {
-			return config.connectors
-		},
-		connect: async (connector: Connector) => {
-			const { accounts, chainId } = await connect(config, { connector })
-			accountData.setKey('account', {
-				address: accounts?.[0],
-				addresses: accounts
+			const conn = config.connectors.map((c) => {
+				c.fractl = { getUri: {}, connect: {} }
+
+				if (c.id === 'walletConnect')
+					c.fractl.getUri = async (callback: (uri: string) => void) =>
+						await getUri(c, callback)
+
+				c.fractl.connect = connect(c)
+				return c
 			})
-			return { accounts, chainId }
+			return conn
 		},
+		watchAccount,
 		reconnect: async (connectors: Connector[]) =>
 			await reconnect(config, { connectors }),
 		disconnect: async (connector?: Connector) =>

packages/evm/src/connect.ts

@@ -0,0 +1,12 @@
+import {EthereumProvider} from '@walletconnect/ethereum-provider'
+import type { Connector } from '@wagmi/core'
+type Provider = Awaited<ReturnType<(typeof EthereumProvider)['init']>>
+
+export const getUri = async (connector: Connector, callback: (uri: string)=>void) => {
+	const provider = await connector.getProvider() as Provider
+	if (!provider) return
+	console.log(provider)
+	provider.on('display_uri', callback)
+	provider.connect()
+}
+

packages/evm/src/index.ts

@@ -3,4 +3,4 @@ export { mock } from './connectors/mock.js'
 /* Could just delete this folder with new project structure... */
 export { walletConnect } from './connectors/walletConnect.js'
 
-export { addEvmConnection } from './addConnection.js'
+export { eip155 } from './addConnection.js'

packages/evm/vite.config.ts

@@ -18,11 +18,13 @@ export default defineConfig({
 		},
 		rollupOptions: {
 			treeshake: true,
-			external: ['@walletconnect/ethereum-provider', '@wagmi/core', 'viem'],
+			external: ['@walletconnect/ethereum-provider', '@wagmi/core', 'viem', '@usecapsule/web-sdk'],
 			output: {
 				globals: {
 					'@wagmi/core': 'wagmi',
-					'@walletconnect/ethereum-provider': 'walletconnect-ethereum-provider'
+					'@walletconnect/ethereum-provider': 'walletconnect-ethereum-provider',
+					'@usecapsule/web-sdk': 'usecapsule-web-sdk',
+					viem: 'viem'
 				}
 			}
 		}

packages/fuel/package.json

@@ -29,14 +29,14 @@
 	},
 	"dependencies": {
 		"@fuel-wallet/sdk": "^0.15.2",
-		"nanostores": "^0.9.5",
-		"fuels": "^0.74.0"
+		"fuels": "^0.74.0",
+		"nanostores": "^0.9.5"
 	},
 	"devDependencies": {
 		"@fractl-ui/types": "workspace:^",
 		"@fuel-wallet/playwright-utils": "^0.15.2",
-		"playwright": "^1.41.2",
-		"vite-plugin-dts": "^3.7.2",
-		"vite": "^5.3.5"
+		"playwright": "^1.45.3",
+		"vite": "^5.3.5",
+		"vite-plugin-dts": "^3.9.1"
 	}
 }

packages/fuel/src/addConnection.ts

@@ -19,7 +19,7 @@ type FuelConnectionObj = Config<FuelConnector>
 /**
  * Provides connection details to fractl-modal passed into it's config parameter
  */
-export const addFuel = async (
+export const fuel = async (
 	{ config, providerUrl, autoconnect }: FuelConnectionProps = {
 		autoconnect: true,
 		providerUrl: 'https://beta-5.fuel.network/graphql'
@@ -114,6 +114,7 @@ export const addFuel = async (
 	}
 
 	return {
+		namespace: 'fuel',
 		state: { subscribe: state.subscribe },
 		accountData: { subscribe: accountData.subscribe },
 		get connectors() {

packages/fuel/src/index.ts

@@ -1 +1 @@
-export { addFuel } from './addConnection.js'
+export { fuel } from './addConnection.js'