Adds token approval, debounces quote calls, fixes other bugs

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

@@ -10,7 +10,7 @@ import {
 import { useEffect, useState } from "react";
 import { CloseIcon } from "@repo/ui/icons";
 import { ActionButton } from "@repo/ui/components";
-import { TXN_STATUS } from "../../constants";
+import { TXN_STATUS } from "@repo/flame-types";
 
 interface ConfirmationModalProps {
   onSubmitCallback: () => void;
@@ -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/components/SettingsPopover/SettingsPopover.tsx

@@ -18,13 +18,14 @@ import { GearIcon } from "@repo/ui/icons";
 import { InfoTooltip } from "@repo/ui/components";
 import { useState } from "react";
 import { getFromLocalStorage, setInLocalStorage } from "utils/utils";
-import { defaultSlippageTolerance } from "../../constants";
+import { useConfig } from "config";
 
 export const SettingsPopover = () => {
+  const { SwapDefaultSlippageTolerance } = useConfig();
   const currentSettings = getFromLocalStorage("settings") || {};
   const [customSlippage, setCustomSlippage] = useState<string>(
     currentSettings?.slippageTolerance?.toString() ||
-      defaultSlippageTolerance.toString(),
+      SwapDefaultSlippageTolerance.toString(),
   );
   const [expertMode, setExpertMode] = useState(
     currentSettings?.expertMode || false,

apps/flame-defi/app/config/contexts/ConfigContext.tsx

@@ -25,6 +25,42 @@ export const ConfigContextProvider: React.FC<ConfigContextProps> = ({
   const poolURL = getEnvVariable("NEXT_PUBLIC_POOL_URL");
   const earnAPIURL = getEnvVariable("NEXT_PUBLIC_EARN_API_URL");
 
+  const TokenDefaultApprovalAmount =
+    "115792089237316195423570985008687907853269984665640564039457";
+
+  const SwapDefaultSlippageTolerance = 0.1;
+
+  const feeData = [
+    {
+      id: 0,
+      feePercent: "0.3%",
+      text: "Best for most pairs.",
+      tvl: "100M",
+      selectPercent: "0.3%",
+    },
+    {
+      id: 1,
+      feePercent: "0.5%",
+      text: "Best for stable pairs.",
+      tvl: "100M",
+      selectPercent: "0.5%",
+    },
+    {
+      id: 2,
+      feePercent: "1%",
+      text: "Best for high-volatility pairs.",
+      tvl: "100M",
+      selectPercent: "1%",
+    },
+    {
+      id: 3,
+      feePercent: "1%",
+      text: "Best for high-volatility pairs.",
+      tvl: "100M",
+      selectPercent: "1%",
+    },
+  ];
+
   let feedbackFormURL: string | null;
   try {
     feedbackFormURL = getEnvVariable("NEXT_PUBLIC_FEEDBACK_FORM_URL");
@@ -68,6 +104,9 @@ export const ConfigContextProvider: React.FC<ConfigContextProps> = ({
         earnAPIURL,
         feedbackFormURL,
         networksList,
+        TokenDefaultApprovalAmount,
+        SwapDefaultSlippageTolerance,
+        feeData,
       }}
     >
       {children}

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

@@ -1,7 +1,6 @@
 "use client";
 
 import { useContext } from "react";
-
 import { ConfigContext } from "../contexts/ConfigContext";
 import { EvmChainInfo } from "@repo/flame-types";
 

apps/flame-defi/app/config/index.ts

@@ -34,6 +34,18 @@ export interface AppConfig {
   feedbackFormURL: string | null;
   // List of networks to display in the network selector.
   networksList: FlameNetwork[];
+  // The default approval amount for tokens.
+  TokenDefaultApprovalAmount: string;
+  // The default slippage tolerance for swaps.
+  SwapDefaultSlippageTolerance: number;
+  // The data for the fee options.
+  feeData: {
+    id: number;
+    feePercent: string;
+    text: string;
+    tvl: string;
+    selectPercent: string;
+  }[];
 }
 
 export {

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

@@ -12,6 +12,7 @@ import {
   AccordionItem,
   AccordionTrigger,
 } from "@repo/ui/shadcn-primitives";
+import { useEvmChainData } from "config";
 
 interface ConnectEvmWalletButtonProps {
   // Label to show before the user is connected to a wallet.
@@ -24,6 +25,7 @@ interface ConnectEvmWalletButtonProps {
 export default function ConnectEvmWalletButton({
   labelBeforeConnected,
 }: ConnectEvmWalletButtonProps) {
+  const { selectedChain } = useEvmChainData();
   const {
     connectEvmWallet,
     disconnectEvmWallet,
@@ -61,10 +63,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={`${selectedChain.blockExplorerUrl}/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,7 +9,7 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@repo/ui/shadcn-primitives";
-
+import { useEvmChainData } from "config";
 export function SingleWalletContent({
   address,
   handleClose,
@@ -18,6 +18,7 @@ export function SingleWalletContent({
   handleClose?: () => void;
 }) {
   //   const [showTransactions, setShowTransactions] = useState(false);
+  const { selectedChain } = useEvmChainData();
   const {
     disconnectEvmWallet,
     evmNativeTokenBalance,
@@ -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={`${selectedChain.blockExplorerUrl}/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>