fix: show warning incase balance is insufficient (#180)

buidl-labs · Feb 25, 2021 · aa53759 · aa53759
1 parent 6043dfe
commit aa53759
Show file tree

Hide file tree

Showing 3 changed files with 135 additions and 3 deletions.
diff --git a/src/pages/tezos/claim-transaction.js b/src/pages/tezos/claim-transaction.js
@@ -96,6 +96,8 @@ function Transaction({ location }) {
   const [user, setUser] = useAtom(userAtom);
   const [isUser] = useAtom(isUserAtom);
 
+  const [claimButtonDisabled, setClaimButtonDisabledStatus] = useState(true);
+
   useAsync(async () => {
     try {
       const result = await getXTZPrice();
@@ -157,6 +159,21 @@ function Transaction({ location }) {
     setNetworkFeeEstimate(x);
   }, []);
 
+  const getUserBalance = useAsync(async () => {
+    if (!user) return;
+
+    try {
+      const balance = await Tezos.tz.getBalance(user.xtzAddress);
+      const xtz = balance / 1000000;
+      if (xtz > 0.5) {
+        setClaimButtonDisabledStatus(false);
+      }
+      return xtz;
+    } catch (err) {
+      console.log(JSON.stringify(error));
+    }
+  }, []);
+
   return (
     <div className=" bg-base-900 ">
       <NavBar />
@@ -231,14 +248,57 @@ function Transaction({ location }) {
                     />
                   )}
                 </div>
+                <div>
+                  {getUserBalance.loading ? null : getUserBalance.error ? (
+                    <div>Error: {getUserBalance.error.message}</div>
+                  ) : (
+                    <div>
+                      {getUserBalance.value === 0 ? (
+                        <div
+                          className="mt-3 py-3 px-5 mb-4 bg-primary-100 text-primary-900 text-sm rounded-md border border-primary-600"
+                          role="alert"
+                        >
+                          Your account is empty ?{' '}
+                          <strong>
+                            <a
+                              target="_blank"
+                              href="https://www.finder.com/how-to-buy-tezos"
+                              className="underline"
+                            >
+                              How to obtain XTZ tokens ?
+                            </a>
+                          </strong>
+                        </div>
+                      ) : getUserBalance.value < 0.5 ? (
+                        <div
+                          className="mt-3 py-3 px-5 mb-4 bg-error-100 text-error-900 text-sm rounded-md border border-error-600"
+                          role="alert"
+                        >
+                          Insufficient balance. You need additional of 0.5 XTZ
+                          balance to proceed further.{' '}
+                          <strong>
+                            <a
+                              target="_blank"
+                              href="https://www.finder.com/how-to-buy-tezos"
+                              className="underline"
+                            >
+                              How to obtain XTZ tokens ?
+                            </a>
+                          </strong>
+                        </div>
+                      ) : null}
+                    </div>
+                  )}
+                </div>
                 <div className="grid mx-auto justify-center mt-6">
                   <Button
                     onClick={() => {
-                      console.log('Clicked 🔥');
+                      if (claimButtonDisabled) return;
                       mintNFT();
                     }}
                     size="lg"
                     type="primary"
+                    disabled={claimButtonDisabled}
                   >
                     Confirm
                   </Button>

diff --git a/src/pages/tezos/customizebot.js b/src/pages/tezos/customizebot.js
@@ -206,10 +206,10 @@ const SavingBotModal = () => {
         className={`absolute bg-base-700 flex items-center justify-center flex-col py-9 px-24 rounded-3xl`}
         style={{ maxWidth: `65vw` }}
       >
-        <ModalHeading>Saving your 3D Cryptobot</ModalHeading>
-        <div className="flex justify-center w-full">
+        <div className="flex justify-center w-full mb-5">
           <Loader type="BallTriangle" color="#2563EB" height={80} width={80} />
         </div>
+        <ModalHeading>Saving your 3D Cryptobot</ModalHeading>
       </div>
     </div>
   );

diff --git a/src/pages/tezos/transaction.js b/src/pages/tezos/transaction.js
@@ -12,6 +12,10 @@ import { convertMutezToXtz, getXTZPriceInUSD } from 'src/utils/indexer';
 import { MdDone } from 'react-icons/md';
 import Confetti from 'react-confetti';
 
+import userAtom from 'src/atoms/user-atom';
+import isUserAtom from 'src/atoms/is-user-atom';
+import { useAtom } from 'jotai';
+
 const Steppers = ({ number, name, clickEvent, tick = false }) => {
   return (
     <div onClick={clickEvent}>
@@ -78,6 +82,9 @@ function Transaction({ location }) {
   const xtzPrice = location.state ? location.state.xtzPrice : null;
   const bot = location.state ? location.state.bot : null;
   const { width, height } = useWindowSize();
+  const [user, setUser] = useAtom(userAtom);
+
+  const [claimButtonDisabled, setClaimButtonDisabledStatus] = useState(true);
 
   const buyCryptobot = async (mutez, tokenId) => {
     try {
@@ -103,6 +110,21 @@ function Transaction({ location }) {
     }
   };
 
+  const getUserBalance = useAsync(async () => {
+    if (!user) return;
+
+    try {
+      const balance = await Tezos.tz.getBalance(user.xtzAddress);
+      const xtz = balance / 1000000;
+      if (xtz > convertMutezToXtz(bot.saleValueInMutez) + 0.5) {
+        setClaimButtonDisabledStatus(false);
+      }
+      return xtz;
+    } catch (err) {
+      console.log(JSON.stringify(error));
+    }
+  }, []);
+
   return (
     <div className=" bg-base-900 ">
       <NavBar />
@@ -188,13 +210,63 @@ function Transaction({ location }) {
                     }
                   />
                 </div>
+                <div>
+                  {getUserBalance.loading ? null : getUserBalance.error ? (
+                    <div>Error: {getUserBalance.error.message}</div>
+                  ) : (
+                    <div>
+                      {getUserBalance.value === 0 ? (
+                        <div
+                          className="mt-3 py-3 px-5 mb-4 bg-primary-100 text-primary-900 text-sm rounded-md border border-primary-600"
+                          role="alert"
+                        >
+                          Your account is empty ?{' '}
+                          <strong>
+                            <a
+                              target="_blank"
+                              href="https://www.finder.com/how-to-buy-tezos"
+                              className="underline"
+                            >
+                              How to obtain XTZ tokens ?
+                            </a>
+                          </strong>
+                        </div>
+                      ) : getUserBalance.value <
+                        convertMutezToXtz(bot.saleValueInMutez) + 0.5 ? (
+                        <div
+                          className="mt-3 py-3 px-5 mb-4 bg-error-100 text-error-900 text-sm rounded-md border border-error-600"
+                          role="alert"
+                        >
+                          Insufficient balance. You need additional of{' '}
+                          {(
+                            convertMutezToXtz(bot.saleValueInMutez) -
+                            getUserBalance.value +
+                            0.5
+                          ).toFixed(2)}{' '}
+                          XTZ balance to proceed further.{' '}
+                          <strong>
+                            <a
+                              target="_blank"
+                              href="https://www.finder.com/how-to-buy-tezos"
+                              className="underline"
+                            >
+                              How to obtain XTZ tokens ?
+                            </a>
+                          </strong>
+                        </div>
+                      ) : null}
+                    </div>
+                  )}
+                </div>
                 <div className="grid mx-auto justify-center mt-6">
                   <Button
                     onClick={() => {
+                      if (claimButtonDisabled) return;
                       buyCryptobot(bot.saleValueInMutez, bot.tokenId);
                     }}
                     size="lg"
                     type="primary"
+                    disabled={claimButtonDisabled}
                   >
                     Confirm
                   </Button>