fix: Fix UI Issues (#394)

Co-authored-by: Lim SangHyun(Blue) <skqksh@gmail.com>
onbloc · Feb 8, 2024 · 925cb4f · 925cb4f
1 parent 50e23cd
commit 925cb4f
Show file tree

Hide file tree

Showing 126 changed files with 7,359 additions and 983 deletions.
diff --git a/package.json b/package.json
@@ -21,7 +21,6 @@
     "@babel/core": "7.21.0",
     "@babel/runtime": "7.21.0",
     "@storybook/react": "^7.0.4",
-    "@types/react-lottie": "^1.2.10",
     "@yarnpkg/sdks": "3.0.0-rc.40",
     "babel-loader": "9.1.2",
     "eslint": "8.0.1",
@@ -41,8 +40,5 @@
       "prettier --write",
       "git add"
     ]
-  },
-  "dependencies": {
-    "react-lottie": "^1.2.4"
   }
 }
diff --git a/packages/adena-extension/index.css b/packages/adena-extension/index.css
@@ -1,6 +1,6 @@
-@import url("https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.css");
-@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");
-
+@import url('https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.css');
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
 * {
   box-sizing: border-box;
 }
@@ -11,7 +11,7 @@ body {
   height: 540px;
   padding: 0;
   margin: 0;
-  font-family: "Poppins", sans-serif;
+  font-family: 'Poppins', sans-serif;
 
   position: relative;
 }
@@ -30,7 +30,7 @@ a {
   position: relative;
 }
 
-#root[aria-hidden="true"] .MuiOutlinedInput-root {
+#root[aria-hidden='true'] .MuiOutlinedInput-root {
   border-color: #0059ff;
   border-bottom-left-radius: 0px;
   border-bottom-right-radius: 0px;
@@ -44,8 +44,8 @@ main {
   padding: 0 20px;
 }
 
-input[type="number"]::-webkit-inner-spin-button,
-input[type="number"]::-webkit-outer-spin-button {
+input[type='number']::-webkit-inner-spin-button,
+input[type='number']::-webkit-outer-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }

diff --git a/packages/adena-extension/package.json b/packages/adena-extension/package.json
@@ -84,6 +84,7 @@
     "crypto-js": "^4.1.1",
     "dayjs": "^1.11.7",
     "html-loader": "^4.1.0",
+    "lottie-web": "5.12.2",
     "node-polyfill-webpack-plugin": "^2.0.1",
     "qrcode.react": "^3.1.0",
     "react": "^18.2.0",

diff --git a/packages/adena-extension/public/manifest.json b/packages/adena-extension/public/manifest.json
@@ -27,6 +27,6 @@
     }
   ],
   "content_security_policy": {
-    "extension_pages": "script-src 'self' 'wasm-unsafe-eval'; default-src 'self'; img-src 'self' https: data:; font-src https://fonts.gstatic.com; style-src 'self' 'unsafe-inline'; style-src-elem 'self' 'unsafe-inline' https://fonts.googleapis.com https://cdn.jsdelivr.net; connect-src 'self' data: *; frame-src *;"
+    "extension_pages": "script-src 'self' 'wasm-unsafe-eval'; default-src 'self'; img-src 'self' https: data:; font-src data: https://fonts.gstatic.com; style-src 'self' 'unsafe-inline'; style-src-elem 'self' 'unsafe-inline' https://fonts.googleapis.com https://cdn.jsdelivr.net; connect-src 'self' data: *; frame-src *;"
   }
 }
diff --git a/packages/adena-extension/public/web.html b/packages/adena-extension/public/web.html
@@ -1,17 +1,18 @@
 <!DOCTYPE html>
 <html>
+  <head>
+    <title>Adena</title>
+    <meta charset="utf-8" />
+    <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=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap"
+      rel="stylesheet"
+    />
+    <link href="/resources/fonts/inter.css" rel="stylesheet" type="text/css" />
+  </head>
 
