Creating a gas usage selection modal

apps/namadillo/src/App/Common/GasFeeOption.tsx

@@ -0,0 +1,45 @@
+import BigNumber from "bignumber.js";
+import clsx from "clsx";
+import { FiatCurrency } from "./FiatCurrency";
+import { NamCurrency } from "./NamCurrency";
+
+type GasFeeOptionProps = {
+  title: string;
+  priceInNam: BigNumber;
+} & React.ComponentPropsWithoutRef<"input">;
+
+export const GasFeeOption = ({
+  title,
+  priceInNam,
+  ...props
+}: GasFeeOptionProps): JSX.Element => {
+  return (
+    <label>
+      <input
+        type="radio"
+        name="gas-fee"
+        className={clsx(
+          "absolute invisible pointer-events-none",
+          "[&:checked+span]:bg-yellow [&:checked+span]:text-black",
+          "[&:checked+span>small]:text-black"
+        )}
+        {...props}
+      />
+      <span
+        className={clsx(
+          "flex flex-col text-center py-5 leading-4 cursor-pointer",
+          "bg-neutral-800 transition-colors duration-150 ease-out-quad",
+          "select-none hover:bg-neutral-700"
+        )}
+      >
+        <strong className="font-medium">{title}</strong>
+        <small className="text-xs text-neutral-500 font-medium mb-1">
+          <FiatCurrency amountInNam={priceInNam} />
+        </small>
+        <span className="font-medium">
+          <NamCurrency forceBalanceDisplay={true} amount={priceInNam} />
+        </span>
+      </span>
+    </label>
+  );
+};

apps/namadillo/src/App/Common/GasUsageModal.tsx

@@ -0,0 +1,63 @@
+import { Modal, Stack } from "@namada/components";
+import clsx from "clsx";
+import { useAtom, useAtomValue } from "jotai";
+import { minimumGasPriceAtom } from "slices/fees";
+import { gasUsageOptionAtom } from "slices/settings";
+import { GasFeeOption } from "./GasFeeOption";
+
+type GasUsageModalProps = {
+  onClose: () => void;
+};
+
+export const GasUsageModal = ({ onClose }: GasUsageModalProps): JSX.Element => {
+  const minimumGasFee = useAtomValue(minimumGasPriceAtom);
+
+  const [gasUsageOption, setGasUsageOption] = useAtom(gasUsageOptionAtom);
+
+  if (!minimumGasFee.isSuccess) {
+    return <></>;
+  }
+
+  return (
+    <Modal onClose={onClose}>
+      <form
+        className={clsx(
+          "fixed bg-black min-w-[550px] top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2",
+          "px-6 py-7 border border-neutral-200 rounded-md"
+        )}
+      >
+        <h2 className="text-lg font-bold mb-4">Fee Options</h2>
+        <Stack gap={4}>
+          <div>
+            <ul className="grid grid-cols-3 rounded-sm overflow-hidden">
+              <li>
+                <GasFeeOption
+                  title="Low"
+                  priceInNam={minimumGasFee.data}
+                  checked={gasUsageOption === "low"}
+                  onChange={() => setGasUsageOption("low")}
+                />
+              </li>
+              <li>
+                <GasFeeOption
+                  title="Average"
+                  priceInNam={minimumGasFee.data}
+                  checked={gasUsageOption === "average"}
+                  onChange={() => setGasUsageOption("average")}
+                />
+              </li>
+              <li>
+                <GasFeeOption
+                  title="High"
+                  priceInNam={minimumGasFee.data}
+                  checked={gasUsageOption === "high"}
+                  onChange={() => setGasUsageOption("high")}
+                />
+              </li>
+            </ul>
+          </div>
+        </Stack>
+      </form>
+    </Modal>
+  );
+};

apps/namadillo/src/App/Common/TransactionFees.tsx

@@ -1,6 +1,9 @@
 import clsx from "clsx";
 import { useGasEstimate } from "hooks/useGasEstimate";
