Abstract protocol interactions

ickb · Nov 22, 2024 · 0a5fb38 · 0a5fb38
1 parent 1da6cca
commit 0a5fb38
Show file tree

Hide file tree

Showing 18 changed files with 1,215 additions and 3,189 deletions.
diff --git a/.postcssrc b/.postcssrc
diff --git a/feedback.md b/feedback.md
@@ -63,7 +63,7 @@ TODO
 > ![][image6]  
 > This is a strange way to say it. I think you mean “waiting for transaction to confirm”. [Jordan]
 
-TODO
+DONE
 
 > ![][image7]  
 > I see this in the console, but it’s not on the page. This isn’t very user friendly. Once it is confirmed it needs to display a confirmation message at the very least. I have something similar to this on [https://ckb.tools/sudt](https://ckb.tools/sudt). [Jordan]

diff --git a/index.css b/index.css
@@ -0,0 +1,17 @@
+@import "tailwindcss";
+
+/* Scale up hit targets on high resolution mobile devices. */
+@media (min-resolution: 200dpi) {
+  html {
+    font-size: 18px;
+  }
+
+  .text-sm {
+    /* ensure minimum font size of 16px */
+    font-size: 0.9rem;
+  }
+}
+
+*::selection {
+  @apply bg-amber-400 text-zinc-500;
+}
diff --git a/index.html b/index.html
@@ -12,58 +12,54 @@
       property="og:description"
       content="An interface for interacting with iCKB scripts."
     />
-    <link rel="stylesheet" href="src/index.css" />
+    <link rel="stylesheet" href="index.css" />
   </head>
   <body
-    class="mx-auto max-w-3xl rounded bg-zinc-900 text-slate-300 mix-blend-hard-light shadow-2xl shadow-slate-800"
+    id="app"
+    class="m-auto grid max-w-3xl cursor-default grid-cols-1 space-y-8 rounded bg-gradient-to-r from-zinc-950 to-zinc-800 p-8 text-slate-300 mix-blend-hard-light sm:min-h-screen sm:shadow-2xl sm:shadow-black"
   >
-    <div id="app" class="m-4 flex flex-col space-y-4 rounded p-8">
+    <div class="m-4 flex flex-col space-y-4">
       <h1
-        class="flex flex-row items-center justify-center pb-4 text-5xl font-medium text-slate-200"
+        class="flex flex-row items-center justify-center pb-10 text-5xl font-medium"
       >
         <span class="mr-2 text-5xl text-amber-400">{</span>
-        <span>iCKB DApp</span>
+        <span>iCKB</span>
         <span class="ml-2 text-5xl text-amber-400">}</span>
       </h1>
       <p>
-        This is the iCKB DApp a way to convert between CKB & iCKB, a liquid
+        This is the iCKB DApp. A way to convert between CKB & iCKB, a liquid
         representation of deposits in the iCKB protocol. It allows for fast
         withdrawals while maintaining the benefits of traditional NervosDAO
         deposits without the need for re-staking.
       </p>
-      <h2
-        class="items-center justify-center pb-4 pt-8 text-3xl font-medium text-slate-300"
-      >
+      <h2 class="items-center justify-center pt-8 pb-4 text-3xl font-medium">
         Would you like to try out the DApp?
       </h2>
       <button
         id="JoyID_mainnet"
-        class="text-s h-12 w-full rounded border-2 border-amber-400 font-bold uppercase leading-relaxed tracking-wider text-amber-400 disabled:opacity-50"
+        class="text-s min-h-12 w-full cursor-pointer rounded border-2 border-amber-400 leading-relaxed font-bold tracking-wider text-amber-400 uppercase disabled:cursor-default disabled:opacity-50"
       >
         Yes, connect JoyID to Mainnet 🚧 (experimental)
       </button>
       <button
         id="JoyID_testnet"
-        class="text-s h-12 w-full rounded border-2 border-amber-400 font-bold uppercase leading-relaxed tracking-wider text-amber-400 disabled:opacity-50"
+        class="text-s min-h-12 w-full cursor-pointer rounded border-2 border-amber-400 leading-relaxed font-bold tracking-wider text-amber-400 uppercase disabled:cursor-default disabled:opacity-50"
       >
         Yes, connect JoyID to Testnet ☕️
       </button>
       <a
         href="https://t.me/NervosNation/307406"
-        class="text-s inline-flex h-12 w-full items-center justify-center rounded border-2 border-amber-400 font-bold uppercase leading-relaxed tracking-wider text-amber-400"
+        target="_blank"
+        class="text-s inline-flex min-h-12 w-full items-center justify-center rounded border-2 border-amber-400 text-center leading-relaxed font-bold tracking-wider text-amber-400 uppercase"
       >
         No, I'll feedback the dev 📝
       </a>
-      <p>
-        Feel free to give feedback for how you would like to see it improved.
-        Also visit the
-        <a
-          href="https://faucet.nervos.org/"
-          class="underline decoration-amber-400 decoration-wavy underline-offset-4"
-          >Nervos Testnet Faucet</a
-        >
-        if you need some free testnet CKB to test with.
-      </p>
+      <a
+        href="https://www.nervdao.com"
+        class="text-s inline-flex min-h-12 w-full items-center justify-center rounded border-2 border-amber-400 text-center leading-relaxed font-bold tracking-wider text-amber-400 uppercase"
+      >
+        No, I'll use NervDAO 👀
+      </a>
       <div id="progress" class="hidden h-2 w-full overflow-hidden rounded">
         <div
           class="size-full animate-pulse bg-amber-400 [animation-delay:-3.00s] [animation-duration:6s]"
@@ -148,9 +144,17 @@
           );
         }
       </script>
