Skip to content

Commit

Permalink
feat(bridge-ui): tooltips, bug fix, general UI enhancements (#462)
Browse files Browse the repository at this point in the history
  • Loading branch information
cyberhorsey authored Dec 22, 2022
1 parent c373194 commit 846a18d
Show file tree
Hide file tree
Showing 42 changed files with 1,083 additions and 452 deletions.
12 changes: 7 additions & 5 deletions packages/bridge-ui/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,14 @@
<html data-theme="dark" lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="icon" type="image/png" href="./taiko-favicon.png" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap"
rel="stylesheet"
/>

<title>Bridge</title>
</head>
Expand Down
1 change: 1 addition & 0 deletions packages/bridge-ui/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@
"rollup-plugin-polyfill-node": "^0.10.2",
"svelte": "^3.53.1",
"svelte-check": "^2.8.0",
"svelte-heros-v2": "^0.3.10",
"svelte-jester": "^2.1.5",
"svelte-loader": "^3.1.2",
"svelte-preprocess": "^4.10.7",
Expand Down
Binary file added packages/bridge-ui/public/taiko-favicon.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
20 changes: 9 additions & 11 deletions packages/bridge-ui/src/App.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -166,6 +166,8 @@
const interval = setInterval(async () => {
tx.interval = interval;
if (!tx.signal) return;
const contract = new ethers.Contract(
chains[tx.toChainId].bridgeAddress,
BridgeABI,
Expand Down Expand Up @@ -201,16 +203,13 @@
</script>

<QueryProvider>
<div class="lg:container lg:mx-auto lg:px-64">
<main>
<HeaderAnnouncement />
<Navbar />
<Router {routes} />
</main>
<SvelteToast options={toastOptions} />

<SwitchEthereumChainModal />
</div>
<main>
<HeaderAnnouncement />
<Navbar />
<Router {routes} />
</main>
<SvelteToast options={toastOptions} />
<SwitchEthereumChainModal />
</QueryProvider>

<style global lang="postcss">
Expand All @@ -219,7 +218,6 @@
@tailwind utilities;
main {
margin: 0;
font-family: "Inter", sans-serif;
}
</style>
25 changes: 11 additions & 14 deletions packages/bridge-ui/src/components/AddressDropdown.svelte
Original file line number Diff line number Diff line change
@@ -1,20 +1,18 @@
<script lang="ts">
import { onMount } from "svelte";
import { _ } from "svelte-i18n";
import { addressSubsection } from "../utils/addressSubsection";
import { signer } from "../store/signer";
import { pendingTransactions } from "../store/transactions";
import ChevDown from "./icons/ChevDown.svelte";
import { getAddressAvatarFromIdenticon } from "../utils/addressAvatar";
import { LottiePlayer } from "@lottiefiles/svelte-lottie-player";
import { ethers, Signer } from "ethers";
import { errorToast } from "../utils/toast";
import CopyIcon from "./icons/Copy.svelte";
import DisconnectIcon from "./icons/Disconnect.svelte";
import { ClipboardDocument, Power } from "svelte-heros-v2";
import { slide } from "svelte/transition";
import { fromChain } from "../store/chain";
import { truncateString } from "../utils/truncateString";
import { ChevronDown } from "svelte-heros-v2";
let address: string = "";
let addressAvatarImgData: string = "";
Expand Down Expand Up @@ -57,7 +55,7 @@
</script>

<div class="dropdown dropdown-bottom dropdown-end">
<label tabindex="0" class="btn btn-md md:btn-wide justify-around">
<label tabindex="0" class="btn btn-md justify-around">
<span class="font-normal flex-1 text-left">
{#if $pendingTransactions && $pendingTransactions.length}
{$pendingTransactions.length} Pending
Expand All @@ -83,17 +81,16 @@
alt="avatar"
/>

<span class="hidden md:inline-block">
<span class="hidden md:inline-block mr-2">
{addressSubsection(address)}
</span>
{/if}
</span>

<ChevDown />
<ChevronDown />
</label>
<ul
tabindex="0"
class="dropdown-content address-dropdown-content menu shadow bg-dark-3 rounded-sm w-64 mt-2 pb-2"
class="dropdown-content address-dropdown-content menu shadow bg-dark-3 rounded-sm w-48 mt-2 pb-2"
>
<div class="p-5 pb-0 flex flex-col items-center" transition:slide>
{#if $fromChain && $signer}
Expand All @@ -106,7 +103,7 @@
{/if}
</div>
<div class="divider" />
<div class="flex hover:bg-dark-5 items-center py-2 px-2">
<div class="flex hover:bg-dark-5 items-center py-2 px-4">
<img
width="24"
height="24"
Expand All @@ -117,17 +114,17 @@
{addressSubsection(address)}
</div>
<div
class="cursor-pointer flex hover:bg-dark-5 items-center py-2 px-2"
class="cursor-pointer flex hover:bg-dark-5 items-center py-2 px-4"
on:click={async () => await copyToClipboard(address)}
>
<CopyIcon />
<ClipboardDocument class="mr-2" />
Copy Address
</div>
<div
class="cursor-pointer flex hover:bg-dark-5 items-center py-2 px-2"
class="cursor-pointer flex hover:bg-dark-5 items-center py-2 px-4"
on:click={async () => await disconnect()}
>
<DisconnectIcon /> Disconnect
<Power class="mr-2" /> Disconnect
</div>
</ul>
</div>
21 changes: 5 additions & 16 deletions packages/bridge-ui/src/components/ChainDropdown.svelte
Original file line number Diff line number Diff line change
@@ -1,14 +1,12 @@
<script lang="ts">
import { _ } from "svelte-i18n";
import ChevDown from "./icons/ChevDown.svelte";
import { fromChain, toChain } from "../store/chain";
import MetaMask from "./icons/MetaMask.svelte";
import { CHAIN_MAINNET, CHAIN_TKO } from "../domain/chain";
import type { Chain } from "../domain/chain";
import { ethers } from "ethers";
import { signer } from "../store/signer";
import { switchNetwork } from "@wagmi/core";
import { ChevronDown } from "svelte-heros-v2";
const changeChain = async (chain: Chain) => {
await switchNetwork({
chainId: chain.id,
Expand All @@ -26,8 +24,8 @@
};
</script>

<div class="dropdown dropdown-bottom dropdown-end mr-4">
<label tabindex="0" class="btn btn-md md:btn-wide justify-around">
<div class="dropdown dropdown-end mr-4">
<label tabindex="0" class="btn btn-md justify-around md:w-[194px]">
<span class="font-normal flex-1 text-left mr-2">
{#if $fromChain}
<svelte:component this={$fromChain.icon} />
Expand All @@ -36,12 +34,11 @@
<span class="ml-2 hidden md:inline-block">Invalid Chain</span>
{/if}
</span>

<ChevDown />
<ChevronDown />
</label>
<ul
tabindex="0"
class="dropdown-content flex menu p-2 shadow bg-dark-3 rounded-box w-[194px]"
class="dropdown-content flex my-2 menu p-2 shadow bg-dark-3 rounded-box w-[194px]"
>
<li>
<button
Expand All @@ -52,7 +49,6 @@
>
<svelte:component this={CHAIN_MAINNET.icon} height={24} />
<span class="pl-1.5 text-left flex-1">{CHAIN_MAINNET.name}</span>
<MetaMask />
</button>
</li>
<li>
Expand All @@ -64,14 +60,7 @@
>
<svelte:component this={CHAIN_TKO.icon} height={24} />
<span class="pl-1.5 text-left flex-1">{CHAIN_TKO.name}</span>
<MetaMask />
</button>
</li>
</ul>
</div>

<style>
.menu li > span {
padding-left: 0px;
}
</style>
65 changes: 65 additions & 0 deletions packages/bridge-ui/src/components/ERC20Faucet.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
<script lang="ts">
import { ethers } from "ethers";
import { HORSE } from "../domain/token";
import { pendingTransactions } from "../store/transactions";
import { signer } from "../store/signer";
import { errorToast, successToast } from "../utils/toast";
import { _ } from "svelte-i18n";
import { Funnel } from "svelte-heros-v2";
import MintableERC20 from "../constants/abi/MintableERC20";
import { fromChain } from "../store/chain";
import { switchNetwork } from "@wagmi/core";
import { CHAIN_MAINNET } from "../domain/chain";
import Tooltip from "./Tooltip.svelte";
import TooltipModal from "./modals/TooltipModal.svelte";
import { token } from "../store/token";
export let onMint: () => Promise<void>;
let tooltipOpen: boolean = false;
async function mint() {
try {
if ($fromChain.id !== HORSE.addresses[0].chainId) {
await switchNetwork({
chainId: CHAIN_MAINNET.id,
});
}
const contract = new ethers.Contract(
HORSE.addresses[0].address,
MintableERC20,
$signer
);
const tx = await contract.mint(ethers.utils.parseEther("1000"));
pendingTransactions.update((store) => {
store.push(tx);
return store;
});
successToast($_("toast.transactionSent"));
await $signer.provider.waitForTransaction(tx.hash, 1);
await onMint();
} catch (e) {
console.log(e);
errorToast($_("toast.errorSendingTransaction"));
}
}
</script>

<button class="btn" on:click={mint}>
<Funnel class="mr-2" /> Faucet
</button>
<Tooltip />

<TooltipModal title="{$token.symbol} Faucet" bind:isOpen={tooltipOpen}>
<span slot="body">
<p class="text-left">
You can request 1000 {$token.symbol}. {$token.symbol} is only available to
be minted on Ethereum A1. If you are on Taiko A1, your network will be changed
first. You must have a small amount of ether in your Ethereum A1 wallet to
send the transaction.
</p>
</span>
</TooltipModal>
12 changes: 6 additions & 6 deletions packages/bridge-ui/src/components/Navbar.svelte
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
<script lang="ts">
import Connect from "./buttons/Connect.svelte";
import Logo from "./icons/Logo.svelte";
import TaikoLogo from "./icons/TaikoLogo.svelte";
import { signer } from "../store/signer";
import AddressDropdown from "./AddressDropdown.svelte";
import ChainDropdown from "./ChainDropdown.svelte";
</script>

<nav class="navbar mb-4 md:h-[125px] pt-4 md:pt-0 md:px-4 w-full">
<div class="navbar-end justify-start">
<Logo />
<div class="navbar bg-base-100">
<div class="flex-1">
<TaikoLogo width={120} />
</div>
<div class="navbar-end">
<div class="flex-none">
{#if $signer}
<ChainDropdown />
<AddressDropdown />
{:else}
<Connect />
{/if}
</div>
</nav>
</div>
2 changes: 1 addition & 1 deletion packages/bridge-ui/src/components/TaikoBanner.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
</script>

<div
class="taiko-banner bg-cover bg-center bg-no-repeat h-36 rounded-lg py-4 flex flex-col items-center justify-center md:w-[450px]"
class="taiko-banner bg-cover bg-center bg-no-repeat h-36 rounded-lg py-4 flex flex-col items-center justify-center"
>
<SelectChain />
</div>
11 changes: 11 additions & 0 deletions packages/bridge-ui/src/components/Tooltip.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<script lang="ts">
import { QuestionMarkCircle } from "svelte-heros-v2";
export let isOpen: boolean = false;
</script>

<QuestionMarkCircle
on:click={() => (isOpen = true)}
size="18"
variation="outline"
/>
Loading

0 comments on commit 846a18d

Please sign in to comment.