feat: add ts-rs mapping to our jrpc

tari-project · Jan 25, 2024 · 7b1a7aa · 7b1a7aa
1 parent 7448b4f
commit 7b1a7aa
Show file tree

Hide file tree

Showing 329 changed files with 2,549 additions and 87 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -8,5 +8,5 @@
   "bracketSpacing": true,
   "bracketSameLine": false,
   "arrowParens": "always",
-  "endOfLine": "lf"
+  "endOfLine": "auto"
 }
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/Cargo.toml b/Cargo.toml
@@ -214,6 +214,11 @@ tower = "0.4"
 tower-http = { version = "0.3.5", default-features = false }
 tower-layer = "0.3"
 tracing = "0.1.40"
+ts-rs = { version = "7.1", features = [
+    "chrono-impl",
+    "no-serde-warnings",
+    "indexmap-impl",
+] }
 url = "2.4.1"
 wasmer = "2.3.0"
 wasmer-middlewares = "2.3.0"

diff --git a/applications/tari_dan_wallet_daemon/Cargo.toml b/applications/tari_dan_wallet_daemon/Cargo.toml
@@ -70,3 +70,6 @@ ignored = [
     # Want to enable some log4rs features
     "log4rs",
 ]
+
+[features]
+ts = []
diff --git a/applications/tari_dan_wallet_daemon/build.rs b/applications/tari_dan_wallet_daemon/build.rs
@@ -20,11 +20,17 @@
 // WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE
 // USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
