feat: new transfer flow #3334
feat: new transfer flow #3334
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎ 1 Skipped Deployment
|
App 🤌✨ Deployment complete! Take a peek over at https://ee763592.app-1b1.pages.dev |
o-az
force-pushed
the
refactor-transfer-form
branch
from
01efd1a to
a93b9bb
Compare
commit: |
o-az
force-pushed
the
refactor-transfer-form
branch
from
ed248d8 to
fd874ec
Compare
o-az
force-pushed
the
refactor-transfer-form
branch
from
fd874ec to
4099052
Compare
There was a problem hiding this comment.
I like the general structure of encoding pre-validated user input in the URL, but I feel that the data structures need some work.
- For all state, let's ensure that it is defined at most once, in strongly-typed structures
- let's refrain from
$:as it is fully dropped in svelte 5, - derived state should never be writable
Also, I noticed that whenever I click a form element which opens a dialog, then exit the dialog, then click one again, nothing happens. I need to click everything twice
Excited about the direction where this is heading!
| import { type Writable, writable, derived, get, type Readable } from "svelte/store" | ||
| import { custom, switchChain, getConnectorClient, waitForTransactionReceipt } from "@wagmi/core" | ||
|
|
||
| type SearchParams = { [key: string]: string } |
There was a problem hiding this comment.
This should have a stronger type, rather than just key:value
| queryFn: ({ queryKey, signal, meta }) => Object.fromEntries($page.url.searchParams) | ||
| }) | ||
|
|
||
| let state = createQuery(transferQueryOptions) |
There was a problem hiding this comment.
state is not really descriptive
| $: asset = $page.url.searchParams.get("asset") || $state.data?.asset | ||
| $: amount = $page.url.searchParams.get("amount") || $state.data?.amount | ||
| $: receiver = $page.url.searchParams.get("receiver") || $state.data?.receiver | ||
| $: source = $page.url.searchParams.get("source") || $state.data?.source | ||
| $: destination = $page.url.searchParams.get("destination") || $state.data?.destination |
There was a problem hiding this comment.
What do tehse lines do? it seems that currently asset is defined in three places:
searchParams.get("asset")searchParams.data?.asset$: asset = ...
Let's make sure we have only 1, strongly-typed, place where de fine the user input that is to be validated.
If we need to initially set this manually based on some initial data from the URL, I suggest handling this in an onMount call rather than introducing reactive state
| $: sourceChain = writable(chains.find(chain => chain.chain_id === source)) | ||
| $: destinationChain = writable(chains.find(chain => chain.chain_id === destination)) |
There was a problem hiding this comment.
This is derived info that should never be written to. Let's use a let destinationChain = derived(...) which is of type Readable<T> rather than Writable<T>
| $: balances = derived([rawBalances, sourceChain], ([$rawBalances, $sourceChain]) => { | ||
| if (!($sourceChain && $rawBalances)) return [] | ||
| return $rawBalances.data[source] ?? [] | ||
| }) |
There was a problem hiding this comment.
balances is derived so it should not have $:
| $: assetInfo = $balances.find(x => x?.address === asset) | ||
| $: { | ||
| console.log(asset, assetInfo) | ||
| } |
o-az
force-pushed
the
refactor-transfer-form
branch
from
4099052 to
923ff74
Compare
the work is in
app/src/routes/transfer-newuntil the transfer form is fully refactored then justapp/src/routes/transferpurpose of this pr is to complete the first stage of the intent process; namely: validation step. Once the form is filled and the transfer is submitted, the validation results are logged