feat: adapt dan wallet ui to bindings

tari-project · Feb 7, 2024 · b23b0f9 · b23b0f9
1 parent 704fef0
commit b23b0f9
Show file tree

Hide file tree

Showing 38 changed files with 553 additions and 732 deletions.
diff --git a/applications/tari_dan_wallet_web_ui/package-lock.json b/applications/tari_dan_wallet_web_ui/package-lock.json
diff --git a/applications/tari_dan_wallet_web_ui/package.json b/applications/tari_dan_wallet_web_ui/package.json
@@ -22,6 +22,7 @@
     "react-dom": "^18.2.0",
     "react-icons": "^4.9.0",
     "react-router-dom": "^6.9.0",
+    "tari-bindings": "file:../../bindings",
     "use-react-router-breadcrumbs": "^4.0.1",
     "zustand": "^4.4.1",
     "zustand-persist": "^0.1.6"

diff --git a/applications/tari_dan_wallet_web_ui/src/Components/CodeBlock.tsx b/applications/tari_dan_wallet_web_ui/src/Components/CodeBlock.tsx
@@ -40,7 +40,7 @@ import { renderJson } from "../utils/helpers";
 
 interface ICodeBlockExpand {
   title: string;
-  content: string;
+  content: any;
 }
 
 const CodeBlock = styled(Box)(({ theme }) => ({

diff --git a/applications/tari_dan_wallet_web_ui/src/Components/ConnectorLink/ConnectorLink.tsx b/applications/tari_dan_wallet_web_ui/src/Components/ConnectorLink/ConnectorLink.tsx
@@ -35,10 +35,10 @@ import Permissions from "./Permissions";
 import CheckMark from "./CheckMark";
 import ConnectorLogo from "./ConnectorLogo";
 import { parse } from "../../utils/tari_permissions";
-import { webrtc } from "../../utils/json_rpc";
 import ConfirmTransaction from "./ConfirmTransaction";
 import Stepper from "../Stepper";
 import { useTheme } from "@mui/material/styles";
+import { webrtcStart } from "../../utils/json_rpc";
 
 const ConnectorDialog = () => {
   const [page, setPage] = useState(1);
@@ -105,14 +105,15 @@ const ConnectorDialog = () => {
   };
 
   const handleAuth = () => {
-    console.log("chosenOptionalPermissions", chosenOptionalPermissions);
     let allowedPermissions = [
       ...permissions,
       ...optionalPermissions.filter((value, index) => chosenOptionalPermissions[index]),
     ];
-    console.log("jwt", signalingServerJWT);
-    console.log("perm", JSON.stringify(allowedPermissions));
-    webrtc(signalingServerJWT, JSON.stringify(allowedPermissions), name).then((resp) => {
+    webrtcStart({
+      signaling_server_token: signalingServerJWT,
+      permissions: JSON.stringify(allowedPermissions),
+      name: name,
+    }).then((resp) => {
       setPage(page + 1);
     });
   };

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 "tari-bindings";
 
 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"