-use std::process::Command;
+use std::{env, process::Command};
 
 fn main() -> Result<(), Box<dyn std::error::Error>> {
     println!("cargo:rerun-if-changed=../tari_dan_wallet_web_ui/src");
     println!("cargo:rerun-if-changed=../tari_dan_wallet_web_ui/public");
+
+    if env::var_os("CARGO_FEATURE_TS").is_some() {
+        println!("cargo:warning=The web ui is not being compiled when we are generating typescript types/interfaces.");
+        return Ok(());
+    }
+
     let npm = if cfg!(windows) { "npm.cmd" } else { "npm" };
 
     if let Err(error) = Command::new(npm)

diff --git a/applications/tari_dan_wallet_web_ui/dist/.gitkeep b/applications/tari_dan_wallet_web_ui/dist/.gitkeep
diff --git a/applications/tari_dan_wallet_web_ui/src/Components/StatusChip.tsx b/applications/tari_dan_wallet_web_ui/src/Components/StatusChip.tsx
@@ -23,9 +23,10 @@
 import { Chip, Avatar } from "@mui/material";
 import { IoCheckmarkOutline, IoDiamondOutline, IoReload, IoHourglassOutline, IoCloseOutline } from "react-icons/io5";
 import { useTheme } from "@mui/material/styles";
+import { TransactionStatus } from "../../../../bindings/TransactionStatus";
 
 interface StatusChipProps {
-  status: "Accepted" | "Pending" | "DryRun" | "New" | "Rejected" | "InvalidTransaction";
+  status: TransactionStatus;
   showTitle?: boolean;
 }
 
@@ -36,6 +37,7 @@ const colorList: Record<string, string> = {
   New: "#9D5CF9",
   Rejected: "#DB7E7E",
   InvalidTransaction: "#DB7E7E",
+  OnlyFeeAccepted: "#FFA500",
 };
 
 export default function StatusChip({ status, showTitle = true }: StatusChipProps) {
@@ -48,14 +50,32 @@ export default function StatusChip({ status, showTitle = true }: StatusChipProps
     New: <IoDiamondOutline style={{ height: 14, width: 14 }} color={theme.palette.background.paper} />,
     Rejected: <IoCloseOutline style={{ height: 14, width: 14 }} color={theme.palette.background.paper} />,
     InvalidTransaction: <IoCloseOutline style={{ height: 14, width: 14 }} color={theme.palette.background.paper} />,
+    OnlyFeeAccepted: (
+      <>
+        <IoCheckmarkOutline style={{ height: 14, width: 14 }} color={theme.palette.background.paper} />
+        <IoCloseOutline style={{ height: 14, width: 14 }} color={theme.palette.background.paper} />
+      </>
+    ),
   };
 
+  let bgColor = colorList[status];
+  let background = null;
+
+  if (status === "OnlyFeeAccepted") {
+    const leftColor = colorList["Accepted"];
+    const rightColor = colorList["Rejected"];
+    background = `linear-gradient(to right, ${leftColor} 50%, ${colorList["Rejected"]} 50%)`;
+  }
+
   if (!showTitle) {
-    return <Avatar sx={{ bgcolor: colorList[status], height: 22, width: 22 }}>{iconList[status]}</Avatar>;
+    let leftColor = colorList["Accepted"];
+    let rightColor = colorList["Rejected"];
+
+    return <Avatar sx={{ bgcolor: bgColor, height: 22, width: 22 }}>{iconList[status]}</Avatar>;
   } else {
     return (
       <Chip
-        avatar={<Avatar sx={{ bgcolor: colorList[status] }}>{iconList[status]}</Avatar>}
+        avatar={<Avatar sx={{ bgcolor: bgColor, background: background }}>{iconList[status]}</Avatar>}
         label={status}
         style={{ color: colorList[status], borderColor: colorList[status] }}
         variant="outlined"

diff --git a/applications/tari_dan_wallet_web_ui/src/api/hooks/useTransactions.tsx b/applications/tari_dan_wallet_web_ui/src/api/hooks/useTransactions.tsx
@@ -20,9 +20,10 @@
 //  WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE
 //  USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
-import { useQuery } from "@tanstack/react-query";
+import { UseQueryResult, useQuery } from "@tanstack/react-query";
 import { getAllTransaction, jsonRpc } from "../../utils/json_rpc";
 import { apiError } from "../helpers/types";
+import { TransactionGetAllResponse } from "../../../../../bindings/TransactionGetAllResponse";
 
 const useTransactionDetails = (hash: string) => {
   return useQuery({
@@ -36,7 +37,10 @@ const useTransactionDetails = (hash: string) => {
   });
 };
 
-const useGetAllTransactions = (status: string | null | undefined, component: string | null | undefined) => {
+const useGetAllTransactions = (
+  status: string | null | undefined,
+  component: string | null | undefined,
+): UseQueryResult<TransactionGetAllResponse, apiError> => {
   return useQuery({
     queryKey: ["transactions"],
     queryFn: () => getAllTransaction(status, component),

diff --git a/applications/tari_dan_wallet_web_ui/src/routes/Transactions/Transactions.tsx b/applications/tari_dan_wallet_web_ui/src/routes/Transactions/Transactions.tsx
@@ -41,6 +41,9 @@ import { DataTableCell } from "../../Components/StyledComponents";
 import { useGetAllTransactions } from "../../api/hooks/useTransactions";
 import { emptyRows, handleChangePage, handleChangeRowsPerPage } from "../../utils/helpers";
 import { useAccountsGet } from "../../api/hooks/useAccounts";
+import { Transaction } from "../../../../../bindings/Transaction";
+import { FinalizeResult } from "../../../../../bindings/FinalizeResult";
+import { TransactionStatus } from "../../../../../bindings/TransactionStatus";
 
 export default function Transactions({ accountName }: { accountName: string }) {
   const { data: accountsData } = useAccountsGet(accountName);
@@ -74,41 +77,43 @@ export default function Transactions({ accountName }: { accountName: string }) {
               </TableRow>
             </TableHead>
             <TableBody>
-              {data?.transactions?.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((t: any) => {
-                if (t?.[0]?.id !== undefined) {
-                  const hash = t[0].id;
-                  return (
-                    <TableRow key={hash}>
-                      <DataTableCell>
-                        <Link
-                          to={`/transactions/${hash}`}
-                          style={{
-                            textDecoration: "none",
-                            color: theme.palette.text.secondary,
-                          }}
-                        >
-                          {hash}
-                        </Link>
-                      </DataTableCell>
-                      <DataTableCell>
-                        <StatusChip status={t[2]} showTitle />
-                      </DataTableCell>
-                      <DataTableCell>{t?.[1]?.cost_breakdown?.total_fees_charged || 0}</DataTableCell>
-                      <DataTableCell>
-                        <IconButton
-                          component={Link}
-                          to={`/transactions/${hash}`}
-                          style={{
-                            color: theme.palette.text.secondary,
-                          }}
-                        >
-                          <ChevronRight />
-                        </IconButton>
-                      </DataTableCell>
-                    </TableRow>
-                  );
-                }
-              })}
+              {data?.transactions
+                ?.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
+                .map((t: [Transaction, FinalizeResult | null, TransactionStatus, string]) => {
+                  if (t?.[0]?.id !== undefined) {
+                    const hash = t[0].id;
+                    return (
+                      <TableRow key={hash}>
+                        <DataTableCell>
+                          <Link
+                            to={`/transactions/${hash}`}
+                            style={{
+                              textDecoration: "none",
+                              color: theme.palette.text.secondary,
+                            }}
+                          >
+                            {hash}
+                          </Link>
+                        </DataTableCell>
+                        <DataTableCell>
+                          <StatusChip status={t[2]} showTitle />
+                        </DataTableCell>
+                        <DataTableCell>{t?.[1]?.cost_breakdown?.total_fees_charged || 0}</DataTableCell>
+                        <DataTableCell>
+                          <IconButton
+                            component={Link}
+                            to={`/transactions/${hash}`}
+                            style={{
+                              color: theme.palette.text.secondary,
+                            }}
+                          >
+                            <ChevronRight />
+                          </IconButton>
+                        </DataTableCell>
+                      </TableRow>
+                    );
+                  }
+                })}
               {emptyRows(page, rowsPerPage, data?.transactions) > 0 && (
                 <TableRow
                   style={{

diff --git a/applications/tari_dan_wallet_web_ui/src/utils/helpers.tsx b/applications/tari_dan_wallet_web_ui/src/utils/helpers.tsx
@@ -21,6 +21,9 @@
 //  USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
 import { ChangeEvent } from "react";
+import { Transaction } from "../../../../bindings/Transaction";
+import { FinalizeResult } from "../../../../bindings/FinalizeResult";
+import { TransactionStatus } from "../../../../bindings/TransactionStatus";
 
 const renderJson = (json: any) => {
   if (Array.isArray(json)) {
@@ -100,7 +103,14 @@ function shortenString(string: string, start: number = 8, end: number = 8) {
   return string.substring(0, start) + "..." + string.slice(-end);
 }
 
-function emptyRows(page: number, rowsPerPage: number, array: any[]) {
+function emptyRows(
+  page: number,
+  rowsPerPage: number,
+  array: Array<[Transaction, FinalizeResult | null, TransactionStatus, string]> | undefined,
+) {
+  if (array === undefined) {
+    return 0;
+  }
   return page > 0 ? Math.max(0, (1 + page) * rowsPerPage - array.length) : 0;
 }
 

diff --git a/applications/tari_dan_wallet_web_ui/src/utils/json_rpc.tsx b/applications/tari_dan_wallet_web_ui/src/utils/json_rpc.tsx
@@ -34,13 +34,7 @@ async function internalJsonRpc(method: string, token: any = null, params: any =
     id = json_id;
     json_id += 1;
   });
-  let address = "http://localhost:9000";
-  try {
-    address = await (await fetch("/json_rpc_address")).text();
-    if (!address.startsWith("http")) {
-      address = "http://" + address;
-    }
-  } catch {}
+  let address = "http://localhost:18013";
   let headers: { [key: string]: string } = {
     "Content-Type": "application/json",
   };

diff --git a/applications/tari_dan_wallet_web_ui/tsconfig.json b/applications/tari_dan_wallet_web_ui/tsconfig.json
@@ -16,6 +16,6 @@
     "noEmit": true,
     "jsx": "react-jsx",
   },
-  "include": ["src"],
+  "include": ["src", "../../bindings/**/*"],
   "references": [{ "path": "./tsconfig.node.json" }],
 }