Merge pull request #2 from cryptape/transaction-management

Transaction management

.eslintrc.js

@@ -0,0 +1,27 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: ["eslint:recommended", "plugin:react/recommended"],
+  overrides: [
+    {
+      env: {
+        node: true,
+      },
+      files: [".eslintrc.{js,cjs}"],
+      parserOptions: {
+        sourceType: "script",
+      },
+    },
+  ],
+  parserOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module",
+  },
+  plugins: ["react"],
+  rules: {
+    "react/prop-types": "off",
+    "react/react-in-jsx-scope": "off",
+  },
+};

package.json

@@ -8,12 +8,14 @@
     "@ckb-cobuild/ckb-molecule-codecs": "^2.0.3",
     "@ckb-cobuild/cobuild": "^4.0.2",
     "@ckb-cobuild/hex-encoding": "^1.0.0",
+    "@ckb-cobuild/jsonrpc-client": "^1.0.0",
     "@ckb-cobuild/molecule": "^1.1.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "autoprefixer": "^10.4.17",
     "bech32": "^2.0.0",
+    "elliptic": "^6.5.4",
     "flowbite-react": "^0.7.2",
     "immer": "^10.0.3",
     "postcss": "^8.4.35",

src/AddressPage.js

@@ -50,7 +50,6 @@ export function NeuronUsage({ address, ...props }) {
       <p>
         <Button
           className="inline-block"
-          outlined
           as="a"
           download={fileName}
           target="_blank"

src/App.js

@@ -2,11 +2,17 @@ import { Spinner } from "flowbite-react";
 import { Suspense, useTransition } from "react";
 import { useHash } from "react-use";
 import AddressPage from "./AddressPage.js";
+import ImportAddressPage from "./ImportAddressPage.js";
+import ImportTransactionPage from "./ImportTransactionPage.js";
+import BroadcastTransactionPage from "./BroadcastTransactionPage.js";
 import IndexPage from "./IndexPage.js";
 import Layout from "./Layout.js";
 import NewAddressPage from "./NewAddressPage.js";
-import ImportAddressPage from "./ImportAddressPage.js";
-import usePersistReducer from "./reducer.js";
+import TransactionPage from "./TransactionPage.js";
+import usePersistReducer, {
+  findAddressByArgs,
+  findTransactionByHash,
+} from "./reducer.js";
 
 function App() {
   return (
@@ -16,46 +22,98 @@ function App() {
   );
 }
 
-function findAddress(state, args) {
-  return state.addresses.find((address) => address.args === args);
-}
-
 function Router() {
   const [page, setPage] = useHash();
   const [isPending, startTransition] = useTransition();
-  const [state, { addAddress, deleteAddress }] = usePersistReducer();
+  const [
+    state,
+    {
+      addAddress,
+      deleteAddress,
+      addTransaction,
+      deleteTransaction,
+      resolveInputs,
+      setTransactionStatus,
+    },
+  ] = usePersistReducer();
 
   const navigate = (url) => startTransition(() => setPage(url));
 
   const fallbackRoute = () => <NotFound {...{ page, navigate }} />;
   const staticRoutes = {
-    "#/": () => <IndexPage {...{ navigate, state, deleteAddress }} />,
+    "#/": () => (
+      <IndexPage {...{ navigate, state, deleteAddress, deleteTransaction }} />
+    ),
     "#/addresses/new": () => <NewAddressPage {...{ navigate, addAddress }} />,
     "#/addresses/import": () => (
       <ImportAddressPage {...{ navigate, addAddress }} />
     ),
+    "#/transactions/import": () => (
+      <ImportTransactionPage {...{ navigate, addTransaction }} />
+    ),
   };
   staticRoutes[""] = staticRoutes["#/"];
   const dynamicRoutes = [
     [
       "#/addresses/duplicate/",
       (args) => (
         <NewAddressPage
-          {...{ navigate, addAddress, template: findAddress(state, args) }}
+          {...{
+            navigate,
+            addAddress,
+            template: findAddressByArgs(state, args),
+          }}
         />
       ),
     ],
     [
       "#/addresses/",
       (args) => {
-        const address = findAddress(state, args);
+        const address = findAddressByArgs(state, args);
         return address ? (
           <AddressPage {...{ address, deleteAddress, navigate }} />
         ) : (
           fallbackRoute()
         );
       },
     ],
+    [
+      "#/transactions/broadcast/",
+      (hash) => {
+        const transaction = findTransactionByHash(state, hash);
+        return transaction ? (
+          <BroadcastTransactionPage
+            {...{
+              transaction,
+              setTransactionStatus,
+              navigate,
+              endpoint: state.endpoint,
+            }}
+          />
+        ) : (
+          fallbackRoute()
+        );
+      },
+    ],
+    [
+      "#/transactions/",
+      (hash) => {
+        const transaction = findTransactionByHash(state, hash);
+        return transaction ? (
+          <TransactionPage
+            {...{
+              transaction,
+              navigate,
+              deleteTransaction,
+              resolveInputs,
+              endpoint: state.endpoint,
+            }}
+          />
+        ) : (
+          fallbackRoute()
+        );
+      },
+    ],
   ];
   const content = dispatchRoute(
     page,