From a052dce30897dd583ad8bf177edb1116c0ba548c Mon Sep 17 00:00:00 2001 From: Shadab Khan Date: Sat, 10 Dec 2022 01:48:55 +0530 Subject: [PATCH 01/43] feat(bridge): add transaction list --- packages/bridge-ui/src/app.css | 4 + .../src/components/AddressDropdown.svelte | 78 +++++++++++++------ .../bridge-ui/src/components/Loader.svelte | 5 ++ .../src/components/Transaction.svelte | 47 +++++++++++ .../src/components/Transactions.svelte | 36 +++++++++ .../src/components/icons/ArrowLeft.svelte | 4 + .../src/components/icons/Copy.svelte | 5 ++ .../src/components/icons/Disconnect.svelte | 5 ++ .../src/components/icons/Transactions.svelte | 6 ++ 9 files changed, 167 insertions(+), 23 deletions(-) create mode 100644 packages/bridge-ui/src/components/Loader.svelte create mode 100644 packages/bridge-ui/src/components/Transaction.svelte create mode 100644 packages/bridge-ui/src/components/Transactions.svelte create mode 100644 packages/bridge-ui/src/components/icons/ArrowLeft.svelte create mode 100644 packages/bridge-ui/src/components/icons/Copy.svelte create mode 100644 packages/bridge-ui/src/components/icons/Disconnect.svelte create mode 100644 packages/bridge-ui/src/components/icons/Transactions.svelte diff --git a/packages/bridge-ui/src/app.css b/packages/bridge-ui/src/app.css index 8e836461a0e..6260bc403b7 100644 --- a/packages/bridge-ui/src/app.css +++ b/packages/bridge-ui/src/app.css @@ -50,4 +50,8 @@ .taiko-banner { background-image: url('assets/taiko-banner.svg'); background-repeat: no-repeat; +} + +.dropdown-content.address-dropdown-content { + border-radius: 6px; } \ No newline at end of file diff --git a/packages/bridge-ui/src/components/AddressDropdown.svelte b/packages/bridge-ui/src/components/AddressDropdown.svelte index e472abe3c68..7be7bb715f7 100644 --- a/packages/bridge-ui/src/components/AddressDropdown.svelte +++ b/packages/bridge-ui/src/components/AddressDropdown.svelte @@ -9,17 +9,37 @@ import { getAddressAvatarFromIdenticon } from "../utils/addressAvatar"; import type { BridgeTransaction } from "../domain/transactions"; import { LottiePlayer } from "@lottiefiles/svelte-lottie-player"; - import type { Signer } from "ethers"; + import { ethers, Signer } from "ethers"; import { errorToast } from "../utils/toast"; + import CopyIcon from "./icons/Copy.svelte"; + import DisconnectIcon from "./icons/Disconnect.svelte"; + import TransactionsIcon from "./icons/Transactions.svelte"; + import { slide } from "svelte/transition"; + import {fromChain} from '../store/chain'; + import { truncateString } from "../utils/truncateString"; + import Transactions from "./Transactions.svelte"; export let transactions: BridgeTransaction[] = []; + let showTransactions = false; + let address: string; let addressAvatarImgData: string; + let tokenBalance: string = ''; + onMount(async () => { setAddress($signer); }); + $: getUserBalance($signer); + + async function getUserBalance(signer) { + if (signer) { + const userBalance = await signer.getBalance("latest"); + tokenBalance = ethers.utils.formatEther(userBalance); + } + } + $: setAddress($signer).catch((e) => console.error(e)); async function setAddress(signer: Signer) { @@ -76,28 +96,40 @@ - + {#if !showTransactions} +
+ {#if $fromChain && $signer} + +
{tokenBalance.length > 10 + ? `${truncateString(tokenBalance)}...` + : tokenBalance} ETH
+ {/if} +
+
+
+ {addressSubsection(address)} +
+
await copyToClipboard(address)}> + + Copy Address +
+
await disconnect()}> Disconnect +
+ {#if transactions && transactions.length} +
showTransactions = true}> + + {transactions.length} Transactions +
+ {/if} + {:else} +
+ +
+ {/if} + diff --git a/packages/bridge-ui/src/components/Loader.svelte b/packages/bridge-ui/src/components/Loader.svelte new file mode 100644 index 00000000000..0f22faefe12 --- /dev/null +++ b/packages/bridge-ui/src/components/Loader.svelte @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/packages/bridge-ui/src/components/Transaction.svelte b/packages/bridge-ui/src/components/Transaction.svelte new file mode 100644 index 00000000000..9981435a2c9 --- /dev/null +++ b/packages/bridge-ui/src/components/Transaction.svelte @@ -0,0 +1,47 @@ + + +
+
+
+ + From {fromChain.name} +
+
+ + To {toChain.name} +
+
+
+ {amount} ETH + + {#if isPending} +
+ +
+ {:else} + + {/if} +
+
\ No newline at end of file diff --git a/packages/bridge-ui/src/components/Transactions.svelte b/packages/bridge-ui/src/components/Transactions.svelte new file mode 100644 index 00000000000..3c54e682d0b --- /dev/null +++ b/packages/bridge-ui/src/components/Transactions.svelte @@ -0,0 +1,36 @@ + + +
+
showTransactions = false}> + + Transactions +
+ {#each testTransactions as transaction} + + {/each} +
\ No newline at end of file diff --git a/packages/bridge-ui/src/components/icons/ArrowLeft.svelte b/packages/bridge-ui/src/components/icons/ArrowLeft.svelte new file mode 100644 index 00000000000..c2426c43243 --- /dev/null +++ b/packages/bridge-ui/src/components/icons/ArrowLeft.svelte @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/bridge-ui/src/components/icons/Copy.svelte b/packages/bridge-ui/src/components/icons/Copy.svelte new file mode 100644 index 00000000000..60f1d0dfbfc --- /dev/null +++ b/packages/bridge-ui/src/components/icons/Copy.svelte @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/packages/bridge-ui/src/components/icons/Disconnect.svelte b/packages/bridge-ui/src/components/icons/Disconnect.svelte new file mode 100644 index 00000000000..1c6978a9bc7 --- /dev/null +++ b/packages/bridge-ui/src/components/icons/Disconnect.svelte @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/packages/bridge-ui/src/components/icons/Transactions.svelte b/packages/bridge-ui/src/components/icons/Transactions.svelte new file mode 100644 index 00000000000..35a8f9eebf7 --- /dev/null +++ b/packages/bridge-ui/src/components/icons/Transactions.svelte @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file From d76d0efa4f7be20655d2e79e3bc961dd9da7286f Mon Sep 17 00:00:00 2001 From: Shadab Khan Date: Sat, 10 Dec 2022 01:56:04 +0530 Subject: [PATCH 02/43] fix(bridge): remove console.log --- packages/bridge-ui/src/components/Transaction.svelte | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/bridge-ui/src/components/Transaction.svelte b/packages/bridge-ui/src/components/Transaction.svelte index 9981435a2c9..bfbb1ac2915 100644 --- a/packages/bridge-ui/src/components/Transaction.svelte +++ b/packages/bridge-ui/src/components/Transaction.svelte @@ -14,7 +14,6 @@ let fromChainID: number = chainID == 167001 ? 31336 : 167001; let fromChain = chains[fromChainID]; - console.log(chainID); let toChain = chains[chainID]; let amount = 0.001; From f25a5831fc53ff9623e51c01c487492aedd493a9 Mon Sep 17 00:00:00 2001 From: Jeffery Walsh Date: Fri, 9 Dec 2022 15:37:23 -0800 Subject: [PATCH 03/43] transaction impl --- packages/bridge-ui/src/App.svelte | 4 +- .../src/components/AddressDropdown.svelte | 65 ++++++++++++------- .../src/components/Transaction.svelte | 35 ++++------ .../src/components/Transactions.svelte | 35 ++++------ .../src/components/form/BridgeForm.svelte | 2 +- .../src/components/form/ProcessingFee.svelte | 6 +- packages/bridge-ui/src/domain/transactions.ts | 35 +++++++++- .../bridge-ui/src/relayer/service.spec.ts | 3 + packages/bridge-ui/src/relayer/service.ts | 32 ++++++--- packages/relayer/repo/event.go | 2 +- 10 files changed, 137 insertions(+), 82 deletions(-) diff --git a/packages/bridge-ui/src/App.svelte b/packages/bridge-ui/src/App.svelte index 69f3435151b..c886b9a8b3e 100644 --- a/packages/bridge-ui/src/App.svelte +++ b/packages/bridge-ui/src/App.svelte @@ -78,7 +78,9 @@ const routes = { "/": wrap({ component: Home, - props: {}, + props: { + transactioner: transactioner, + }, userData: {}, }), }; diff --git a/packages/bridge-ui/src/components/AddressDropdown.svelte b/packages/bridge-ui/src/components/AddressDropdown.svelte index 7be7bb715f7..d09a6dc19de 100644 --- a/packages/bridge-ui/src/components/AddressDropdown.svelte +++ b/packages/bridge-ui/src/components/AddressDropdown.svelte @@ -7,7 +7,10 @@ import { pendingTransactions } from "../store/transactions"; import ChevDown from "./icons/ChevDown.svelte"; import { getAddressAvatarFromIdenticon } from "../utils/addressAvatar"; - import type { BridgeTransaction } from "../domain/transactions"; + import type { + BridgeTransaction, + Transactioner, + } from "../domain/transactions"; import { LottiePlayer } from "@lottiefiles/svelte-lottie-player"; import { ethers, Signer } from "ethers"; import { errorToast } from "../utils/toast"; @@ -15,7 +18,7 @@ import DisconnectIcon from "./icons/Disconnect.svelte"; import TransactionsIcon from "./icons/Transactions.svelte"; import { slide } from "svelte/transition"; - import {fromChain} from '../store/chain'; + import { fromChain } from "../store/chain"; import { truncateString } from "../utils/truncateString"; import Transactions from "./Transactions.svelte"; @@ -25,10 +28,10 @@ let address: string; let addressAvatarImgData: string; - let tokenBalance: string = ''; + let tokenBalance: string = ""; onMount(async () => { - setAddress($signer); + await setAddress($signer); }); $: getUserBalance($signer); @@ -104,32 +107,50 @@
{#if $fromChain && $signer} -
{tokenBalance.length > 10 - ? `${truncateString(tokenBalance)}...` - : tokenBalance} ETH
+
+ {tokenBalance.length > 10 + ? `${truncateString(tokenBalance)}...` + : tokenBalance} ETH +
{/if}
-
-
- {addressSubsection(address)} +
+
+ avatar + {addressSubsection(address)}
-
await copyToClipboard(address)}> - - Copy Address +
await copyToClipboard(address)} + > + + Copy Address
-
await disconnect()}> Disconnect +
await disconnect()} + > + Disconnect
{#if transactions && transactions.length} -
showTransactions = true}> +
(showTransactions = true)} + > {transactions.length} Transactions
{/if} - {:else} -
- -
- {/if} -
+ {:else} +
+ +
+ {/if} +
diff --git a/packages/bridge-ui/src/components/Transaction.svelte b/packages/bridge-ui/src/components/Transaction.svelte index bfbb1ac2915..b5e54d6f07d 100644 --- a/packages/bridge-ui/src/components/Transaction.svelte +++ b/packages/bridge-ui/src/components/Transaction.svelte @@ -1,24 +1,14 @@
@@ -33,14 +23,15 @@
- {amount} ETH + {transaction.rawData.Message.DepositValue} + {transaction.rawData.Message.Data ? "TKO" : "ETH"} - {#if isPending} -
- -
+ {#if transaction.status === MessageStatus.New} +
+ +
{:else} {/if}
-
\ No newline at end of file + diff --git a/packages/bridge-ui/src/components/Transactions.svelte b/packages/bridge-ui/src/components/Transactions.svelte index 3c54e682d0b..ddd056c9d63 100644 --- a/packages/bridge-ui/src/components/Transactions.svelte +++ b/packages/bridge-ui/src/components/Transactions.svelte @@ -1,36 +1,27 @@
-
showTransactions = false}> +
(showTransactions = false)} + > Transactions
- {#each testTransactions as transaction} - + {#each transactions as transaction} + {/each} -
\ No newline at end of file +
diff --git a/packages/bridge-ui/src/components/form/BridgeForm.svelte b/packages/bridge-ui/src/components/form/BridgeForm.svelte index 934909c209c..9f2a73ff455 100644 --- a/packages/bridge-ui/src/components/form/BridgeForm.svelte +++ b/packages/bridge-ui/src/components/form/BridgeForm.svelte @@ -157,7 +157,7 @@ } if ($processingFee === ProcessingFeeMethod.RECOMMENDED) { - return BigNumber.from("0.01"); + return ethers.utils.parseEther("0.001"); } } diff --git a/packages/bridge-ui/src/components/form/ProcessingFee.svelte b/packages/bridge-ui/src/components/form/ProcessingFee.svelte index d25187cf0e4..9119ca043ac 100644 --- a/packages/bridge-ui/src/components/form/ProcessingFee.svelte +++ b/packages/bridge-ui/src/components/form/ProcessingFee.svelte @@ -18,7 +18,7 @@