-<head>
-  <title>Adena</title>
-  <meta charset="utf-8" />
-  <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=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap"
-    rel="stylesheet" />
-</head>
-
-<body>
-  <div id="web"></div>
-</body>
-
-</html>
+  <body>
+    <div id="web"></div>
+  </body>
+</html>
diff --git a/packages/adena-extension/src/assets/fonts/Inter-Medium.ttf b/packages/adena-extension/src/assets/fonts/Inter-Medium.ttf
diff --git a/packages/adena-extension/src/assets/fonts/Inter-Regular.ttf b/packages/adena-extension/src/assets/fonts/Inter-Regular.ttf
diff --git a/packages/adena-extension/src/assets/fonts/Inter-SemiBold.ttf b/packages/adena-extension/src/assets/fonts/Inter-SemiBold.ttf
diff --git a/packages/adena-extension/src/assets/icon-airgap.tsx b/packages/adena-extension/src/assets/icon-airgap.tsx
@@ -4,13 +4,13 @@ import React from 'react';
 const IconAirgap = (): JSX.Element => (
   <svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
     <g id="Group 2">
-      <path id="Subtract" fill-rule="evenodd" clip-rule="evenodd" d="M0.3402 2.7738C0 3.258 0 4.6971 0 7.5753V8.9919C0 14.067 3.8151 16.5285 6.2091 17.5743L6.21223 17.5757C6.85905 17.8583 7.18348 18 8.1 18C9.01652 18 9.34095 17.8583 9.98776 17.5757L9.9909 17.5743C12.3849 16.5294 16.2 14.0661 16.2 8.9919V7.5753C16.2 4.698 16.2 3.258 15.8598 2.7738C15.5205 2.2905 14.1678 1.827 11.4615 0.9009L10.9458 0.7245C9.5355 0.2412 8.8299 0 8.1 0C7.3692 0 6.6645 0.2412 5.2542 0.7245L4.7385 0.9009C2.0322 1.827 0.6795 2.2905 0.3402 2.7738ZM8.10001 5.44507C7.75923 5.44507 7.42764 5.5556 7.15501 5.76007L4.09501 8.05507C4.0241 8.10825 3.96435 8.17489 3.91919 8.25116C3.87403 8.32743 3.84433 8.41186 3.8318 8.49961C3.81926 8.58736 3.82413 8.67672 3.84613 8.76259C3.86813 8.84846 3.90683 8.92915 3.96001 9.00007C4.0132 9.07098 4.07983 9.13073 4.1561 9.17589C4.23238 9.22105 4.3168 9.25075 4.40455 9.26328C4.4923 9.27582 4.58167 9.27095 4.66753 9.24895C4.7534 9.22695 4.8341 9.18825 4.90501 9.13507L7.96501 6.84007C8.00396 6.81086 8.05133 6.79507 8.10001 6.79507C8.1487 6.79507 8.19606 6.81086 8.23501 6.84007L11.295 9.13507C11.3659 9.18825 11.4466 9.22695 11.5325 9.24895C11.6184 9.27095 11.7077 9.27582 11.7955 9.26328C11.8832 9.25075 11.9676 9.22105 12.0439 9.17589C12.1202 9.13073 12.1868 9.07098 12.24 9.00007C12.2932 8.92915 12.3319 8.84846 12.3539 8.76259C12.3759 8.67672 12.3808 8.58736 12.3682 8.49961C12.3557 8.41186 12.326 8.32743 12.2808 8.25116C12.2357 8.17489 12.1759 8.10825 12.105 8.05507L9.04501 5.76007C8.77239 5.5556 8.4408 5.44507 8.10001 5.44507ZM8.10001 8.82007C7.95396 8.82007 7.81185 8.86744 7.69501 8.95507L5.89501 10.3051C5.7518 10.4125 5.65711 10.5724 5.6318 10.7496C5.60648 10.9268 5.6526 11.1069 5.76001 11.2501C5.86742 11.3933 6.02733 11.488 6.20455 11.5133C6.38177 11.5386 6.5618 11.4925 6.70501 11.3851L8.10001 10.3393L9.49501 11.3851C9.63823 11.4925 9.81825 11.5386 9.99547 11.5133C10.1727 11.488 10.3326 11.3933 10.44 11.2501C10.5474 11.1069 10.5935 10.9268 10.5682 10.7496C10.5429 10.5724 10.4482 10.4125 10.305 10.3051L8.50501 8.95507C8.38817 8.86744 8.24606 8.82007 8.10001 8.82007Z" fill="url(#paint0_radial_7878_2790)" />
+      <path id="Subtract" fillRule="evenodd" clipRule="evenodd" d="M0.3402 2.7738C0 3.258 0 4.6971 0 7.5753V8.9919C0 14.067 3.8151 16.5285 6.2091 17.5743L6.21223 17.5757C6.85905 17.8583 7.18348 18 8.1 18C9.01652 18 9.34095 17.8583 9.98776 17.5757L9.9909 17.5743C12.3849 16.5294 16.2 14.0661 16.2 8.9919V7.5753C16.2 4.698 16.2 3.258 15.8598 2.7738C15.5205 2.2905 14.1678 1.827 11.4615 0.9009L10.9458 0.7245C9.5355 0.2412 8.8299 0 8.1 0C7.3692 0 6.6645 0.2412 5.2542 0.7245L4.7385 0.9009C2.0322 1.827 0.6795 2.2905 0.3402 2.7738ZM8.10001 5.44507C7.75923 5.44507 7.42764 5.5556 7.15501 5.76007L4.09501 8.05507C4.0241 8.10825 3.96435 8.17489 3.91919 8.25116C3.87403 8.32743 3.84433 8.41186 3.8318 8.49961C3.81926 8.58736 3.82413 8.67672 3.84613 8.76259C3.86813 8.84846 3.90683 8.92915 3.96001 9.00007C4.0132 9.07098 4.07983 9.13073 4.1561 9.17589C4.23238 9.22105 4.3168 9.25075 4.40455 9.26328C4.4923 9.27582 4.58167 9.27095 4.66753 9.24895C4.7534 9.22695 4.8341 9.18825 4.90501 9.13507L7.96501 6.84007C8.00396 6.81086 8.05133 6.79507 8.10001 6.79507C8.1487 6.79507 8.19606 6.81086 8.23501 6.84007L11.295 9.13507C11.3659 9.18825 11.4466 9.22695 11.5325 9.24895C11.6184 9.27095 11.7077 9.27582 11.7955 9.26328C11.8832 9.25075 11.9676 9.22105 12.0439 9.17589C12.1202 9.13073 12.1868 9.07098 12.24 9.00007C12.2932 8.92915 12.3319 8.84846 12.3539 8.76259C12.3759 8.67672 12.3808 8.58736 12.3682 8.49961C12.3557 8.41186 12.326 8.32743 12.2808 8.25116C12.2357 8.17489 12.1759 8.10825 12.105 8.05507L9.04501 5.76007C8.77239 5.5556 8.4408 5.44507 8.10001 5.44507ZM8.10001 8.82007C7.95396 8.82007 7.81185 8.86744 7.69501 8.95507L5.89501 10.3051C5.7518 10.4125 5.65711 10.5724 5.6318 10.7496C5.60648 10.9268 5.6526 11.1069 5.76001 11.2501C5.86742 11.3933 6.02733 11.488 6.20455 11.5133C6.38177 11.5386 6.5618 11.4925 6.70501 11.3851L8.10001 10.3393L9.49501 11.3851C9.63823 11.4925 9.81825 11.5386 9.99547 11.5133C10.1727 11.488 10.3326 11.3933 10.44 11.2501C10.5474 11.1069 10.5935 10.9268 10.5682 10.7496C10.5429 10.5724 10.4482 10.4125 10.305 10.3051L8.50501 8.95507C8.38817 8.86744 8.24606 8.82007 8.10001 8.82007Z" fill="url(#paint0_radial_7878_2790)" />
     </g>
     <defs>
       <radialGradient id="paint0_radial_7878_2790" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(8 18) rotate(-90) scale(18 16.2)">
-        <stop stop-color="#70A2FF" />
-        <stop offset="0.3125" stop-color="#7AA9FF" />
-        <stop offset="1" stop-color="#85AFFF" />
+        <stop stopColor="#70A2FF" />
+        <stop offset="0.3125" stopColor="#7AA9FF" />
+        <stop offset="1" stopColor="#85AFFF" />
       </radialGradient>
     </defs>
   </svg>

diff --git a/packages/adena-extension/src/assets/icon-hardware-wallet.tsx b/packages/adena-extension/src/assets/icon-hardware-wallet.tsx
@@ -1,9 +1,9 @@
-/* eslint-disable react/no-unknown-property */
+/* eslintDisable react/noUnknownProperty */
 import React from 'react';
 
 const IconHardwareWallet = (): JSX.Element => (
   <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M10.1944 6.66667V7.55556M13.75 6.66667V7.55556M10.1944 18.2222H9.30556C8.36256 18.2222 7.45819 17.8476 6.7914 17.1808C6.1246 16.514 5.75 15.6097 5.75 14.6667V12C5.75 11.7643 5.84365 11.5382 6.01035 11.3715C6.17705 11.2048 6.40314 11.1111 6.63889 11.1111H17.3056C17.5413 11.1111 17.7674 11.2048 17.9341 11.3715C18.1008 11.5382 18.1944 11.7643 18.1944 12V14.6667C18.1944 15.6097 17.8198 16.514 17.153 17.1808C16.4862 17.8476 15.5819 18.2222 14.6389 18.2222H13.75M10.1944 18.2222V20M10.1944 18.2222H13.75M13.75 18.2222V20M8.41667 11.1111H15.5278C15.7635 11.1111 15.9896 11.0175 16.1563 10.8508C16.323 10.6841 16.4167 10.458 16.4167 10.2222V4.88889C16.4167 4.65314 16.323 4.42705 16.1563 4.26035C15.9896 4.09365 15.7635 4 15.5278 4H8.41667C8.18092 4 7.95483 4.09365 7.78813 4.26035C7.62143 4.42705 7.52778 4.65314 7.52778 4.88889V10.2222C7.52778 10.458 7.62143 10.6841 7.78813 10.8508C7.95483 11.0175 8.18092 11.1111 8.41667 11.1111Z" stroke="#FAFCFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+    <path d="M10.1944 6.66667V7.55556M13.75 6.66667V7.55556M10.1944 18.2222H9.30556C8.36256 18.2222 7.45819 17.8476 6.7914 17.1808C6.1246 16.514 5.75 15.6097 5.75 14.6667V12C5.75 11.7643 5.84365 11.5382 6.01035 11.3715C6.17705 11.2048 6.40314 11.1111 6.63889 11.1111H17.3056C17.5413 11.1111 17.7674 11.2048 17.9341 11.3715C18.1008 11.5382 18.1944 11.7643 18.1944 12V14.6667C18.1944 15.6097 17.8198 16.514 17.153 17.1808C16.4862 17.8476 15.5819 18.2222 14.6389 18.2222H13.75M10.1944 18.2222V20M10.1944 18.2222H13.75M13.75 18.2222V20M8.41667 11.1111H15.5278C15.7635 11.1111 15.9896 11.0175 16.1563 10.8508C16.323 10.6841 16.4167 10.458 16.4167 10.2222V4.88889C16.4167 4.65314 16.323 4.42705 16.1563 4.26035C15.9896 4.09365 15.7635 4 15.5278 4H8.41667C8.18092 4 7.95483 4.09365 7.78813 4.26035C7.62143 4.42705 7.52778 4.65314 7.52778 4.88889V10.2222C7.52778 10.458 7.62143 10.6841 7.78813 10.8508C7.95483 11.0175 8.18092 11.1111 8.41667 11.1111Z" stroke="#FAFCFF" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
     <path d="M5.75 12.0002C5.75 11.7645 5.84365 11.5384 6.01035 11.3717C6.17705 11.205 6.40314 11.1113 6.63889 11.1113H17.3056C17.5413 11.1113 17.7674 11.205 17.9341 11.3717C18.1008 11.5384 18.1944 11.7645 18.1944 12.0002V14.6669C18.1944 15.6099 17.8198 16.5142 17.153 17.181C16.4862 17.8478 15.5819 18.2224 14.6389 18.2224H9.30556C8.36256 18.2224 7.45819 17.8478 6.7914 17.181C6.1246 16.5142 5.75 15.6099 5.75 14.6669V12.0002Z" fill="#FAFCFF" />
   </svg>
 

diff --git a/packages/adena-extension/src/assets/icon-thunder.tsx b/packages/adena-extension/src/assets/icon-thunder.tsx
@@ -4,7 +4,7 @@ import React from 'react';
 const IconThunder = (): JSX.Element => (
   <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
     <g id="tertiary button icons ">
-      <path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M13.6135 3.81856C13.6136 3.63871 13.5545 3.46383 13.4452 3.32099C13.3359 3.17815 13.1826 3.07531 13.0089 3.02836C12.8353 2.98142 12.6511 2.99299 12.4847 3.06129C12.3183 3.1296 12.1791 3.25082 12.0885 3.40622L6.36151 13.2239C6.28896 13.3483 6.25049 13.4896 6.25 13.6335C6.24952 13.7775 6.28702 13.919 6.35873 14.0438C6.43043 14.1687 6.53381 14.2723 6.65841 14.3444C6.78301 14.4165 6.92443 14.4545 7.06839 14.4544H10.341V20.1814C10.3409 20.3613 10.4 20.5362 10.5093 20.679C10.6186 20.8218 10.7719 20.9247 10.9456 20.9716C11.1192 21.0186 11.3034 21.007 11.4698 20.9387C11.6362 20.8704 11.7754 20.7492 11.866 20.5938L17.593 10.7761C17.6655 10.6517 17.704 10.5104 17.7045 10.3665C17.705 10.2225 17.6675 10.081 17.5958 9.95617C17.5241 9.83135 17.4207 9.72766 17.2961 9.65556C17.1715 9.58347 17.0301 9.54553 16.8861 9.54557H13.6135V3.81856Z" fill="#FAFCFF" />
+      <path id="Vector" fillRule="evenodd" clipRule="evenodd" d="M13.6135 3.81856C13.6136 3.63871 13.5545 3.46383 13.4452 3.32099C13.3359 3.17815 13.1826 3.07531 13.0089 3.02836C12.8353 2.98142 12.6511 2.99299 12.4847 3.06129C12.3183 3.1296 12.1791 3.25082 12.0885 3.40622L6.36151 13.2239C6.28896 13.3483 6.25049 13.4896 6.25 13.6335C6.24952 13.7775 6.28702 13.919 6.35873 14.0438C6.43043 14.1687 6.53381 14.2723 6.65841 14.3444C6.78301 14.4165 6.92443 14.4545 7.06839 14.4544H10.341V20.1814C10.3409 20.3613 10.4 20.5362 10.5093 20.679C10.6186 20.8218 10.7719 20.9247 10.9456 20.9716C11.1192 21.0186 11.3034 21.007 11.4698 20.9387C11.6362 20.8704 11.7754 20.7492 11.866 20.5938L17.593 10.7761C17.6655 10.6517 17.704 10.5104 17.7045 10.3665C17.705 10.2225 17.6675 10.081 17.5958 9.95617C17.5241 9.83135 17.4207 9.72766 17.2961 9.65556C17.1715 9.58347 17.0301 9.54553 16.8861 9.54557H13.6135V3.81856Z" fill="#FAFCFF" />
     </g>
   </svg>
 

diff --git a/...tension/src/install/assets/logo-typeB.svg → ...dena-extension/src/assets/logo-type-b.svg b/...tension/src/install/assets/logo-typeB.svg → ...dena-extension/src/assets/logo-type-b.svg