Merge pull request #48 from burrowHQ/oneclick-connect

Oneclick connect

.prettierignore

@@ -0,0 +1,8 @@
+.env
+.gitignore
+.prettierrc
+.prettierignore
+tsconfig.tsbuildinfo
+yarn-error.log
+yarn.lock
+LICENSE

.prettierrc

@@ -5,4 +5,4 @@
   "printWidth": 100,
   "useTabs": false,
   "endOfLine": "auto"
-}
+}

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",

components/Header/WalletButton.tsx

@@ -8,12 +8,8 @@ import {
   Typography,
   Modal as MUIModal,
 } from "@mui/material";
-import { GiHamburgerMenu } from "@react-icons/all-files/gi/GiHamburgerMenu";
 import type { WalletSelector } from "@near-wallet-selector/core";
-import CopyToClipboard from "react-copy-to-clipboard";
-
 import { BeatLoader } from "react-spinners";
-import Decimal from "decimal.js";
 import { fetchAssets, fetchRefPrices } from "../../redux/assetsSlice";
 import { logoutAccount, fetchAccount, setAccountId } from "../../redux/accountSlice";
 import { useAppSelector, useAppDispatch } from "../../redux/hooks";
@@ -29,12 +25,12 @@ import { HamburgerMenu } from "./Menu";
 import Disclaimer from "../Disclaimer";
 import { useDisclaimer } from "../../hooks/useDisclaimer";
 import { NearSolidIcon, ArrowDownIcon, CloseIcon, ArrowRightTopIcon } from "./svg";
