disable logout for keypom wallet

burrowHQ · Feb 24, 2024 · f7ed1ca · f7ed1ca
1 parent f2578d1
commit f7ed1ca
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 23 deletions.
diff --git a/components/CustomButton/CustomButton.tsx b/components/CustomButton/CustomButton.tsx
@@ -116,6 +116,10 @@ const StyledButton = styled.button`
 
 const btnColor = {
   primary: "border-primary bg-primary hover:opacity-80 text-black",
+  primaryBorder:
+    "border-primary border border-opacity-60 text-primary bg-primary hover:opacity-80 bg-opacity-5",
+  errorBorder:
+    "border border-red-50 border-opacity-60 text-red-50 bg-red-50 bg-opacity-5 hover:opacity-80",
   secondary: "border border-gray-500 hover:border-gray-400 text-gray-300",
   secondary2: "border border-pink-400 hover:border-pink-400 text-pink-400",
   third: "rounded-full border border-1 border-black text-black font-bold",

diff --git a/components/Header/WalletButton.tsx b/components/Header/WalletButton.tsx
@@ -35,6 +35,7 @@ import { formatWithCommas_usd } from "../../utils/uiNumber";
 import { isMobileDevice } from "../../helpers/helpers";
 import getConfig from "../../utils/config";
 import CopyToClipboardComponent from "./CopyToClipboardComponent";
+import CustomButton from "../CustomButton/CustomButton";
 
 const config = getConfig();
 
@@ -54,8 +55,9 @@ const WalletButton = () => {
 
   const selectorRef = useRef<WalletSelector>();
   const [selector, setSelector] = useState<WalletSelector | null>(null);
+  const [walletId, setWalletId] = useState<string>("");
   const rewards = useAppSelector(getAccountRewards);
-
+  const isSignedIn = selector?.isSignedIn();
   const hideModal = () => {
     dispatch(_hideModal());
   };
@@ -71,12 +73,21 @@ const WalletButton = () => {
   };
 
   const onMount = async () => {
-    if (selector) return;
-    const { selector: s } = await getBurrow({ fetchData, hideModal, signOut });
+    let walletSelector = selector;
+    if (!selector) {
+      const { selector: s } = await getBurrow({ fetchData, hideModal, signOut });
+      walletSelector = s;
+      selectorRef.current = s;
+      setSelector(s);
+      window.selector = s;
+    }
 
-    selectorRef.current = s;
-    setSelector(s);
-    window.selector = s;
+    if (walletSelector) {
+      const wallet = await walletSelector?.wallet();
+      if (wallet?.id) {
+        setWalletId(wallet.id);
+      }
+    }
   };
 
   useEffect(() => {
@@ -120,6 +131,7 @@ const WalletButton = () => {
         getUnClaimRewards,
         isMobile,
         rewards,
+        walletId,
       }}
     >
       <Box
@@ -258,6 +270,7 @@ function AccountDetail({ onClose }: { onClose?: () => void }) {
     getUnClaimRewards,
     isMobile,
     rewards,
+    walletId,
   } = useContext(WalletContext) as any;
   const [showTip, setShowTip] = useState<boolean>(false);
   const [copyButtonDisabled, setCopyButtonDisabled] = useState<boolean>(false);
@@ -272,6 +285,7 @@ function AccountDetail({ onClose }: { onClose?: () => void }) {
     }, 1000);
   }
 
+  const changeWalletDisable = walletId === "keypom";
   return (
     <div className="border border-dark-300 bg-dark-100 lg:rounded-md p-4 xsm:rounded-b-xl xsm:p-6">
       {isMobile && (
@@ -302,31 +316,47 @@ function AccountDetail({ onClose }: { onClose?: () => void }) {
         </div>
       </div>
       <div className="flex items-center justify-between w-full gap-2 my-3.5">
-        <div
-          style={{ width: "104px" }}
+        <CustomButton
+          style={{
+            width: 104,
+            height: 30,
+            minHeight: 0,
+          }}
+          disabled={changeWalletDisable}
+          color="primaryBorder"
+          className="flex flex-grow items-center justify-center text-sm font-bold py-1"
           onClick={() => {
-            if (onClose) {
-              onClose();
+            if (!changeWalletDisable) {
+              if (onClose) {
+                onClose();
+              }
+              handleSwitchWallet();
             }
-            handleSwitchWallet();
           }}
-          className="flex flex-grow items-center justify-center border border-primary border-opacity-60 cursor-pointer rounded-md text-sm text-primary font-bold bg-primary hover:opacity-80 bg-opacity-5 py-1"
         >
           Change
-        </div>
-        <div
-          role="button"
-          style={{ width: "104px" }}
+        </CustomButton>
+
+        <CustomButton
+          style={{
+            width: 104,
+            height: 30,
+            minHeight: 0,
+          }}
+          disabled={changeWalletDisable}
+          color="errorBorder"
+          className="flex flex-grow items-center justify-center text-sm font-bold py-1"
           onClick={() => {
-            if (onClose) {
-              onClose();
+            if (!changeWalletDisable) {
+              if (onClose) {
+                onClose();
+              }
+              handleSwitchWallet();
             }
-            handleSignOut();
           }}
-          className="flex flex-grow items-center justify-center border border-red-50 border-opacity-60 cursor-pointer rounded-md text-sm text-red-50 font-bold bg-red-50 bg-opacity-5 hover:opacity-80 py-1"
         >
           Disconnect
-        </div>
+        </CustomButton>
       </div>
       <div className="flex lg:items-center justify-between xsm:items-end">
         <div className="relative flex flex-col xsm:top-1">

diff --git a/hooks/useTokenDetails.ts b/hooks/useTokenDetails.ts
@@ -108,7 +108,7 @@ export const useTokenDetails = () => {
       });
       const supplies = getSupplyDetails(tokenDetails);
 
-      const interestRatesCal = interestRate?.utilization.map((n, i) => {
+      const interestRatesCal = interestRate?.utilization?.map((n, i) => {
         const percent = n * 100;
         // const rateIndex = interestRate?.utilization.findIndex((i) => i === percent);
         const borrowRateRaw = interestRate.burrow_apr[i] * 100;

diff --git a/screens/TokenDetail/interestRateChart.tsx b/screens/TokenDetail/interestRateChart.tsx
@@ -15,7 +15,7 @@ import { isMobileDevice } from "../../helpers/helpers";
 const InterestRateChart = ({ data }) => {
   const { currentUtilRate } = data?.[0] || [];
   const isMobile = isMobileDevice();
-  const currentData = data.find((d) => d.percent === Math.round(currentUtilRate));
+  const currentData = data?.find((d) => d.percent === Math.round(currentUtilRate));
   return (
     <ResponsiveContainer width="100%" height="100%">
       <LineChart