Re-implement transfer using funtypes (#204)

* redefine amount as bigint

* add max button to amount input

* rework component style handling

* amount field update

* amount and input address field

* ease on address checking

* rework caching (+10 squashed commits)
Squashed commits:
[3790ff2] renamed recent transfer to history
[3f1cdbc] apply form to transferpage
[2a6a86c] cleanup loggers
[8c8a92c] fix recent transfer formatting
[094e796] record transfer from separate component
[296e6a7] add transfer function to form
[681b2f3] remove unused component
[5ba1f6f] transfer button component
[b60537d] move functionality from provider
[a4b81ee] input text color on invalid

* create wallet context

* cleanup legacy components

* fix max button

* transfer redirect

* fix formatting issue

* Update app/ts/components/ConnectAccount.tsx

inline error message

Co-authored-by: KillariDev <[email protected]>

* Update app/ts/components/TransferAddressField.tsx

remove unused code

Co-authored-by: KillariDev <[email protected]>

* remove unreachable switch default case

* remove unused quantity parser schema

* Improved Token Picker and New Token Dialogs (#207)

* move account schema to separate context

* cleaner add token implementation

* update add behavior and icon

* fix code formatting

* auto fetch token balance

* Update app/ts/components/TokenAdd.tsx

parallelize call

Co-authored-by: KillariDev <[email protected]>

---------

Co-authored-by: KillariDev <[email protected]>

---------

Co-authored-by: KillariDev <[email protected]>

app/ts/components/App.tsx

@@ -1,26 +1,29 @@
 import { Route, Router } from './HashRouter.js'
-import { TransferPage } from './TransferPage/index.js'
 import { Notices } from './Notice.js'
 import { SplashScreen } from './SplashScreen.js'
 import { TransactionPage } from './TransactionPage/index.js'
 import { ErrorAlert } from './ErrorAlert.js'
+import { TransferPage } from './TransferPage/index.js'
+import { WalletProvider } from '../context/Wallet.js'
+import { AccountProvider } from '../context/Account.js'
 
 export function App() {
 	return (
 		<SplashScreen>
-			<Router>
-				<Route path=''>
-					<TransferPage />
-				</Route>
-				<Route path='#tx/:transaction_hash'>
-					<TransactionPage />
-				</Route>
-				<Route path='#saved/:index'>
-					<TransferPage />
-				</Route>
-			</Router>
-			<Notices />
-			<ErrorAlert />
+			<WalletProvider>
+				<AccountProvider>
+					<Router>
+						<Route path=''>
+							<TransferPage />
+						</Route>
+						<Route path='#tx/:transaction_hash'>
+							<TransactionPage />
+						</Route>
+					</Router>
+					<Notices />
+					<ErrorAlert />
+				</AccountProvider>
+			</WalletProvider>
 		</SplashScreen>
 	)
 }

app/ts/components/ConnectAccount.tsx

@@ -1,12 +1,38 @@
-import { useAccount } from '../store/account.js'
-import { useNetwork } from '../store/network.js'
+import { useSignalEffect } from '@preact/signals'
+import { useAsyncState } from '../library/preact-utilities.js'
+import { EthereumAddress } from '../schema.js'
+import { useWallet } from '../context/Wallet.js'
+import { useAccount } from '../context/Account.js'
+import { useNotice } from '../store/notice.js'
 import { AsyncText } from './AsyncText.js'
 import SVGBlockie from './SVGBlockie.js'
 
 export const ConnectAccount = () => {
-	const { address, connect } = useAccount()
+	const { browserProvider } = useWallet()
+	const { account } = useAccount()
+	const { value: query, waitFor } = useAsyncState<EthereumAddress>()
+	const { notify } = useNotice()
 
-	switch (address.value.state) {
+	const connect = () => {
+		if (!browserProvider) {
+			notify({ message: 'No compatible web3 wallet detected.', title: 'Failed to connect' })
+			return
+		}
+		waitFor(async () => {
+			const signer = await browserProvider.getSigner()
+			return EthereumAddress.parse(signer.address)
+		})
+	}
+
+	const listenForQueryChanges = () => {
+		// do not reset shared state for other instances of this hooks
+		if (query.value.state === 'inactive') return
+		account.value = query.value
+	}
+
+	useSignalEffect(listenForQueryChanges)
+
+	switch (account.value.state) {
 		case 'inactive':
 		case 'rejected':
 			return (
@@ -35,16 +61,17 @@ export const ConnectAccount = () => {
 }
 
 const AccountAddress = () => {
-	const { address } = useAccount()
+	const { account } = useAccount()
 
-	switch (address.value.state) {
+	switch (account.value.state) {
 		case 'inactive':
+			return <></>
 		case 'rejected':
 			return <div class='whitespace-nowrap overflow-hidden overflow-ellipsis font-bold'>Not connected</div>
 		case 'pending':
 			return <AsyncText placeholderLength={40} />
 		case 'resolved':
-			return <div class='whitespace-nowrap overflow-hidden overflow-ellipsis font-bold'>{address.value.value}</div>
+			return <div class='whitespace-nowrap overflow-hidden overflow-ellipsis font-bold'>{account.value.value}</div>
 	}
 }
 
@@ -55,9 +82,9 @@ const NetworkIcon = () => (
 )
 
 const AccountAvatar = () => {
-	const { address } = useAccount()
+	const { account } = useAccount()
 
-	switch (address.value.state) {
+	switch (account.value.state) {
 		case 'inactive':
 		case 'rejected':
 			return <div class='aspect-square w-10 outline-2 outline-white/20 bg-white/20' />
@@ -66,16 +93,16 @@ const AccountAvatar = () => {
 		case 'resolved':
 			return (
 				<div style={{ fontSize: '2.5em' }}>
-					<SVGBlockie address={address.value.value} />
+					<SVGBlockie address={account.value.value} />
 				</div>
 			)
 	}
 }
 
 const WalletNetwork = () => {
-	const { address } = useAccount()
+	const { account } = useAccount()
 
-	switch (address.value.state) {
+	switch (account.value.state) {
 		case 'inactive':
 		case 'rejected':
 			return <></>
@@ -92,7 +119,7 @@ const WalletNetwork = () => {
 }
 
 const NetworkName = () => {
-	const { network } = useNetwork()
+	const { network } = useWallet()
 
 	switch (network.value.state) {
 		case 'inactive':

app/ts/components/ErrorAlert.tsx

@@ -21,9 +21,9 @@ export const ErrorAlert = () => {
 		<dialog ref={dialogRef} class='appearance-none bg-white/10 text-white backdrop:transparent mt-8 mb-auto ml-auto mr-8 px-6 pt-6 pb-4 relative'>
 			{latestError.value && (
 				<>
-						<button class='absolute left-auto right-0 top-0 px-4 h-8 hover:border-white' onClick={dismissError}>
+					<button class='absolute left-auto right-0 top-0 px-4 h-8 hover:border-white' onClick={dismissError}>
 						&times;
-						</button>
+					</button>
 					<div class='font-bold mb-2'>Application Error</div>
 					<div class='text-sm text-white/50'>
 						<pre>{latestError.value.message}</pre>