diff --git a/packages/react/lib/context.tsx b/packages/react/lib/context.tsx index 01f52cc..cc3a345 100644 --- a/packages/react/lib/context.tsx +++ b/packages/react/lib/context.tsx @@ -69,7 +69,7 @@ export function SprinterContext({ children, baseUrl }: SprinterContextProps) { useEffect(() => { getAvailableTokens(); getAvailableChains(); - }, [sprinter]); + }, [getAvailableChains, getAvailableTokens, sprinter]); return ( _getUserBalances(account), - [account] + [_getUserBalances, account] ); return { balances, getUserBalances }; diff --git a/packages/react/src/Component.tsx b/packages/react/src/Component.tsx index bc57ef3..e738773 100644 --- a/packages/react/src/Component.tsx +++ b/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
A component
; } diff --git a/web/README.md b/web/README.md index 5ce6766..5f49c6b 100644 --- a/web/README.md +++ b/web/README.md @@ -1,28 +1,27 @@ -# 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 @@ -30,9 +29,9 @@ npm run dev -- --open 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. diff --git a/web/src/lib/components/DrawerManager.svelte b/web/src/lib/components/DrawerManager.svelte index 0e0ee80..11c3bf5 100644 --- a/web/src/lib/components/DrawerManager.svelte +++ b/web/src/lib/components/DrawerManager.svelte @@ -33,7 +33,7 @@ {#if $drawerStore.id === 'SendTokens'} - {:else if $drawerStore.id === 'SubmitQuota'} + {:else if $drawerStore.id === 'SubmitQuote'} {:else} diff --git a/web/src/lib/components/SendTokensDrawer.svelte b/web/src/lib/components/SendTokensDrawer.svelte index 9c933a5..40f022b 100644 --- a/web/src/lib/components/SendTokensDrawer.svelte +++ b/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 @@ >
diff --git a/web/src/lib/components/SubmitTokensDrawer.svelte b/web/src/lib/components/SubmitTokensDrawer.svelte index 29d4610..1a857d9 100644 --- a/web/src/lib/components/SubmitTokensDrawer.svelte +++ b/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);
- Quotas + Quotes
    - {#await quota} + {#await quote}
  • @@ -63,7 +63,7 @@ > diff --git a/web/src/lib/components/TransactionCard.svelte b/web/src/lib/components/TransactionCard.svelte index c91290b..3d3ace1 100644 --- a/web/src/lib/components/TransactionCard.svelte +++ b/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; diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte index d577a20..cabd28f 100644 --- a/web/src/routes/+layout.svelte +++ b/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 @@

    Welcome to Sprinter POC.


    -

    Please select wallet

    +

    Please select a wallet:

      {#if !$providers.length} - No wallets Found GET ONE! + No wallets found. GET ONE! {:else} {#each $providers as provider} + +
    • 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"