Merge branch 'issue-fixes' of github.com-taiko:taikochain/taiko-mono …

…into issue-fixes
taikoxyz · Jan 10, 2023 · 0adb83a · 0adb83a
2 parents 56c597e + ae18b94
commit 0adb83a
Show file tree

Hide file tree

Showing 8 changed files with 58 additions and 50 deletions.
diff --git a/packages/branding/README.md b/packages/branding/README.md
@@ -1,11 +1,43 @@
-# Taiko branding
+# Taiko branding guide
 
-This package contains all you need for Taiko branding.
+This package contains all the branding assets for Taiko. 
+
+Included: Logos, Logotypes, Backgrounds, Backdrops and Mockups.
 
 ## Naming
 
-For naming, we use Taiko or Taiko Labs. For the handle, we refer to Taiko with `taikoxyz`, which is where you can find us (ie. twitter: @taikoxyz, github: @taikoxyz). Please maintain this convention.
+Use `Taiko` or `Taiko Labs` for the name.
+
+Use `taikoxyz` for the social handle (e.g., Twitter: [@taikoxyz](https://twitter.com/taikoxyz), GitHub: [@taikoxyz](https://github.com/taikoxyz)).
 
 ## Logos
 
-Use SVG and PNG where you can, as the image quality is better.
+Download vector assets of the Taiko logo:
+
+<img src="https://github.com/taikoxyz/taiko-mono/blob/main/packages/branding/Logo/SVG/Taiko_Logo_Fluo.svg" width="75px"> &nbsp;&nbsp;&nbsp; <img src="https://github.com/taikoxyz/taiko-mono/blob/main/packages/branding/Logo/SVG/Taiko_Token_Fluo-on-Black.svg" width="75px"> &nbsp;&nbsp;&nbsp; <img src="https://github.com/taikoxyz/taiko-mono/blob/main/packages/branding/Logo/SVG/Taiko_Token_White-on-Black.svg" width="75px"> &nbsp;&nbsp;&nbsp; <img src="https://github.com/taikoxyz/taiko-mono/blob/main/packages/branding/Logo/SVG/Taiko_Logo_White-on-Fluo.svg" width="75px">
+
+[Browse Logos](https://github.com/taikoxyz/taiko-mono/tree/main/packages/branding/Logo)
+
+Please use SVG or crushed PNG wherever possible for improved image quality and performance.
+
+## Logotypes
+
+Download vector assets of the Taiko logotype:
+
+<a href="https://github.com/taikoxyz/taiko-mono/blob/main/packages/branding/Logotype/SVG/Taiko_Logotype_Horiz_1_Fluo_Black.svg"><img src="https://github.com/taikoxyz/taiko-mono/blob/main/packages/branding/Logotype/JPG/Taiko_Logotype_Horiz_1_Fluo_Black.jpg" width="75px"></a> &nbsp;&nbsp;&nbsp; <img src="https://github.com/taikoxyz/taiko-mono/blob/main/packages/branding/Logotype/SVG/Taiko_Logotype_Horiz_2_Fluo_White.svg" width="75px"> &nbsp;&nbsp;&nbsp; <img src="https://github.com/taikoxyz/taiko-mono/blob/main/packages/branding/Logotype/SVG/Taiko_Logotype_Square_Fluo_White.svg" width="75px">
+
+[Browse Logotypes](https://github.com/taikoxyz/taiko-mono/tree/main/packages/branding/Logotype)
+
+
+## Fonts
+
+Taiko uses Oxanium as the global font across its identity. The font is licensed under the [Open Font License](https://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL). Its specimen and font family can be accessed at: https://fonts.google.com/specimen/Oxanium
+
+## Colors
+
+Primary colors and shades:
+| Color | Hex code  |
+|-------|-----------|
+| Fluo  | `#fc0fc0` |
+| Black | `#000000` |
+| White | `#ffffff` |
diff --git a/packages/branding/Taiko_Brandbook_Mini_v3.pdf b/packages/branding/Taiko_Brandbook_Mini_v3.pdf
diff --git a/packages/bridge-ui/src/pages/home/Home.svelte b/packages/bridge-ui/src/pages/home/Home.svelte
@@ -6,10 +6,12 @@
   import TaikoBanner from "../../components/TaikoBanner.svelte";
   import Transactions from "../../components/Transactions.svelte";
   let activeTab: string = "bridge";
+  let bridgeWidth;
+  let bridgeHeight;
 </script>
 
-<div class="container mx-auto max-w-fit text-center my-10">
-  <div class="rounded-3xl border-2 border-zinc-800 border-solid p-2 md:p-6">
+<div class="container mx-auto {activeTab === 'bridge' ? 'max-w-fit' : 'w-fit'} text-center my-10" style="{activeTab === 'bridge' ? '' : 'min-width: '+bridgeWidth+'px;'}" bind:clientWidth={bridgeWidth} bind:clientHeight={bridgeHeight}>
+  <div class="rounded-3xl border-2 border-zinc-800 border-solid p-2 md:p-6" style="{activeTab === 'bridge' && $transactions.length > 0 ? '' : 'min-height: '+bridgeHeight+'px;'}">
     <div class="tabs mb-4">
       <span
         class="tab tab-bordered {activeTab === 'bridge' ? 'tab-active' : ''}"

diff --git a/packages/status-page/.default.env b/packages/status-page/.default.env
@@ -3,7 +3,6 @@ VITE_L1_RPC_URL="https://l1rpc.a1.taiko.xyz"
 VITE_L2_RPC_URL="https://l2rpc.a1.taiko.xyz"
 VITE_TAIKO_L2_ADDRESS="0x0000777700000000000000000000000000000001"
 VITE_TAIKO_L1_ADDRESS="0x7B3AF414448ba906f02a1CA307C56c4ADFF27ce7"
-VITE_L2_BOOTNODE_URL="http://104.198.208.154:8545"
 VITE_TOKENOMICS_ENABLED=false
 VITE_L1_EXPLORER_URL="https://l1explorer.a1.taiko.xyz"
 VITE_L2_EXPLORER_URL="https://l2explorer.a1.taiko.xyz"
diff --git a/packages/status-page/src/App.svelte b/packages/status-page/src/App.svelte
@@ -26,7 +26,6 @@
         l1TaikoAddress: import.meta.env.VITE_TAIKO_L1_ADDRESS,
         l2Provider: l2Provider,
         l2TaikoAddress: import.meta.env.VITE_TAIKO_L2_ADDRESS,
-        l2BootnodeProvider: l2BootnodeProvider,
         isTokenomicsEnabled: import.meta.env.VITE_TOKENOMICS_ENABLED,
         l1ExplorerUrl: import.meta.env.VITE_L1_EXPLORER_URL,
         l2ExplorerUrl: import.meta.env.VITE_L2_EXPLORER_URL,

diff --git a/packages/status-page/src/components/StatusIndicator.svelte b/packages/status-page/src/components/StatusIndicator.svelte
@@ -4,6 +4,7 @@
   import { onDestroy, onMount } from "svelte";
   import Loader from "../components/Loader.svelte";
   import type Status from "../domain/status";
+  import { fade } from "svelte/transition";
 
   export let provider: ethers.providers.JsonRpcProvider;
   export let contractAddress: string;
@@ -31,16 +32,11 @@
 
   let statusValue: Status;
 
-  let loading: boolean = false;
-
   onMount(async () => {
     try {
-      loading = true;
       statusValue = await statusFunc(provider, contractAddress);
     } catch (e) {
       console.error(e);
-    } finally {
-      loading = false;
     }
 
     if (watchStatusFunc) {
@@ -52,12 +48,9 @@
     if (intervalInMs !== 0) {
       interval = setInterval(async () => {
         try {
-          loading = true;
           statusValue = await statusFunc(provider, contractAddress);
         } catch (e) {
           console.error(e);
-        } finally {
-          loading = false;
         }
       }, intervalInMs);
     }
@@ -68,18 +61,23 @@
   });
 </script>
 
-<div class="rounded-3xl border-2 border-zinc-800 border-solid p-4">
+<div
+  class="rounded-3xl border-2 border-zinc-800 border-solid p-4 min-h-full h-28"
+>
   <h2 class="font-bold">{header}</h2>
-  {#if loading}
-    <Loader />
-  {:else if statusValue || typeof statusValue === "number"}
-    <span
-      class={onClick ? "cursor-pointer" : ""}
-      on:click={() => onClick(statusValue)}
-    >
-      <span class={colorFunc(statusValue)}>
-        {displayStatusValue(statusValue)}
+  {#key statusValue}
+    {#if statusValue || typeof statusValue === "number"}
+      <span
+        transition:fade
+        class="pt-2 inline-block align-bottom {onClick ? 'cursor-pointer' : ''}"
+        on:click={() => onClick(statusValue)}
+      >
+        <span class={colorFunc(statusValue)}>
+          {displayStatusValue(statusValue)}
+        </span>
       </span>
-    </span>
-  {/if}
+    {:else}
+      <Loader />
+    {/if}
+  {/key}
 </div>
diff --git a/packages/status-page/src/pages/home/Home.svelte b/packages/status-page/src/pages/home/Home.svelte
@@ -11,7 +11,6 @@
   import { getLastVerifiedBlockId } from "../../utils/getLastVerifiedBlockId";
   import { getNextBlockId } from "../../utils/getNextBlockId";
   import { getGasPrice } from "../../utils/getGasPrice";
-  import { getPeerCount } from "../../utils/getPeerCount";
   import { getQueuedTransactions } from "../../utils/getQueuedTransactions";
   import { onMount } from "svelte";
   import { getProofReward } from "../../utils/getProofReward";
@@ -21,7 +20,6 @@
   export let l1TaikoAddress: string;
   export let l2Provider: ethers.providers.JsonRpcProvider;
   export let l2TaikoAddress: string;
-  export let l2BootnodeProvider: ethers.providers.JsonRpcProvider;
   export let isTokenomicsEnabled: boolean = false;
   export let l1ExplorerUrl: string;
   export let l2ExplorerUrl: string;
@@ -164,17 +162,6 @@
         return "green";
       },
     },
-    {
-      statusFunc: getPeerCount,
-      watchStatusFunc: null,
-      provider: l2BootnodeProvider,
-      contractAddress: "",
-      header: "Peers",
-      intervalInMs: 60000,
-      colorFunc: (value: Status) => {
-        return "green";
-      },
-    },
   ];
 
   onMount(() => {

diff --git a/packages/status-page/src/utils/getPeerCount.ts b/packages/status-page/src/utils/getPeerCount.ts