Refactor UI and UX (#21)

* Refactor ui and ux

* Update README.md

* Remove disclaimer

README.md

@@ -1 +1 @@
-# Helix Bridge xToken UI
+# xToken UI

public/manifest.json

@@ -0,0 +1,5 @@
+{
+  "name": "Darwinia Bridge",
+  "description": "Darwinia bridge, assets cross-chain",
+  "icons": [{ "src": "icon.svg", "sizes": "any" }]
+}

src/app/error.tsx

@@ -9,7 +9,7 @@ export default function Error({ error, reset }: { error: Error; reset: () => voi
 
   return (
     <main className="app-main flex items-center justify-center">
-      <div className="flex w-fit flex-col items-start gap-middle">
+      <div className="flex w-fit flex-col items-start gap-medium">
         <h2 className="text-base font-medium text-white">Oops, something went wrong !</h2>
         <button
           onClick={reset}

src/app/globals.css

@@ -31,25 +31,26 @@ body {
   .app-header {
     @apply h-[64px];
   }
-  .app-footer {
+  /* .app-footer {
     @apply h-[58px];
-  }
+  } */
   .app-main {
-    min-height: calc(100vh - 64px - 58px);
+    /* min-height: calc(100vh - 64px - 58px); */
+    min-height: calc(100vh - 64px);
     @apply mt-[64px];
   }
 
   /* Page */
   .page-container {
-    @apply max-w-8xl w-full mx-auto px-middle py-5;
+    @apply max-w-8xl w-full mx-auto px-medium py-5;
   }
 
   /* User */
   .user-connect-wallet {
-    @apply flex h-8 shrink-0 items-center gap-middle rounded-xl bg-primary px-large transition lg:hover:bg-primary/80 lg:active:translate-y-1;
+    @apply flex h-8 shrink-0 items-center gap-medium rounded-xl bg-primary px-large transition lg:hover:bg-primary/80 lg:active:translate-y-1;
   }
   .user-dropdown-item {
-    @apply inline-flex items-center gap-middle rounded-xl px-middle py-small text-start transition hover:bg-white/10 lg:active:translate-y-1;
+    @apply inline-flex items-center gap-medium rounded-xl px-medium py-small text-start transition hover:bg-white/10 lg:active:translate-y-1;
   }
 
   .button {

src/app/layout.tsx

@@ -2,7 +2,7 @@
 import "./globals.css";
 import type { Metadata } from "next";
 import { IBM_Plex_Sans } from "next/font/google";
-// import Header from "@/components/header";
+import Header from "@/components/header";
 import RainbowProvider from "@/providers/rainbow-provider";
 import GraphqlProvider from "@/providers/graphql-provider";
 import AppProvider from "@/providers/app-provider";
@@ -14,8 +14,8 @@ const ibm_plex_sans = IBM_Plex_Sans({
 });
 
 export const metadata: Metadata = {
-  title: "Helix xToken - Helix Bridge",
-  description: "Helix Bridge for xToken cross-chain.",
+  title: "Darwinia Bridge",
+  description: "Darwinia bridge, assets cross-chain",
 };
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
@@ -26,7 +26,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
           <RainbowProvider>
             <AppProvider>
               <TransferProvider>
-                {/* <Header /> */}
+                <Header />
                 {children}
                 {/* <Footer /> */}
               </TransferProvider>

src/app/not-found.tsx

@@ -3,7 +3,7 @@ import Link from "next/link";
 export default function NotFound() {
   return (
     <main className="app-main flex items-center justify-center">
-      <div className="flex w-fit flex-col items-start gap-middle">
+      <div className="flex w-fit flex-col items-start gap-medium">
         <h2 className="text-base font-medium text-white">Not Found !</h2>
         <p className="text-sm font-normal text-white">Could not find requested resource</p>
         <Link href="/" className="text-sm font-normal text-primary hover:underline">

src/app/page.tsx

@@ -1,7 +1,18 @@
 import dynamic from "next/dynamic";
 
-const PageSelect = dynamic(() => import("@/components/page-select"), { ssr: false });
+const TransferV2 = dynamic(() => import("@/components/transfer-v2"), { ssr: false });
 
 export default function Home() {
-  return <PageSelect />;
+  return (
+    <main className="app-main relative overflow-hidden">
+      <div className="fixed bottom-0 left-0 right-0 top-0 z-[1] flex items-center justify-center">
+        <div className="h-[70vw] w-[70vw] rounded-full bg-primary blur-[8rem] lg:h-[65vh] lg:w-[65vh] lg:bg-primary/40" />
+      </div>
+      <div className="absolute bottom-0 left-0 right-0 top-0 z-[2] overflow-y-auto">
+        <div className="page-container">
+          <TransferV2 />
+        </div>
+      </div>
+    </main>
+  );
 }

src/app/records/[id]/page.tsx

@@ -1,5 +1,3 @@
-import Footer from "@/components/footer";
-import Header from "@/components/header";
 import RecordDetail from "@/components/record-detail";
 import PageWrap from "@/ui/page-wrap";
 
@@ -9,14 +7,10 @@ interface Props {
   };
 }
 
-export default function RecordPage({ params }: Props) {
+export default function Record({ params }: Props) {
   return (
-    <>
-      <Header />
-      <PageWrap>
-        <RecordDetail id={params.id} />
-      </PageWrap>
-      <Footer />
-    </>
+    <PageWrap>
+      <RecordDetail id={params.id} />
+    </PageWrap>
   );
 }

src/app/records/page.tsx

@@ -1,18 +1,12 @@
-import Footer from "@/components/footer";
-import Header from "@/components/header";
 import PageWrap from "@/ui/page-wrap";
 import dynamic from "next/dynamic";
 
 const HistoryRecords = dynamic(() => import("@/components/history-records"));
 
-export default function RecordsPage() {
+export default function Records() {
   return (
-    <>
-      <Header />
-      <PageWrap>
-        <HistoryRecords />
-      </PageWrap>
-      <Footer />
-    </>
+    <PageWrap>
+      <HistoryRecords />
+    </PageWrap>
   );
 }

src/components/balance-input.tsx

@@ -146,8 +146,8 @@ export function BalanceInput({
 
   return (
     <div
-      className={`normal-input-wrap relative flex flex-col rounded-xl bg-inner px-small py-small lg:px-middle ${
-        compact ? "lg:py-middle" : ""
+      className={`normal-input-wrap relative flex flex-col rounded-xl bg-inner px-small py-small lg:px-medium ${
+        compact ? "lg:py-medium" : ""
       } ${value.valid ? "valid-input-wrap border-transparent" : "invalid-input-wrap"}`}
     >
       <div className="flex items-center justify-between gap-small">
@@ -168,7 +168,7 @@ export function BalanceInput({
             <span className="text-sm font-medium">{token.symbol}</span>
           ) : null
         ) : (
-          <div className="flex shrink-0 items-center gap-middle self-end">
+          <div className="flex shrink-0 items-center gap-medium self-end">
             {token ? (
               <div className="flex shrink-0 items-center gap-small">
                 <Image width={32} height={32} alt="Token" src={getTokenLogoSrc(token.logo)} className="rounded-full" />

src/components/bridge-select.tsx

@@ -11,8 +11,8 @@ interface Props {
 export default function BridgeSelect({ value, options = [], onChange = () => undefined }: Props) {
   return (
     <Select
-      labelClassName="bg-inner p-middle flex items-center justify-between rounded-xl transition-transform lg:active:translate-y-1"
-      childClassName="bg-inner p-middle flex flex-col rounded-middle gap-small border border-component"
+      labelClassName="bg-inner p-medium flex items-center justify-between rounded-xl transition-transform lg:active:translate-y-1"
+      childClassName="bg-inner p-medium flex flex-col rounded-medium gap-small border border-component"
       label={<span className="text-sm font-medium text-white">{bridgeName(value)}</span>}
       placeholder={<span className="text-sm font-medium text-slate-400">Select a bridge</span>}
       sameWidth
@@ -27,14 +27,14 @@ export default function BridgeSelect({ value, options = [], onChange = () => und
               onClick={() => {
                 onChange(c);
               }}
-              className="rounded-middle bg-component px-middle py-small text-start text-sm font-medium text-white transition-colors hover:bg-white/10"
+              className="rounded-medium bg-component px-medium py-small text-start text-sm font-medium text-white transition-colors hover:bg-white/10"
             >
               {bridgeName(c) || "-"}
             </button>
           );
         })
       ) : (
-        <div className="rounded-middle bg-component px-middle py-small">
+        <div className="rounded-medium bg-component px-medium py-small">
           <span className="text-sm font-medium text-white/50">No data</span>
         </div>
       )}

src/components/bridge-tabs.tsx

@@ -0,0 +1,49 @@
+import { Key, ReactElement, useRef } from "react";
+import { CSSTransition, SwitchTransition } from "react-transition-group";
+
+export interface TabsProps<T> {
+  activeTab: T;
+  options: {
+    tab: T;
+    label: string;
+    children: ReactElement;
+  }[];
+  onChange?: (tab: T) => void;
+}
+
+export default function BridgeTabs<K extends Key = string>({
+  options,
+  activeTab,
+  onChange = () => undefined,
+}: TabsProps<K>) {
+  const previousRef = useRef<HTMLDivElement | null>(null);
+  const currentRef = useRef<HTMLDivElement | null>(null);
+
+  const nodeRef = options.findIndex((option) => option.tab === activeTab) % 2 ? currentRef : previousRef;
+  const activeItem = options.find(({ tab }) => tab === activeTab) || options[0];
+
+  return (
+    <>
+      <div className="flex items-center justify-between gap-medium rounded-xl bg-background p-2">
+        {options.map((option) => (
+          <button
+            key={option.tab}
+            disabled={option.tab === activeTab}
+            onClick={() => onChange(option.tab)}
+            className="h-9 flex-1 rounded-lg text-sm font-bold text-white transition-colors hover:bg-white/10 disabled:bg-white/20"
+          >
+            {option.label}
+          </button>
+        ))}
+      </div>
+
+      <SwitchTransition>
+        <CSSTransition timeout={200} key={activeTab} nodeRef={nodeRef} classNames="tabs-fade" unmountOnExit>
+          <div ref={nodeRef} className="flex flex-col gap-medium lg:gap-5">
+            {activeItem.children}
+          </div>
+        </CSSTransition>
+      </SwitchTransition>
+    </>
+  );
+}

src/components/chain-identity.tsx

@@ -7,7 +7,7 @@ export default function ChainIdentity() {
   const config = getChainConfig(chain?.id);
 
   return chain ? (
-    <div className="hidden h-8 max-w-[9rem] items-center gap-middle rounded-full border border-primary px-middle lg:flex">
+    <div className="hidden h-8 max-w-[9rem] items-center gap-medium rounded-full border border-primary px-medium lg:flex">
       {config ? (
         <Image
           width={20}

src/components/chain-select.tsx

@@ -27,11 +27,11 @@ export default function ChainSelect({
     <Select
       labelClassName={`gap-small rounded-xl flex items-center justify-between transition active:translate-y-1 ${className}`}
       childClassName={`bg-inner flex flex-col rounded-xl max-h-60 overflow-y-auto border border-component ${
-        compact ? "py-small" : "p-middle"
+        compact ? "py-small" : "p-medium"
       }`}
       label={
         value ? (
-          <div className="flex items-center gap-middle truncate">
+          <div className="flex items-center gap-medium truncate">
             {compact ? null : (
               <Image
                 alt="Chain"
@@ -59,7 +59,7 @@ export default function ChainSelect({
               <button
                 key={option.id}
                 onClick={() => onChange(option)}
-                className="flex items-center gap-middle px-large py-2 text-start transition-colors hover:bg-white/10"
+                className="flex items-center gap-medium px-large py-2 text-start transition-colors hover:bg-white/10"
               >
                 <Image
                   width={20}
@@ -77,7 +77,7 @@ export default function ChainSelect({
             {options.map((option) => (
               <button
                 key={option.id}
-                className="flex w-36 shrink-0 items-center gap-small truncate rounded-middle bg-component px-2 py-2 transition-colors hover:bg-white/20"
+                className="flex w-36 shrink-0 items-center gap-small truncate rounded-medium bg-component px-2 py-2 transition-colors hover:bg-white/20"
                 onClick={() => onChange(option)}
               >
                 <Image