fix(PoC): readme, some errors and other nits

packages/react/lib/context.tsx

@@ -69,7 +69,7 @@ export function SprinterContext({ children, baseUrl }: SprinterContextProps) {
   useEffect(() => {
     getAvailableTokens();
     getAvailableChains();
-  }, [sprinter]);
+  }, [getAvailableChains, getAvailableTokens, sprinter]);
 
   return (
     <Context.Provider

packages/react/lib/hooks.ts

@@ -83,7 +83,7 @@ export function useSprinterBalances(account: Address) {
   const balances: BalancesEntry = _balances[account] || balancesEmptyState;
   const getUserBalances = useCallback(
     () => _getUserBalances(account),
-    [account]
+    [_getUserBalances, account]
   );
 
   return { balances, getUserBalances };

packages/react/src/Component.tsx

@@ -1,12 +1,12 @@
-import { useEffect } from 'react';
-import {useSprinterTokens} from "../lib/hooks.ts";
+import { useEffect } from "react";
+import { useSprinterTokens } from "../lib/hooks.ts";
 
 export function Component() {
   const hook = useSprinterTokens();
 
   useEffect(() => {
     hook.getAvailableTokens();
-  }, []);
+  }, [hook]);
 
   return <div>A component</div>;
 }

web/README.md

@@ -1,38 +1,37 @@
-# create-svelte
+# Poc interface for Sprinter-ts
 
-Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
-
-## Creating a project
+## Developing
 
-If you're seeing this, you've probably already done this step. Congrats!
+Install dependancies with
 
 ```bash
-# create a new project in the current directory
-npm create svelte@latest
-
-# create a new project in my-app
-npm create svelte@latest my-app
+yarn
 ```
 
-## Developing
+Make sure you build the entire sprinter-ts packages, with
+
+```bash
+cd ..
+yarn build
+```
 
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+Start a development server:
 
 ```bash
-npm run dev
+yarn dev
 
 # or start the server and open the app in a new browser tab
-npm run dev -- --open
+yarn dev -- --open
 ```
 
 ## Building
 
 To create a production version of your app:
 
 ```bash
-npm run build
+yarn build
 ```
 
-You can preview the production build with `npm run preview`.
+You can preview the production build with `yarn preview`.
 
 > To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.

web/src/lib/components/DrawerManager.svelte

@@ -33,7 +33,7 @@
 		</div>
 		{#if $drawerStore.id === 'SendTokens'}
 			<SendTokensDrawer />
-		{:else if $drawerStore.id === 'SubmitQuota'}
+		{:else if $drawerStore.id === 'SubmitQuote'}
 			<SubmitTokensDrawer />
 		{:else}
 			<!-- (fallback contents) -->

web/src/lib/components/SendTokensDrawer.svelte

@@ -66,19 +66,19 @@
 		updateWhitelistedOnTokenChange();
 	}
 
