feat: Support transfer raw transaction to a format for Neuron offline sign

packages/neuron/package.json

@@ -10,6 +10,7 @@
     "update:locales": "i18next"
   },
   "dependencies": {
+    "@ckb-lumos/lumos": "0.23.0",
     "@docsearch/css": "3",
     "@docsearch/react": "3",
     "@magickbase-website/shared": "workspace:^",

packages/neuron/public/locales/en/common.json

@@ -33,5 +33,6 @@
   "Status": "Status",
   "Sync": "Sync",
   "Transaction": "Transaction",
-  "Usage Tutorial": "Usage Tutorial"
+  "Usage Tutorial": "Usage Tutorial",
+  "Tools": "Tools"
 }

packages/neuron/public/locales/en/tools.json

@@ -0,0 +1,13 @@
+{
+  "Tools": "Tools",
+  "Raw_Transaction_Conversion": "Raw Transaction Conversion",
+  "Raw_Transaction_Conversion_Tip": "Since Neuron may run offline, the raw transaction requires extra information to meet Neuron signature requirements. This tool will help you process raw transactions into transactions that Neuron can sign.",
+  "Click_Or_Drag_To_Upload": "Please click or drag in to upload the raw transaction JSON file",
+  "Mainnet": "Mainnet",
+  "Testnet": "Testnet",
+  "Process": "Process",
+  "Processing": "Processing",
+  "Transaction_Complete": "Transaction complete",
+  "Download": "Download",
+  "Incorrect_JSON": "JSON format is incorrect, Please check the upload file"
+}

packages/neuron/public/locales/zh/common.json

@@ -33,5 +33,6 @@
   "Status": "状态",
   "Sync": "同步",
   "Transaction": "交易",
-  "Usage Tutorial": "使用教程"
+  "Usage Tutorial": "使用教程",
+  "Tools": "工具"
 }

packages/neuron/public/locales/zh/tools.json

@@ -0,0 +1,13 @@
+{
+  "Tools": "工具",
+  "Raw_Transaction_Conversion": "原始交易转换",
+  "Raw_Transaction_Conversion_Tip": "由于 Neuron 可能离线运行，原始交易需要额外信息以满足 Neuron 签名要求。此工具将帮助您将原始交易处理为 Neuron 可以签名的交易。",
+  "Click_Or_Drag_To_Upload": "请点击或拖动以上传原始交易 JSON 文件",
+  "Mainnet": "主网",
+  "Testnet": "测试网",
+  "Process": "转换",
+  "Processing": "处理中",
+  "Transaction_Complete": "转换完成",
+  "Download": "下载",
+  "Incorrect_JSON": "JSON 格式不正确，请检查上传的文件"
+}

packages/neuron/src/components/Page/index.tsx

@@ -35,6 +35,7 @@ export const Page = forwardRef<HTMLDivElement, PageProps>(function Page(props, r
       { name: t('Changelog'), link: '/changelog' },
       { name: t('Help Center'), link: '/help-center' },
       { name: t('Download Neuron'), link: '/download' },
+      { name: t('Tools'), link: '/tools' },
     ],
     [t],
   )

packages/neuron/src/pages/tools/index.module.scss

@@ -0,0 +1,132 @@
+.page {
+  width: 100%;
+
+  .head {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 42px;
+    color: #f5f5f5;
+    font-weight: 700;
+    font-size: 40px;
+
+    .logo {
+      display: flex;
+      gap: 12px;
+      align-items: flex-end;
+      margin-top: 22px;
+      margin-bottom: 24px;
+      color: #f5f5f5;
+      font-weight: 600;
+      font-size: 26px;
+    }
+  }
+
+  .body {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    align-items: flex-start;
+    justify-content: center;
+    margin-bottom: 144px;
+    padding: 24px;
+    background: linear-gradient(180deg, rgb(54 54 54 / 40%) 0%, rgb(29 29 29 / 20%) 100%);
+    border: 1px solid rgb(255 255 255 / 20%);
+    border-radius: 24px;
+    backdrop-filter: blur(40px);
+
+    .upload {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      align-self: stretch;
+      justify-content: center;
+      height: 136px;
+      padding: 16px;
+      border: 1px solid rgb(255 255 255 / 20%);
+      border-radius: 8px;
+
+      input {
+        height: 0;
+        visibility: hidden;
+      }
+
+      .file {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .clear {
+        position: absolute;
+        top: 16px;
+        right: 16px;
+        cursor: pointer;
+      }
+    }
+
+    .node {
+      display: flex;
+      gap: 54px;
+      align-items: center;
+      margin: 8px 0;
+
+      & > label {
+        display: inline-flex;
+        align-items: center;
+        margin-right: 54px;
+      }
+
+      input {
+        position: relative;
+        width: 16px;
+        height: 16px;
+        margin: 0;
+        margin-right: 8px;
+        appearance: none;
+
+        &::before {
+          display: inline-block;
+          width: 14px;
+          height: 14px;
+          border: 1px solid #ccc;
+          border-radius: 14px;
+          content: ' ';
+        }
+
+        &:checked {
+          &::before {
+            border-color: var(--btnBackground);
+          }
+
+          &::after {
+            position: absolute;
+            top: 4px;
+            left: 4px;
+            width: 8px;
+            height: 8px;
+            background-color: var(--btnBackground);
+            border-radius: 8px;
+            content: ' ';
+          }
+        }
+      }
+    }
+
+    .err {
+      color: #f62a2a;
+      font-weight: 400;
+    }
+
+    .success {
+      color: var(--btnBackground);
+      font-weight: 400;
+    }
+
+    .process {
+      width: 144px;
+      margin: 8px 0;
+    }
+  }
+}