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/Navbar.svelte b/packages/bridge-ui/src/components/Navbar.svelte index c9ee8ea2bec..44bfadc31f4 100644 --- a/packages/bridge-ui/src/components/Navbar.svelte +++ b/packages/bridge-ui/src/components/Navbar.svelte @@ -14,7 +14,6 @@ export let transactioner: Transactioner; let transactions: BridgeTransaction[]; - console.log(transactions); $: getTransactions($signer, $fromChain); async function getTransactions(signer: Signer, chain: Chain) { @@ -23,7 +22,6 @@ await signer.getAddress(), chain.id ); - console.log(transactions); } 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