Adds token approval, debounces quote calls, fixes other bugs

apps/flame-defi/app/components/ConfirmationModal/ConfirmationModal.tsx

@@ -27,15 +27,15 @@ interface ConfirmationModalProps {
 
 export default function ConfirmationModal({
   onSubmitCallback,
-  setTxnStatus,
-  txnStatus,
-  handleResetInputs,
   buttonText,
   children,
-  title,
-  actionButtonText,
+  handleResetInputs,
   isCloseModalAction,
+  setTxnStatus,
   skipIdleTxnStatus,
+  title,
+  txnStatus,
+  actionButtonText,
 }: ConfirmationModalProps): React.ReactElement {
   const [open, setOpen] = useState(false);
 

apps/flame-defi/app/config/hooks/useConfig.ts

@@ -4,6 +4,7 @@ import { useContext } from "react";
 
 import { ConfigContext } from "../contexts/ConfigContext";
 import { EvmChainInfo } from "@repo/flame-types";
+import { Chain } from "viem";
 
 /**
  * Hook to use the config context.
@@ -21,5 +22,20 @@ export const useEvmChainData = () => {
   const evmChainsData = Object.values(evmChains);
   const selectedChain = evmChainsData[0] as EvmChainInfo;
 
-  return { selectedChain };
+  const evmChainConfig: Chain = {
+    id: selectedChain?.chainId,
+    name: selectedChain?.chainName,
+    nativeCurrency: {
+      name: selectedChain?.currencies[0]?.title,
+      symbol: selectedChain?.currencies[0]?.coinDenom,
+      decimals: selectedChain?.currencies[0]?.coinDecimals || 18,
+    },
+    rpcUrls: {
+      default: {
+        http: selectedChain?.rpcUrls,
+      },
+    },
+  };
+
+  return { selectedChain, evmChainConfig };
 };

apps/flame-defi/app/constants.ts

@@ -15,6 +15,11 @@ export enum TXN_STATUS {
   FAILED = "failed",
 }
 
+export const flameExplorerUrl = "https://explorer.flame.astria.org";
+
+export const defaultApprovalAmount =
+  "115792089237316195423570985008687907853269984665640564039457";
+
 export const defaultSlippageTolerance = 0.1;
 
 export const feeData = [

apps/flame-defi/app/features/EvmWallet/components/ConnectEvmWalletButton/ConnectEvmWalletButton.tsx

@@ -12,6 +12,7 @@ import {
   AccordionItem,
   AccordionTrigger,
 } from "@repo/ui/shadcn-primitives";
+import { flameExplorerUrl } from "../../../../constants";
 
 interface ConnectEvmWalletButtonProps {
   // Label to show before the user is connected to a wallet.
@@ -61,10 +62,16 @@ export default function ConnectEvmWalletButton({
           </AccordionTrigger>
           <div className="flex items-center gap-3">
             <CopyToClipboardButton textToCopy={userAccount.address} />
-            <UpRightSquareIcon
-              className="cursor-pointer hover:text-white transition"
-              size={21}
-            />
+            <a
+              href={`${flameExplorerUrl}/address/${userAccount.address}`}
+              target="_blank"
+              rel="noreferrer"
+            >
+              <UpRightSquareIcon
+                className="cursor-pointer hover:text-white transition"
+                size={21}
+              />
+            </a>
             <button type="button" onClick={() => disconnectEvmWallet()}>
               <PowerIcon
                 className="cursor-pointer hover:text-white transition"

apps/flame-defi/app/features/EvmWallet/components/SingleWalletConnect/SingleWalletConnect.tsx

@@ -9,6 +9,7 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@repo/ui/shadcn-primitives";
+import { flameExplorerUrl } from "../../../../constants";
 
 export function SingleWalletContent({
   address,
@@ -32,7 +33,7 @@ export function SingleWalletContent({
   };
 
   return (
-    <div className="">
+    <div>
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-2">
           <FlameIcon />
@@ -43,10 +44,16 @@ export function SingleWalletContent({
         </div>
         <div className="flex items-center gap-3 text-grey-light">
           <CopyToClipboardButton textToCopy={address} />
-          <UpRightSquareIcon
-            className="cursor-pointer hover:text-white transition"
-            size={21}
-          />
+          <a
+            href={`${flameExplorerUrl}/address/${address}`}
+            target="_blank"
+            rel="noreferrer"
+          >
+            <UpRightSquareIcon
+              className="cursor-pointer hover:text-white transition"
+              size={21}
+            />
+          </a>
           <button type="button" onClick={() => handleDisconnect()}>
             <PowerIcon
               className="cursor-pointer hover:text-white transition"
@@ -109,7 +116,7 @@ export default function SingleWalletConnect() {
       </PopoverTrigger>
       <PopoverContent
         side="bottom"
-        className="flex flex-col mr-12 gap-3 p-5 bg-radial-dark"
+        className="flex flex-col mr-12 gap-3 p-5 bg-radial-dark w-full md:w-[300px]"
       >
         <SingleWalletContent address={userAccount.address} />
       </PopoverContent>