-	async function requestQuota() {
+	async function requestQuote() {
 		if (!selectedNetwork) selectedNetwork = String((await chains)[0].chainID);
 
 		const drawerSettings: DrawerSettings = {
-			id: 'SubmitQuota',
+			id: 'SubmitQuote',
 			width: 'w-[518px]',
 			position: 'right',
 			meta: {
-				title: 'Submit Quotas',
+				title: 'Submit Quotes',
 				tokens: await tokens,
 				chains: await chains,
 				balances,
-				quota: {
+				quote: {
 					account: $selectedAccount,
 					token: selectedToken,
 					destinationChain: Number(selectedNetwork),
@@ -258,12 +258,12 @@
 >
 	<div class="grow shrink basis-0 flex-col justify-center items-center gap-4 inline-flex">
 		<button
-			on:click={requestQuota}
+			on:click={requestQuote}
 			class="self-stretch h-[60px] p-2.5 bg-primary-400 dark:bg-primary-500 rounded-[10px] shadow border border-zinc-200 dark:border-gray-600 justify-center items-center gap-1 inline-flex"
 		>
 			<div class="px-1 justify-center items-center flex">
 				<div class="text-black text-base font-semibold font-['Inter'] leading-normal">
-					Get Quota
+					Get Quote
 				</div>
 			</div>
 		</button>

web/src/lib/components/SubmitTokensDrawer.svelte

@@ -7,8 +7,8 @@
 	import { formatWei } from '$lib/formatters';
 
 	const drawerStore = getDrawerStore();
-	$: quota = $sprinter.poolAssetOnDestination($drawerStore.meta.quota);
-	$: token = getTokenBySymbol($drawerStore.meta.tokens, $drawerStore.meta.quota.token);
+	$: quote = $sprinter.poolAssetOnDestination($drawerStore.meta.quote);
+	$: token = getTokenBySymbol($drawerStore.meta.tokens, $drawerStore.meta.quote.token);
 </script>
 
 <div
@@ -17,13 +17,13 @@
 	<div
 		class="grow shrink basis-0 text-slate-400 dark:text-slate-200 text-xs font-medium font-['Inter'] uppercase leading-none tracking-wide"
 	>
-		Quotas
+		Quotes
 	</div>
 </div>
 
 <article class="container mx-auto p-4">
 	<ul class="space-y-4">
-		{#await quota}
+		{#await quote}
 			<li
 				class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg flex justify-between items-center mb-4"
 			>
@@ -63,7 +63,7 @@
 >
 	<button
 		on:click={() => {
-			quota = $sprinter.bridgeAggregateBalance($drawerStore.meta.quota);
+			quote = $sprinter.bridgeAggregateBalance($drawerStore.meta.quote);
 		}}
 		class="w-full h-10 p-2.5 bg-white dark:bg-gray-700 rounded-[10px] shadow border border-zinc-200 dark:border-gray-600 justify-center items-center gap-1 inline-flex"
 	>
@@ -72,7 +72,7 @@
 			<div
 				class="text-gray-600 dark:text-gray-200 text-sm font-medium font-['Inter'] leading-tight"
 			>
-				Get another Quota
+				Get another Quote
 			</div>
 		</div>
 	</button>

web/src/lib/components/TransactionCard.svelte

@@ -16,20 +16,21 @@
 	let successful: boolean = false;
 
 	// TODO: there is not place for this over here! refactor it to somewhere
-	async function submitTransaction(quotaRecord: Solution) {
+	async function submitTransaction(quoteRecord: Solution) {
+		if (!$selectedProvider) return;
+
 		try {
 			submitting = true;
 
-			const [ownerAddress] = await $selectedProvider.provider.request({
-				method: 'eth_requestAccounts',
-				params: []
-			});
+			const [ownerAddress] = (await $selectedProvider.provider.request({
+				method: 'eth_requestAccounts'
+			})) as string[];
 
 			// Preparation /w questionable approach but will see for now
 			try {
 				await $selectedProvider.provider.request({
 					method: 'wallet_switchEthereumChain',
-					params: [{ chainId: toHex(quotaRecord.sourceChain) }]
+					params: [{ chainId: toHex(quoteRecord.sourceChain) }]
 				});
 			} catch (error) {
 				if (error.code === 4902) {
@@ -38,7 +39,7 @@
 						params: [
 							{
 								chainName: chain.name,
-								chainId: toHex(quotaRecord.sourceChain),
+								chainId: toHex(quoteRecord.sourceChain),
 								rpcUrls: chain.rpcURLs
 							}
 						]
@@ -49,27 +50,27 @@
 			const web3 = new Web3($selectedProvider.provider);
 
 			// @ts-expect-error   // chainId is missing in web3js call options type
-			const callOptions: NonPayableCallOptions = { chainId: quotaRecord.sourceChain };
+			const callOptions: NonPayableCallOptions = { chainId: quoteRecord.sourceChain };
 
-			console.info('Quote', quotaRecord);
+			console.info('Quote', quoteRecord);
 
 			// Approval sniff etc...\
-			if (quotaRecord.approvals?.length > 0) {
-				for (const approval of quotaRecord.approvals) {
+			if (quoteRecord.approvals && quoteRecord.approvals.length > 0) {
+				for (const approval of quoteRecord.approvals) {
 					console.log('Requesting approval:', approval);
 					const receipt = await web3.eth.sendTransaction(approval);
 					console.warn(`Approval receipt: `, receipt);
 				}
 			} else {
-				const erc20 = new web3.eth.Contract(erc20Abi, quotaRecord.sourceTokenAddress);
+				const erc20 = new web3.eth.Contract(erc20Abi, quoteRecord.sourceTokenAddress);
 
 				const allowed = await erc20.methods
-					.allowance(ownerAddress, quotaRecord.transaction.to)
+					.allowance(ownerAddress, quoteRecord.transaction.to)
 					.call(callOptions);
 
-				if (BigInt(quotaRecord.amount) > BigInt(allowed)) {
+				if (BigInt(quoteRecord.amount) > BigInt(allowed)) {
 					const approval = await erc20.methods
-						.approve(quotaRecord.transaction.to, quotaRecord.amount)
+						.approve(quoteRecord.transaction.to, quoteRecord.amount)
 						.send({
 							...callOptions,
 							from: ownerAddress
@@ -79,7 +80,7 @@
 			}
 
 			// FINAL STEP!
-			const receipt = await web3.eth.sendTransaction(quotaRecord.transaction);
+			const receipt = await web3.eth.sendTransaction(quoteRecord.transaction);
 
 			console.warn(`TX receipt: `, receipt);
 			successful = true;

web/src/routes/+layout.svelte

@@ -38,11 +38,13 @@
 		selecting = true;
 		try {
 			const accounts = await provider.provider.request({
-				method: 'eth_requestAccounts',
-				params: []
+				method: 'eth_requestAccounts'
 			});
 
-			selectedAccount.set(accounts[0]);
+			accounts &&
+				Array.isArray(accounts) &&
+				typeof accounts[0] === 'string' &&
+				selectedAccount.set(accounts[0]);
 			selectedProvider.set(provider);
 		} finally {
 			selecting = false;
@@ -76,14 +78,16 @@
 			<div class="space-y-10 text-center flex flex-col items-center">
 				<h2 class="h2">Welcome to Sprinter POC.</h2>
 				<br />
-				<h3 class="h3">Please select wallet</h3>
+				<h3 class="h3">Please select a wallet:</h3>
 				<article class="container mx-auto">
 					<ul class="space-y-4">
 						{#if !$providers.length}
-							No wallets Found GET ONE!
+							No wallets found. GET ONE!
 						{:else}
 							{#each $providers as provider}
 								<!-- eslint-disable-next-line svelte/valid-compile -->
+								<!-- svelte-ignore a11y-click-events-have-key-events -->
+								<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 								<li
 									on:click={() => selectWallet(provider)}
 									class="relative bg-white dark:bg-gray-800 p-4 rounded-lg shadow hover:bg-gray-100 dark:hover:bg-gray-700 hover:shadow-lg transition duration-300 flex items-center cursor-pointer"