From 8e5c8d829bcc6dfbe3599f37135c17a384daab8a Mon Sep 17 00:00:00 2001
From: German Viescas <german@pointlabs.org>
Date: Wed, 12 Oct 2022 17:09:13 -0300
Subject: [PATCH] Show gas estimate in confirmation window

---
 .../components/GasEstimate.tsx                | 29 +++++++++++++++++++
 .../components/TxDetails.tsx                  |  4 +++
 src/pointsdk/index.d.ts                       |  4 +++
 3 files changed, 37 insertions(+)
 create mode 100644 src/confirmation-window/components/GasEstimate.tsx

diff --git a/src/confirmation-window/components/GasEstimate.tsx b/src/confirmation-window/components/GasEstimate.tsx
new file mode 100644
index 0000000..884d2ac
--- /dev/null
+++ b/src/confirmation-window/components/GasEstimate.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+import { formatEther } from "@ethersproject/units";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import useTheme from "@mui/material/styles/useTheme";
+import { DecodedTxInput } from "../../pointsdk/index.d";
+import Label from "./Label";
+
+type Props = Pick<DecodedTxInput, "gas">;
+
+const GasEstimate = ({ gas }: Props) => {
+    const theme = useTheme();
+
+    const parsedAmount =
+        gas.currency.toUpperCase() === "POINT"
+            ? formatEther(gas.value)
+            : gas.value;
+
+    return (
+        <Box mb={2}>
+            <Label>Gas (estimate)</Label>
+            <Typography fontWeight={600} color={theme.palette.primary.main}>
+                {parsedAmount}&nbsp;{gas.currency.toUpperCase()}
+            </Typography>
+        </Box>
+    );
+};
+
+export default GasEstimate;
diff --git a/src/confirmation-window/components/TxDetails.tsx b/src/confirmation-window/components/TxDetails.tsx
index ebec1ef..ad201f2 100644
--- a/src/confirmation-window/components/TxDetails.tsx
+++ b/src/confirmation-window/components/TxDetails.tsx
@@ -7,6 +7,7 @@ import Address from "./Address";
 import Price from "./Price";
 import RawData from "./RawData";
 import DecodedData from "./DecodedData";
+import GasEstimate from "./GasEstimate";
 
 const TxDetails = () => {
     const { search } = useLocation();
@@ -50,6 +51,9 @@ const TxDetails = () => {
 
     return (
         <>
+            {decodedTxData?.gas?.value && decodedTxData?.gas?.currency ? (
+                <GasEstimate gas={decodedTxData.gas} />
+            ) : null}
             {Object.entries(rawParams).map(([key, value], idx) => {
                 switch (key) {
                     case "from":
diff --git a/src/pointsdk/index.d.ts b/src/pointsdk/index.d.ts
index f9e90bf..b5d38c5 100644
--- a/src/pointsdk/index.d.ts
+++ b/src/pointsdk/index.d.ts
@@ -172,4 +172,8 @@ type Param = {
 export type DecodedTxInput = {
     name: string;
     params: Param[];
+    gas: {
+        value: string;
+        currency: string;
+    };
 };