From 18e75aa4d3b1211792aee1bf1b03911901484c15 Mon Sep 17 00:00:00 2001
From: Tom Robiquet <tom-robiquet@hotmail.co.uk>
Date: Wed, 4 Oct 2023 15:50:52 +0200
Subject: [PATCH 1/6] setup components for fee paying asset selection

---
 components/settings/FeePayingAssetSelect.tsx | 67 ++++++++++++++++++++
 components/settings/SettingsModal.tsx        | 30 +++++++--
 lib/state/fee-paying-asset.ts                | 19 ++++++
 3 files changed, 109 insertions(+), 7 deletions(-)
 create mode 100644 components/settings/FeePayingAssetSelect.tsx
 create mode 100644 lib/state/fee-paying-asset.ts

diff --git a/components/settings/FeePayingAssetSelect.tsx b/components/settings/FeePayingAssetSelect.tsx
new file mode 100644
index 000000000..36eb15a76
--- /dev/null
+++ b/components/settings/FeePayingAssetSelect.tsx
@@ -0,0 +1,67 @@
+import AssetSelect, { AssetOption } from "components/ui/AssetSelect";
+import {
+  FOREIGN_ASSET_METADATA,
+  findAssetImageForSymbol,
+} from "lib/constants/foreign-asset";
+import { useAllAssetMetadata } from "lib/hooks/queries/useAssetMetadata";
+import { useMemo } from "react";
+
+const isSupportedAsset = (id: number) => {
+  return Object.keys(FOREIGN_ASSET_METADATA).includes(`${id}`);
+};
+
+const FeePayingAssetSelect = () => {
+  const { data: assetMetadata, isSuccess } = useAllAssetMetadata();
+
+  const options = useMemo<AssetOption[]>(() => {
+    if (!isSuccess) {
+      return [];
+    }
+    let options: AssetOption[] = [];
+    for (const [id, meta] of assetMetadata) {
+      if (id === "Ztg") {
+        options = [
+          ...options,
+          {
+            label: meta.symbol,
+            value: { Ztg: null },
+            image: findAssetImageForSymbol(),
+          },
+        ];
+      } else {
+        if (!isSupportedAsset(id)) {
+          continue;
+        }
+        options = [
+          ...options,
+          {
+            label: meta.symbol,
+            value: { ForeignAsset: id },
+            image: findAssetImageForSymbol(meta.symbol),
+          },
+        ];
+      }
+    }
+    return options;
+  }, [assetMetadata, isSuccess]);
+
+  return (
+    <div>
+      <label className="font-bold mb-2">Select asset to pay network fees</label>
+      <div
+        className={
+          "mb-5 h-14 w-full bg-anti-flash-white rounded-md relative border-1 border-transparent "
+        }
+      >
+        <AssetSelect
+          options={options}
+          selectedOption={options[0]}
+          onChange={(option) => {
+            //   onAssetChange?.(option);
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+export default FeePayingAssetSelect;
diff --git a/components/settings/SettingsModal.tsx b/components/settings/SettingsModal.tsx
index 1acf202f5..cc268d0c2 100644
--- a/components/settings/SettingsModal.tsx
+++ b/components/settings/SettingsModal.tsx
@@ -1,11 +1,11 @@
-import React, { Fragment, useState } from "react";
 import { Dialog, Tab } from "@headlessui/react";
 import Modal from "components/ui/Modal";
-import AcccountSettingsForm from "./AccountSettingsForm";
-import OtherSettingsForm from "./OtherSettingsForm";
 import { useIdentity } from "lib/hooks/queries/useIdentity";
 import { useWallet } from "lib/state/wallet";
-import { AddressOption } from "components/ui/AddressInput";
+import React, { Fragment } from "react";
+import AcccountSettingsForm from "./AccountSettingsForm";
+import FeePayingAssetSelect from "./FeePayingAssetSelect";
+import OtherSettingsForm from "./OtherSettingsForm";
 
 export type SettingsModalProps = {
   open: boolean;
@@ -14,7 +14,8 @@ export type SettingsModalProps = {
 
 enum TabSelection {
   Account,
-  Other,
+  Proxy,
+  Fees,
 }
 
 const SettingsModal: React.FC<SettingsModalProps> = ({ open, onClose }) => {
@@ -58,7 +59,21 @@ const SettingsModal: React.FC<SettingsModalProps> = ({ open, onClose }) => {
                         (selected ? "font-semibold text-black" : "")
                       }
                     >
-                      Other Settings
+                      Proxy
+                    </span>
+                  )}
+                </Tab>
+              </div>
+              <div className="flex-grow center">
+                <Tab as={Fragment}>
+                  {({ selected }) => (
+                    <span
+                      className={
+                        "cursor-pointer text-sm " +
+                        (selected ? "font-semibold text-black" : "")
+                      }
+                    >
+                      Fee Paying Asset
                     </span>
                   )}
                 </Tab>
@@ -73,7 +88,8 @@ const SettingsModal: React.FC<SettingsModalProps> = ({ open, onClose }) => {
             ) : (
               <></>
             ),
-            [TabSelection.Other]: <OtherSettingsForm />,
+            [TabSelection.Proxy]: <OtherSettingsForm />,
+            [TabSelection.Fees]: <FeePayingAssetSelect />,
           }[tabSelection]
         }
       </Dialog.Panel>
diff --git a/lib/state/fee-paying-asset.ts b/lib/state/fee-paying-asset.ts
new file mode 100644
index 000000000..4504bee3e
--- /dev/null
+++ b/lib/state/fee-paying-asset.ts
@@ -0,0 +1,19 @@
+import { useAtom } from "jotai";
+import { persistentAtom } from "./util/persistent-atom";
+
+const feePayingAssetStateAtom = persistentAtom<any>({
+  key: "fee-paying-asset",
+  defaultValue: "",
+});
+
+const useFeePayingAssetSelection = () => {
+  const [state, setState] = useAtom(feePayingAssetStateAtom);
+
+  const setAsset = (selection: any) => {
+    setState(selection);
+  };
+
+  return { assetSelection: state, setAsset };
+};
+
+export default useFeePayingAssetSelection;

From b394cc28e5e51449aa4f622b23739f304171dce3 Mon Sep 17 00:00:00 2001
From: Tom Robiquet <tom-robiquet@hotmail.co.uk>
Date: Fri, 6 Oct 2023 12:42:39 +0200
Subject: [PATCH 2/6] saved selected asset

---
 components/settings/FeePayingAssetSelect.tsx | 35 ++++++++++---
 components/ui/AssetSelect.tsx                | 52 ++++++++++++--------
 2 files changed, 61 insertions(+), 26 deletions(-)

diff --git a/components/settings/FeePayingAssetSelect.tsx b/components/settings/FeePayingAssetSelect.tsx
index 36eb15a76..edadf8a80 100644
--- a/components/settings/FeePayingAssetSelect.tsx
+++ b/components/settings/FeePayingAssetSelect.tsx
@@ -4,14 +4,23 @@ import {
   findAssetImageForSymbol,
 } from "lib/constants/foreign-asset";
 import { useAllAssetMetadata } from "lib/hooks/queries/useAssetMetadata";
-import { useMemo } from "react";
+import useFeePayingAssetSelection from "lib/state/fee-paying-asset";
+import { useMemo, useState } from "react";
+import { Check } from "react-feather";
 
 const isSupportedAsset = (id: number) => {
   return Object.keys(FOREIGN_ASSET_METADATA).includes(`${id}`);
 };
 
+const defaultSelection = {
+  label: "Default",
+  additionalText: "Uses first available asset",
+};
+
 const FeePayingAssetSelect = () => {
   const { data: assetMetadata, isSuccess } = useAllAssetMetadata();
+  const { assetSelection, setAsset } = useFeePayingAssetSelection();
+  const [showSaved, setShowSaved] = useState(false);
 
   const options = useMemo<AssetOption[]>(() => {
     if (!isSuccess) {
@@ -42,22 +51,36 @@ const FeePayingAssetSelect = () => {
         ];
       }
     }
+
+    options.push(defaultSelection);
     return options;
   }, [assetMetadata, isSuccess]);
 
   return (
-    <div>
-      <label className="font-bold mb-2">Select asset to pay network fees</label>
+    <div className="flex flex-col gap-y-3">
+      <div className="flex item-center">
+        <label className="font-bold">Select asset to pay network fees</label>
+        {showSaved && (
+          <div className="flex gap-2 items-center ml-auto">
+            <Check size={18} className="text-green-500" />
+            <div>Saved</div>
+          </div>
+        )}
+      </div>
       <div
         className={
-          "mb-5 h-14 w-full bg-anti-flash-white rounded-md relative border-1 border-transparent "
+          "h-14 w-full bg-anti-flash-white rounded-md relative border-1 border-transparent "
         }
       >
         <AssetSelect
           options={options}
-          selectedOption={options[0]}
+          selectedOption={assetSelection ?? defaultSelection}
           onChange={(option) => {
-            //   onAssetChange?.(option);
+            setAsset(option);
+            setShowSaved(true);
+            setTimeout(() => {
+              setShowSaved(false);
+            }, 3000);
           }}
         />
       </div>
diff --git a/components/ui/AssetSelect.tsx b/components/ui/AssetSelect.tsx
index 7f6fa45b9..f8fb68e3f 100644
--- a/components/ui/AssetSelect.tsx
+++ b/components/ui/AssetSelect.tsx
@@ -17,8 +17,9 @@ import Select, {
 
 export type AssetOption = {
   label: string;
-  value: AssetId;
-  image: string;
+  value?: AssetId;
+  image?: string;
+  additionalText?: string;
 };
 
 const Control = ({ children, ...rest }: ControlProps<AssetOption, false>) => {
@@ -52,21 +53,25 @@ const SingleValue = (props: SingleValueProps<AssetOption, false>) => {
   const { label, image } = props.data;
   return (
     <div className="flex items-center font-semibold">
-      <Image
-        src={image}
-        width={36}
-        height={36}
-        className="mr-3"
-        alt={label}
-        quality={100}
-      />
+      {image ? (
+        <Image
+          src={image}
+          width={36}
+          height={36}
+          className="mr-3"
+          alt={label}
+          quality={100}
+        />
+      ) : (
+        <div className="w-[36px] h-[36px] rounded-full bg-ztg-blue mr-3"></div>
+      )}
       <span>{label}</span>
     </div>
   );
 };
 
 const Option = (props: OptionProps<AssetOption, false>) => {
-  const { label, value, image } = props.data;
+  const { label, value, image, additionalText } = props.data;
   const wallet = useWallet();
   const address = wallet.activeAccount?.address;
 
@@ -77,20 +82,27 @@ const Option = (props: OptionProps<AssetOption, false>) => {
       {...props}
       className="!flex items-center w-full bg-anti-flash-white rounded-md h-14 mb-2 last:mb-0 font-semibold px-4 !cursor-pointer"
     >
-      <Image
-        src={image}
-        width={36}
-        height={36}
-        className="mr-3"
-        alt={label}
-        quality={100}
-      />
+      {image ? (
+        <Image
+          src={image}
+          width={36}
+          height={36}
+          className="mr-3"
+          alt={label}
+          quality={100}
+        />
+      ) : (
+        <div className="w-[36px] h-[36px] rounded-full bg-ztg-blue mr-3"></div>
+      )}
       <span>{label}</span>
       {balance && (
         <div className="ml-auto text-xs">
           Balance: {formatNumberLocalized(balance.div(ZTG).toNumber())}
         </div>
       )}
+      {additionalText && (
+        <div className="ml-auto text-xs">{additionalText}</div>
+      )}
     </components.Option>
   );
 };
@@ -119,7 +131,7 @@ const AssetSelect: React.FC<AssetSelectProps> = ({
 }) => {
   return (
     <Select
-      className="w-34 h-full !static"
+      className="h-full !static pr-4"
       isSearchable={false}
       options={options}
       unstyled={true}

From 3cdcb11aa872d0c3833f7df5382c261e56818fc3 Mon Sep 17 00:00:00 2001
From: Tom Robiquet <tom-robiquet@hotmail.co.uk>
Date: Fri, 6 Oct 2023 12:59:51 +0200
Subject: [PATCH 3/6] handle fee calculations

---
 components/settings/FeePayingAssetSelect.tsx | 10 ++-
 lib/hooks/queries/useFeePayingAsset.ts       | 80 +++++++++++++-------
 lib/state/fee-paying-asset.ts                |  9 ++-
 3 files changed, 65 insertions(+), 34 deletions(-)

diff --git a/components/settings/FeePayingAssetSelect.tsx b/components/settings/FeePayingAssetSelect.tsx
index edadf8a80..7da07f697 100644
--- a/components/settings/FeePayingAssetSelect.tsx
+++ b/components/settings/FeePayingAssetSelect.tsx
@@ -62,8 +62,8 @@ const FeePayingAssetSelect = () => {
         <label className="font-bold">Select asset to pay network fees</label>
         {showSaved && (
           <div className="flex gap-2 items-center ml-auto">
-            <Check size={18} className="text-green-500" />
-            <div>Saved</div>
+            <Check size={16} className="text-green-500" />
+            <div className="text-sm">Saved</div>
           </div>
         )}
       </div>
@@ -74,13 +74,15 @@ const FeePayingAssetSelect = () => {
       >
         <AssetSelect
           options={options}
-          selectedOption={assetSelection ?? defaultSelection}
+          selectedOption={
+            assetSelection === "Default" ? defaultSelection : assetSelection
+          }
           onChange={(option) => {
             setAsset(option);
             setShowSaved(true);
             setTimeout(() => {
               setShowSaved(false);
-            }, 3000);
+            }, 1000);
           }}
         />
       </div>
diff --git a/lib/hooks/queries/useFeePayingAsset.ts b/lib/hooks/queries/useFeePayingAsset.ts
index 394ccd7c0..3876eaa13 100644
--- a/lib/hooks/queries/useFeePayingAsset.ts
+++ b/lib/hooks/queries/useFeePayingAsset.ts
@@ -1,11 +1,12 @@
 import { UseQueryResult, useQuery } from "@tanstack/react-query";
-import { AssetId, ZTG } from "@zeitgeistpm/sdk-next";
+import { AssetId, IOZtgAssetId, ZTG } from "@zeitgeistpm/sdk-next";
 import Decimal from "decimal.js";
 import { useWallet } from "lib/state/wallet";
 import { useAssetMetadata } from "./useAssetMetadata";
 import { useBalance } from "./useBalance";
 import { useChainConstants } from "./useChainConstants";
 import { useZtgBalance } from "./useZtgBalance";
+import useFeePayingAssetSelection from "lib/state/fee-paying-asset";
 
 type FeeAsset = {
   assetId: AssetId;
@@ -30,6 +31,8 @@ export const useFeePayingAsset = (
   const { data: dotBalance } = useBalance(activeAccount?.address, {
     ForeignAsset: 0,
   });
+  const { assetSelection } = useFeePayingAssetSelection();
+  console.log(assetSelection);
 
   const enabled =
     !!nativeBalance &&
@@ -49,35 +52,58 @@ export const useFeePayingAsset = (
     ],
     async () => {
       if (enabled) {
-        // if user has ztg, use that to pay
-        if (nativeBalance.greaterThanOrEqualTo(baseFee)) {
-          return {
-            assetId: { Ztg: null },
-            symbol: constants?.tokenSymbol ?? "",
-            amount: baseFee,
-            sufficientBalance: true,
-          };
-        }
+        if (assetSelection === "Default") {
+          // if user has ztg, use that to pay
+          if (nativeBalance.greaterThanOrEqualTo(baseFee)) {
+            return {
+              assetId: { Ztg: null },
+              symbol: constants?.tokenSymbol ?? "",
+              amount: baseFee,
+              sufficientBalance: true,
+            };
+          }
 
-        const dotFeeFactor = dotMetadata.feeFactor.div(ZTG);
-        const dotFee = baseFee.mul(dotFeeFactor).mul(foreignAssetFeeBuffer);
+          const dotFeeFactor = dotMetadata.feeFactor.div(ZTG);
+          const dotFee = baseFee.mul(dotFeeFactor).mul(foreignAssetFeeBuffer);
 
-        if (dotBalance.greaterThan(dotFee)) {
-          return {
-            assetId: {
-              ForeignAsset: 0,
-            },
-            symbol: dotMetadata.symbol,
-            amount: dotFee,
-            sufficientBalance: true,
-          };
+          if (dotBalance.greaterThan(dotFee)) {
+            return {
+              assetId: {
+                ForeignAsset: 0,
+              },
+              symbol: dotMetadata.symbol,
+              amount: dotFee,
+              sufficientBalance: true,
+            };
+          } else {
+            return {
+              assetId: { Ztg: null },
+              symbol: constants?.tokenSymbol ?? "",
+              amount: baseFee,
+              sufficientBalance: false,
+            };
+          }
         } else {
-          return {
-            assetId: { Ztg: null },
-            symbol: constants?.tokenSymbol ?? "",
-            amount: baseFee,
-            sufficientBalance: false,
-          };
+          const isNative = IOZtgAssetId.is(assetSelection.value);
+          if (isNative) {
+            return {
+              assetId: { Ztg: null },
+              symbol: constants?.tokenSymbol ?? "",
+              amount: baseFee,
+              sufficientBalance: true,
+            };
+          } else {
+            const dotFeeFactor = dotMetadata.feeFactor.div(ZTG);
+            const dotFee = baseFee.mul(dotFeeFactor).mul(foreignAssetFeeBuffer);
+            return {
+              assetId: {
+                ForeignAsset: 0,
+              },
+              symbol: dotMetadata.symbol,
+              amount: dotFee,
+              sufficientBalance: dotBalance.greaterThan(dotFee),
+            };
+          }
         }
       }
       return null;
diff --git a/lib/state/fee-paying-asset.ts b/lib/state/fee-paying-asset.ts
index 4504bee3e..a707fa51e 100644
--- a/lib/state/fee-paying-asset.ts
+++ b/lib/state/fee-paying-asset.ts
@@ -1,15 +1,18 @@
 import { useAtom } from "jotai";
 import { persistentAtom } from "./util/persistent-atom";
+import { AssetOption } from "components/ui/AssetSelect";
 
-const feePayingAssetStateAtom = persistentAtom<any>({
+type SelectedFeeAsset = "Default" | AssetOption;
+
+const feePayingAssetStateAtom = persistentAtom<SelectedFeeAsset>({
   key: "fee-paying-asset",
-  defaultValue: "",
+  defaultValue: "Default",
 });
 
 const useFeePayingAssetSelection = () => {
   const [state, setState] = useAtom(feePayingAssetStateAtom);
 
-  const setAsset = (selection: any) => {
+  const setAsset = (selection: SelectedFeeAsset) => {
     setState(selection);
   };
 

From c7d5f0f127ba89dad4eb8fd9c116284b2c66952b Mon Sep 17 00:00:00 2001
From: Tom Robiquet <tom-robiquet@hotmail.co.uk>
Date: Fri, 6 Oct 2023 13:14:42 +0200
Subject: [PATCH 4/6] storage needs to be an object

---
 components/settings/FeePayingAssetSelect.tsx | 4 +---
 lib/hooks/queries/useFeePayingAsset.ts       | 4 ++--
 lib/state/fee-paying-asset.ts                | 7 +++++--
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/components/settings/FeePayingAssetSelect.tsx b/components/settings/FeePayingAssetSelect.tsx
index 7da07f697..2e05510b2 100644
--- a/components/settings/FeePayingAssetSelect.tsx
+++ b/components/settings/FeePayingAssetSelect.tsx
@@ -74,9 +74,7 @@ const FeePayingAssetSelect = () => {
       >
         <AssetSelect
           options={options}
-          selectedOption={
-            assetSelection === "Default" ? defaultSelection : assetSelection
-          }
+          selectedOption={assetSelection}
           onChange={(option) => {
             setAsset(option);
             setShowSaved(true);
diff --git a/lib/hooks/queries/useFeePayingAsset.ts b/lib/hooks/queries/useFeePayingAsset.ts
index 3876eaa13..1382408f7 100644
--- a/lib/hooks/queries/useFeePayingAsset.ts
+++ b/lib/hooks/queries/useFeePayingAsset.ts
@@ -32,7 +32,6 @@ export const useFeePayingAsset = (
     ForeignAsset: 0,
   });
   const { assetSelection } = useFeePayingAssetSelection();
-  console.log(assetSelection);
 
   const enabled =
     !!nativeBalance &&
@@ -49,10 +48,11 @@ export const useFeePayingAsset = (
       nativeBalance,
       dotBalance,
       baseFee,
+      assetSelection,
     ],
     async () => {
       if (enabled) {
-        if (assetSelection === "Default") {
+        if (assetSelection.label === "Default") {
           // if user has ztg, use that to pay
           if (nativeBalance.greaterThanOrEqualTo(baseFee)) {
             return {
diff --git a/lib/state/fee-paying-asset.ts b/lib/state/fee-paying-asset.ts
index a707fa51e..f29b6598c 100644
--- a/lib/state/fee-paying-asset.ts
+++ b/lib/state/fee-paying-asset.ts
@@ -2,11 +2,14 @@ import { useAtom } from "jotai";
 import { persistentAtom } from "./util/persistent-atom";
 import { AssetOption } from "components/ui/AssetSelect";
 
-type SelectedFeeAsset = "Default" | AssetOption;
+type SelectedFeeAsset = AssetOption;
 
 const feePayingAssetStateAtom = persistentAtom<SelectedFeeAsset>({
   key: "fee-paying-asset",
-  defaultValue: "Default",
+  defaultValue: {
+    label: "Default",
+    additionalText: "Uses first available asset",
+  },
 });
 
 const useFeePayingAssetSelection = () => {

From 69f5484a2c73e1942fcf0a4ab30a63958bd9dba2 Mon Sep 17 00:00:00 2001
From: Tom Robiquet <tom-robiquet@hotmail.co.uk>
Date: Fri, 6 Oct 2023 13:21:41 +0200
Subject: [PATCH 5/6] proxy info box

---
 components/settings/OtherSettingsForm.tsx | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/components/settings/OtherSettingsForm.tsx b/components/settings/OtherSettingsForm.tsx
index ec318b111..d3996688d 100644
--- a/components/settings/OtherSettingsForm.tsx
+++ b/components/settings/OtherSettingsForm.tsx
@@ -6,6 +6,8 @@ import { isRpcSdk } from "@zeitgeistpm/sdk-next";
 import { useSdkv2 } from "lib/hooks/useSdkv2";
 import { useWallet } from "lib/state/wallet";
 import { isValidPolkadotAddress } from "lib/util";
+import InfoPopover from "components/ui/InfoPopover";
+import { AiOutlineInfoCircle } from "react-icons/ai";
 
 export type OtherSettingsFormProps = {};
 
@@ -57,7 +59,24 @@ const OtherSettingsForm: React.FC<OtherSettingsFormProps> = ({}) => {
         reset(data);
       })}
     >
-      <label className="font-bold mb-2">Proxy Account</label>
+      <div className="flex items-center mb-2 gap-3">
+        <label className="font-bold ">Proxy Account</label>
+        <InfoPopover
+          title={
+            <h3 className="flex justify-center items-center mb-4 gap-2">
+              <AiOutlineInfoCircle />
+              Proxy Accounts
+            </h3>
+          }
+        >
+          <p>
+            Proxy accounts can be used to allow wallets to sign transactions on
+            behalf of others. This section allows you to tell this application
+            to attempt to sign transactions using the connected wallet on behalf
+            of another account.
+          </p>
+        </InfoPopover>
+      </div>
       <div className="flex flex-row p-2 mb-2">
         <input
           type="checkbox"

From c2c734a574d7c6fb01132e12a062a0053b48d45d Mon Sep 17 00:00:00 2001
From: Tom Robiquet <tom-robiquet@hotmail.co.uk>
Date: Fri, 6 Oct 2023 13:26:15 +0200
Subject: [PATCH 6/6] keep current behaviour

---
 components/settings/FeePayingAssetSelect.tsx | 1 +
 components/ui/AssetSelect.tsx                | 4 +++-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/components/settings/FeePayingAssetSelect.tsx b/components/settings/FeePayingAssetSelect.tsx
index 2e05510b2..2ac5ff3e1 100644
--- a/components/settings/FeePayingAssetSelect.tsx
+++ b/components/settings/FeePayingAssetSelect.tsx
@@ -75,6 +75,7 @@ const FeePayingAssetSelect = () => {
         <AssetSelect
           options={options}
           selectedOption={assetSelection}
+          showArrowRight={true}
           onChange={(option) => {
             setAsset(option);
             setShowSaved(true);
diff --git a/components/ui/AssetSelect.tsx b/components/ui/AssetSelect.tsx
index f8fb68e3f..c73f84df0 100644
--- a/components/ui/AssetSelect.tsx
+++ b/components/ui/AssetSelect.tsx
@@ -122,16 +122,18 @@ export type AssetSelectProps = {
   options: AssetOption[];
   selectedOption?: AssetOption;
   onChange: (value: AssetOption) => void;
+  showArrowRight?: boolean;
 };
 
 const AssetSelect: React.FC<AssetSelectProps> = ({
   options,
   selectedOption,
   onChange,
+  showArrowRight = false,
 }) => {
   return (
     <Select
-      className="h-full !static pr-4"
+      className={`h-full !static  ${showArrowRight ? "pr-4" : "w-34"}`}
       isSearchable={false}
       options={options}
       unstyled={true}