-import NearIcon from "../../public/near-icon.svg";
 import ClaimAllRewards from "../ClaimAllRewards";
 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 +50,9 @@ const WalletButton = () => {
 
   const selectorRef = useRef<WalletSelector>();
   const [selector, setSelector] = useState<WalletSelector | null>(null);
+  const [currentWallet, setCurrentWallet] = useState<any>(null);
   const rewards = useAppSelector(getAccountRewards);
-
+  const isSignedIn = selector?.isSignedIn();
   const hideModal = () => {
     dispatch(_hideModal());
   };
@@ -71,17 +68,26 @@ 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: any = await walletSelector?.wallet();
+      if (wallet) {
+        setCurrentWallet(wallet);
+      }
+    }
   };
 
   useEffect(() => {
     onMount();
-  }, []);
+  }, [accountId]);
 
   const onWalletButtonClick = async () => {
     if (!hasAgreedDisclaimer) {
@@ -95,7 +101,9 @@ const WalletButton = () => {
 
   const handleSignOut = async () => {
     const { signOut: signOutBurrow } = await getBurrow();
-    signOutBurrow();
+    if (typeof signOutBurrow === "function") {
+      signOutBurrow();
+    }
     trackLogout();
     setAnchorEl(null);
     setDisclaimer(false);
@@ -118,6 +126,7 @@ const WalletButton = () => {
         getUnClaimRewards,
         isMobile,
         rewards,
+        currentWallet,
       }}
     >
       <Box
@@ -171,15 +180,19 @@ function Account() {
   const { balance, show_account_detail, set_show_account_detail, accountId, isMobile } = useContext(
     WalletContext,
   ) as any;
+
   function handleOpen() {
     set_show_account_detail(true);
   }
+
   function handleClose() {
     set_show_account_detail(false);
   }
+
   function handleSwitch() {
     set_show_account_detail(!show_account_detail);
   }
+
   return (
     <div className="flex items-center gap-4">
       {/* near balance */}
@@ -252,9 +265,11 @@ function AccountDetail({ onClose }: { onClose?: () => void }) {
     getUnClaimRewards,
     isMobile,
     rewards,
+    currentWallet,
   } = useContext(WalletContext) as any;
   const [showTip, setShowTip] = useState<boolean>(false);
   const [copyButtonDisabled, setCopyButtonDisabled] = useState<boolean>(false);
+
   function showToast() {
     if (copyButtonDisabled) return;
     setCopyButtonDisabled(true);
@@ -264,6 +279,8 @@ function AccountDetail({ onClose }: { onClose?: () => void }) {
       setCopyButtonDisabled(false);
     }, 1000);
   }
+
+  const changeWalletDisable = currentWallet?.id === "keypom";
   return (
     <div className="border border-dark-300 bg-dark-100 lg:rounded-md p-4 xsm:rounded-b-xl xsm:p-6">
       {isMobile && (
@@ -288,37 +305,57 @@ function AccountDetail({ onClose }: { onClose?: () => void }) {
         )}
       </div>
       <div className="flex items-center justify-between">
-        <div className="flex items-center text-xs text-gray-300 -ml-1 xsm:text-sm">
-          <NearIcon style={{ width: "1.5rem", height: "1.5rem", fill: "white" }} />
-          Near Wallet
+        <div className="flex items-center text-xs text-gray-300 xsm:text-sm">
+          {currentWallet?.metadata?.iconUrl && (
+            <span className="mr-1" style={{ marginLeft: -2 }}>
+              <img src={currentWallet.metadata.iconUrl} className="w-3 h-3 mr-1" alt="" />
+            </span>
+          )}
+          {currentWallet?.metadata?.name}
         </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">

data/datasource.js

@@ -97,6 +97,10 @@ class DataSource {
       config?.liquidationUrl,
     );
   }
+
+  getTxId(receipt_id) {
+    return this.callAPI(`/v1/search/?keyword=${receipt_id}`, "GET", null, null, config?.txIdApiUrl);
+  }
 }
 
 export default DataSource;

helpers/helpers.ts

@@ -1,5 +1,5 @@
 import millify from "millify";
-import { APY_FORMAT, DUST_FORMAT, TOKEN_FORMAT, USD_FORMAT } from "../store";
+import { APY_FORMAT, DUST_FORMAT, NUMBER_FORMAT, TOKEN_FORMAT, USD_FORMAT } from "../store";
 
 export const formatTokenValue = (v) => {
   return Number(v).toLocaleString(undefined, TOKEN_FORMAT);
@@ -30,6 +30,43 @@ export const millifyNumber = (v: string | number, ignoreBelow?: number, isDispla
   return millify(number);
 };
 
+export const formatTokenValueWithMilify = (
+  v,
+  fractionDigits = 2,
+  bigNumberFractionDigits = 0,
+  milifyThreshold = 1000000,
+  zeroPlacement = "-",
+) => {
+  if (v === 0 && zeroPlacement) {
+    return zeroPlacement;
+  }
+  if (Math.abs(Number(v)) >= milifyThreshold) {
+    return bigNumberMilify(Number(v), fractionDigits, bigNumberFractionDigits, zeroPlacement);
+  }
+  return Number(v).toLocaleString(undefined, TOKEN_FORMAT);
+};
+
+export const bigNumberMilify = (
+  n,
+  fractionDigits = 2,
+  bigNumberFractionDigits = 0,
+  zeroPlacement = "-",
+) => {
+  if (n === 0 && zeroPlacement) {
+    return zeroPlacement;
+  }
+  const formatNumber = (num, factor) => {
+    return (+(n / factor).toFixed(fractionDigits)).toLocaleString(undefined, NUMBER_FORMAT);
+  };
+
+  if (n >= 1e3 && n < 1e6) return `${formatNumber(n, 1e3)}K`;
+  if (n >= 1e6 && n < 1e9) return `${formatNumber(n, 1e6)}M`;
+  if (n >= 1e9 && n < 1e12) return `${formatNumber(n, 1e9)}B`;
+  if (n >= 1e12) return `${formatNumber(n, 1e12)}T`;
+
+  return n.toFixed(fractionDigits);
+};
+
 export const removeUndefinedInObj = (obj, removeNull) => {
   Object.keys(obj).forEach((key) => {
     if (removeNull) {

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;

next.config.js

@@ -31,13 +31,13 @@ module.exports = {
 
     return config;
   },
-  async redirects() {
-    return [
-      {
-        source: "/",
-        destination: "/markets",
-        permanent: true,
-      },
-    ];
-  },
+  // async redirects() {
+  //   return [
+  //     {
+  //       source: "/",
+  //       destination: "/markets",
+  //       permanent: true,
+  //     },
+  //   ];
+  // },
 };

package.json

@@ -19,14 +19,15 @@
   "dependencies": {
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
+    "@keypom/selector": "^1.2.3",
     "@metamask/detect-provider": "^2.0.0",
     "@mui/icons-material": "^5.10.6",
     "@mui/lab": "^5.0.0-alpha.100",
     "@mui/material": "^5.10.6",
     "@mui/styles": "^5.10.6",
     "@mui/system": "^5.10.6",
     "@mui/utils": "^5.10.6",
-    "@near-wallet-selector/core": "^8.5.4",
+    "@near-wallet-selector/core": "8.9.1",
     "@near-wallet-selector/here-wallet": "^8.5.4",
     "@near-wallet-selector/ledger": "^8.5.4",
     "@near-wallet-selector/meteor-wallet": "^8.5.4",

pages/_app.tsx

@@ -53,6 +53,7 @@ const Init = () => {
   };
 
   useEffect(() => {
+    console.info("ttest");
     dispatch(fetchConfig());
   }, []);
   useEffect(fetchData, []);

redux/selectors/getAccountRewards.ts

@@ -87,7 +87,8 @@ export const computePoolsDailyAmount = (
     shrinkToken(farmData.asset_farm_reward.reward_per_day, rewardAssetDecimals),
   );
 
-  const dailyAmount = (boostedShares / totalBoostedShares) * totalRewardsPerDay;
+  const dailyAmount =
+    totalBoostedShares > 0 ? (boostedShares / totalBoostedShares) * totalRewardsPerDay : 0;
 
   const suppliedShares = Number(
     shrinkToken(portfolio.supplied[asset.token_id]?.shares || 0, assetDecimals),
@@ -102,7 +103,8 @@ export const computePoolsDailyAmount = (
   const shares = type === "supplied" ? suppliedShares + collateralShares : borrowedShares;
   const newBoostedShares = shares * multiplier;
   const newTotalBoostedShares = totalBoostedShares + newBoostedShares - boostedShares;
-  const newDailyAmount = (newBoostedShares / newTotalBoostedShares) * totalRewardsPerDay;
+  const newDailyAmount =
+    newTotalBoostedShares > 0 ? (newBoostedShares / newTotalBoostedShares) * totalRewardsPerDay : 0;
 
   return { dailyAmount, newDailyAmount, multiplier, totalBoostedShares, shares };
 };