PN-257 Show gas estimate in confirmation window

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;

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":

src/pointsdk/index.d.ts

@@ -172,4 +172,8 @@ type Param = {
 export type DecodedTxInput = {
     name: string;
     params: Param[];
+    gas: {
+        value: string;
+        currency: string;
+    };
 };