+import { useState } from "react";
+import { GasUsageModal } from "./GasUsageModal";
 import { NamCurrency } from "./NamCurrency";
+
 type TransactionFeesProps = {
   numberOfTransactions: number;
   className?: string;
@@ -10,18 +13,25 @@ export const TransactionFees = ({
   numberOfTransactions,
   className,
 }: TransactionFeesProps): JSX.Element => {
+  const [modalOpen, setModalOpen] = useState(false);
   const { calculateMinGasRequired } = useGasEstimate();
   const minimumGas = calculateMinGasRequired(numberOfTransactions);
 
   if (!minimumGas || minimumGas.eq(0)) return <></>;
   return (
-    <div className={clsx("text-white text-sm", className)}>
-      <span className="underline cursor-pointer">Transaction fee:</span>{" "}
-      <NamCurrency
-        className="font-medium"
-        amount={minimumGas}
-        forceBalanceDisplay={true}
-      />
-    </div>
+    <>
+      <div
+        className={clsx("text-white text-sm", className)}
+        onClick={() => setModalOpen(true)}
+      >
+        <span className="underline cursor-pointer">Transaction fee:</span>{" "}
+        <NamCurrency
+          className="font-medium"
+          amount={minimumGas}
+          forceBalanceDisplay={true}
+        />
+      </div>
+      {modalOpen && <GasUsageModal onClose={() => setModalOpen(false)} />}
+    </>
   );
 };

apps/namadillo/src/App/Staking/IncrementBonding.tsx

@@ -228,12 +228,12 @@ const IncrementBonding = (): JSX.Element => {
             >
               {isPerformingBond ? "Processing..." : errorMessage || "Stake"}
             </ActionButton>
-            <TransactionFees
-              className="absolute right-4 top-1/2 -translate-y-1/2"
-              numberOfTransactions={Object.keys(updatedAmountByAddress).length}
-            />
           </div>
         </form>
+        <TransactionFees
+          className="absolute right-10 bottom-8"
+          numberOfTransactions={Object.keys(updatedAmountByAddress).length}
+        />
       </ModalContainer>
     </Modal>
   );

apps/namadillo/src/slices/settings.ts

@@ -1,13 +1,15 @@
 import { CurrencyType } from "@namada/utils";
 import { Getter, Setter, atom } from "jotai";
 import { atomWithStorage } from "jotai/utils";
+import { GasRangeOption } from "types/fees";
 
 type SettingsStorage = {
   fiat: CurrencyType;
   hideBalances: boolean;
   rpcUrl: string;
   chainId: string;
   signArbitraryEnabled: boolean;
+  gasUsageOption: GasRangeOption;
 };
 
 export const namadaExtensionConnectedAtom = atom(false);
@@ -20,6 +22,7 @@ export const namadilloSettingsAtom = atomWithStorage<SettingsStorage>(
     rpcUrl: process.env.NAMADA_INTERFACE_NAMADA_URL || "",
     chainId: process.env.NAMADA_INTERFACE_NAMADA_CHAIN_ID || "",
     signArbitraryEnabled: false,
+    gasUsageOption: "average",
   }
 );
 
@@ -50,6 +53,11 @@ export const chainIdAtom = atom(
   changeSettings<string>("chainId")
 );
 
+export const gasUsageOptionAtom = atom(
+  (get) => get(namadilloSettingsAtom).gasUsageOption,
+  changeSettings<GasRangeOption>("gasUsageOption")
+);
+
 export const signArbitraryEnabledAtom = atom(
   (get) => get(namadilloSettingsAtom).signArbitraryEnabled,
   changeSettings<boolean>("signArbitraryEnabled")

apps/namadillo/src/types/fees.ts

@@ -4,3 +4,5 @@ export type GasConfig = {
   gasLimit: BigNumber;
   gasPrice: BigNumber;
 };
+
+export type GasRangeOption = "low" | "average" | "high";