{$_("bridgeForm.processingFeeLabel")}

-
+
{#each Array.from(PROCESSING_FEE_META) as fee}
- {#if transactions && transactions.length} + {#if $transactions && $transactions.length}
(showTransactions = true)} > - {transactions.length} Transactions + {$transactions.length} Transactions
{/if} {:else}
- +
{/if}
diff --git a/packages/bridge-ui/src/components/Navbar.svelte b/packages/bridge-ui/src/components/Navbar.svelte index 44bfadc31f4..803c4aeea6d 100644 --- a/packages/bridge-ui/src/components/Navbar.svelte +++ b/packages/bridge-ui/src/components/Navbar.svelte @@ -3,26 +3,7 @@ import Logo from "./icons/Logo.svelte"; import { signer } from "../store/signer"; import AddressDropdown from "./AddressDropdown.svelte"; - import type { - BridgeTransaction, - Transactioner, - } from "../domain/transactions"; - import type { Signer } from "ethers"; - import { fromChain } from "../store/chain"; import ChainDropdown from "./ChainDropdown.svelte"; - import type { Chain } from "../domain/chain"; - - export let transactioner: Transactioner; - let transactions: BridgeTransaction[]; - $: getTransactions($signer, $fromChain); - - async function getTransactions(signer: Signer, chain: Chain) { - if (!signer || !chain) return; - transactions = await transactioner.GetAllByAddress( - await signer.getAddress(), - chain.id - ); - }