-      <h2
-        class="items-center justify-center pb-4 pt-8 text-3xl font-medium text-slate-300"
-      >
+      <p>
+        Feel free to give feedback for how you would like to see it improved.
+        Also visit the
+        <a
+          href="https://faucet.nervos.org/"
+          class="underline decoration-amber-400 decoration-wavy underline-offset-4"
+          >Nervos Testnet Faucet</a
+        >
+        if you need some free testnet CKB to test with.
+      </p>
+      <h2 class="items-center justify-center pt-8 pb-4 text-3xl font-medium">
         What is NervosDAO?
       </h2>
       <p>
@@ -170,9 +174,7 @@
         >
         to solve this.
       </p>
-      <h2
-        class="items-center justify-center pb-4 pt-8 text-3xl font-medium text-slate-300"
-      >
+      <h2 class="items-center justify-center pt-8 pb-4 text-3xl font-medium">
         What is iCKB?
       </h2>
       <p>
@@ -192,9 +194,7 @@
         withdrawals are fast as they can withdraw from the iCKB deposits closest
         to maturity, bypassing the NervosDAO ~30 days cycle.
       </p>
-      <h2
-        class="items-center justify-center pb-4 pt-8 text-3xl font-medium text-slate-300"
-      >
+      <h2 class="items-center justify-center pt-8 pb-4 text-3xl font-medium">
         Has iCKB been audited?
       </h2>
       <p>
@@ -224,20 +224,13 @@
         >
         before using the DApp.
       </p>
-      <h2
-        class="items-center justify-center pb-4 pt-8 text-3xl font-medium text-slate-300"
-      >
+      <h2 class="items-center justify-center pt-8 pb-4 text-3xl font-medium">
         Who is behind iCKB?
       </h2>
       <p>
         A developer, going by the pseudonym Phroi. I'd like to spend my time
         working on projects giving meaning to my life and improving the life of
-        users. Win-win situations. I'll present iCKB at
-        <a
-          href="https://www.commonknowledge.cc/"
-          class="underline decoration-amber-400 decoration-wavy underline-offset-4"
-          >CKCON 2024</a
-        >, feel free to come and say hi!!
+        users. Win-win situations.
       </p>
       <p>
         The Nervos Foundation who sponsored the development of iCKB project as a

diff --git a/package.json b/package.json
@@ -14,38 +14,33 @@
     "@ckb-lumos/codec": "^0.23.0",
     "@ckb-lumos/common-scripts": "^0.23.0",
     "@ckb-lumos/config-manager": "^0.23.0",
-    "@ckb-lumos/hd": "^0.23.0",
     "@ckb-lumos/helpers": "^0.23.0",
     "@ckb-lumos/rpc": "^0.23.0",
     "@ickb/lumos-utils": "1.4.2",
     "@ickb/v1-core": "1.4.2",
-    "@tanstack/react-query": "^5.59.15",
+    "@tanstack/react-query": "^5.61.0",
     "immutable": "^4.3.7",
     "react": "rc",
-    "react-aria-components": "^1.4.1",
     "react-dom": "rc"
   },
   "devDependencies": {
-    "@babel/preset-react": "^7.25.7",
+    "@babel/preset-react": "^7.25.9",
+    "@tailwindcss/vite": "next",
     "@types/react": "npm:types-react@rc",
     "@types/react-dom": "npm:types-react-dom@rc",
     "@typescript-eslint/eslint-plugin": "canary",
     "@typescript-eslint/parser": "canary",
-    "@vitejs/plugin-react": "^4.3.2",
-    "autoprefixer": "^10.4.20",
+    "@vitejs/plugin-react": "^4.3.3",
     "babel-plugin-react-compiler": "latest",
-    "eslint": "^9.12.0",
+    "eslint": "^9.15.0",
     "eslint-plugin-react-compiler": "latest",
     "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-plugin-react-refresh": "^0.4.12",
-    "postcss": "^8.4.47",
+    "eslint-plugin-react-refresh": "^0.4.14",
     "prettier": "^3.3.3",
-    "prettier-plugin-tailwindcss": "^0.6.8",
-    "tailwindcss": "^3.4.14",
-    "tailwindcss-animate": "^1.0.7",
-    "tailwindcss-react-aria-components": "^1.1.6",
+    "prettier-plugin-tailwindcss": "^0.6.9",
+    "tailwindcss": "next",
     "typescript": "next",
-    "vite": "^5.4.9"
+    "vite": "^5.4.11"
   },
-  "packageManager": "pnpm@9.12.3+sha256.24235772cc4ac82a62627cd47f834c72667a2ce87799a846ec4e8e555e2d4b8b"
-}
+  "packageManager": "pnpm@9.14.2+sha256.06e65a4965baff6d6097f9c8f75c35f6d420974dbc03d775009056a69edfd271"
+}