wip

TempleDAO · Jan 8, 2025 · 516019a · 516019a
1 parent f45d25c
commit 516019a
Show file tree

Hide file tree

Showing 9 changed files with 427 additions and 169 deletions.
diff --git a/apps/dapp/src/components/Pages/Core/DappPages/SpiceBazaar/Earn/Auctions/BidUSDS.tsx b/apps/dapp/src/components/Pages/Core/DappPages/SpiceBazaar/Earn/Auctions/BidUSDS.tsx
@@ -14,8 +14,9 @@ import { useSpiceBazaar } from 'providers/SpiceBazaarProvider';
 import { formatBigNumber } from 'components/Vault/utils';
 import { ZERO } from 'utils/bigNumber';
 import { getTokenInfo } from 'components/Vault/utils';
+import LargeRoundCheckBox from 'components/Pages/Core/DappPages/SpiceBazaar/components/LargeRoundCheckBox';
 
-const PRICE_UPDATE_INTERVAL = 5000;
+const PRICE_UPDATE_INTERVAL = 10000;
 const FADE_EFFECT_DURATION = 500;
 
 interface BidUSDSProps {
@@ -41,6 +42,7 @@ export const BidUSDS = ({
   const [lastTgldPrice, setLastTgldPrice] = useState('0');
   const [lastPriceUpdate, setLastPriceUpdate] = useState(Date.now());
   const [fadeEffect, setFadeEffect] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   const {
     daiGoldAuctions: { bid },
@@ -58,6 +60,12 @@ export const BidUSDS = ({
     return daiGoldAuctionInfo?.data?.priceRatio || '0';
   }, [daiGoldAuctionInfo]);
 
+  const resetState = useCallback(() => {
+    setIsCheckboxChecked1(false);
+    setIsCheckboxChecked2(false);
+    setInputValue('');
+  }, []);
+
   const handleBidClick = async (value: string) => {
     const now = Date.now();
 
@@ -73,15 +81,19 @@ export const BidUSDS = ({
       }
     }
 
-    if (mode === BidUSDSMode.IncreaseBid) {
-      // Possible we only want to increase bid
-      // by the difference between the current bid and the new bid
-      await bid(value);
-    } else {
-      await bid(value);
+    setIsSubmitting(true);
+    try {
+      if (mode === BidUSDSMode.IncreaseBid) {
+        await bid(value);
+      } else {
+        await bid(value);
+      }
+      resetState();
+      onBidSubmitted?.();
+    } catch (error) {
+      console.error('Bid submission failed:', error);
+      setIsSubmitting(false);
     }
-    setInputValue('');
-    onBidSubmitted?.();
   };
 
   const handleHintClick = () => {
@@ -137,7 +149,8 @@ export const BidUSDS = ({
 
   useEffect(() => {
     // Update price every n seconds
-    if (!inputValue) return;
+    if (!inputValue || isSubmitting) return;
+
     const interval = setInterval(async () => {
       const newPrice = await fetchTGLDPrice().toString();
       setFadeEffect(true);
@@ -147,7 +160,17 @@ export const BidUSDS = ({
     }, PRICE_UPDATE_INTERVAL);
 
     return () => clearInterval(interval);
-  }, [fetchTGLDPrice, lastTgldPrice, inputValue]);
+  }, [fetchTGLDPrice, lastTgldPrice, inputValue, isSubmitting]);
+
+  const [isCheckboxChecked1, setIsCheckboxChecked1] = useState(false);
+  const handleCheckboxToggle1 = (checked: boolean) => {
+    setIsCheckboxChecked1(checked);
+  };
+
+  const [isCheckboxChecked2, setIsCheckboxChecked2] = useState(false);
+  const handleCheckboxToggle2 = (checked: boolean) => {
+    setIsCheckboxChecked2(checked);
+  };
 
   return (
     <ContentContainer>
@@ -233,31 +256,44 @@ export const BidUSDS = ({
         </ReceiveAmountContainer>
         {exceededAmount && (
           <WarningMessage>
-            <InfoCircle>
-              <p>i</p>
-            </InfoCircle>
             <MessageText>
+              <InfoCircle>
+                <p>i</p>
+              </InfoCircle>
               <Text>Amount exceeds TGLD auction limit.</Text>
             </MessageText>
           </WarningMessage>
         )}
         <WarningMessage>
-          <InfoCircle>
-            <p>i</p>
-          </InfoCircle>
           <MessageText>
+            <LargeRoundCheckBox
+              checked={isCheckboxChecked1}
+              onToggle={handleCheckboxToggle1}
+            />
             <Text>
               Current TGLD price may rise before the end of the auction.
             </Text>
-            <Text>
-              Once submitted, the bid cannot be withdrawn or cancelled.
-            </Text>
+          </MessageText>
+          <MessageText>
+            <LargeRoundCheckBox
+              checked={isCheckboxChecked2}
+              onToggle={handleCheckboxToggle2}
+            />
+            <Text>Once submitted, bids cannot be withdrawn or canceled.</Text>
           </MessageText>
         </WarningMessage>
         <TradeButton
           style={{ whiteSpace: 'nowrap', margin: '0px', alignSelf: 'center' }}
-          onClick={() => handleBidClick(inputValue)}
-          disabled={!inputValue || exceededAmount || fadeEffect}
+          onClick={async () => {
+            await handleBidClick(inputValue);
+          }}
+          disabled={
+            !inputValue ||
+            exceededAmount ||
+            fadeEffect ||
+            !isCheckboxChecked1 ||
+            !isCheckboxChecked2
+          }
         >
           SUBMIT BID
         </TradeButton>
@@ -440,22 +476,23 @@ const InfoCircle = styled.div`
 
 const MessageText = styled.div`
   display: flex;
-  flex-direction: column;
-  gap: 8px;
+  flex-direction: row;
+  gap: 10px;
+  align-items: center;
 `;
 
 const Text = styled.p`
   margin: 0px;
-  color: ${({ theme }) => theme.palette.brand};
+  color: ${({ theme }) => theme.palette.brandLight};
   font-size: 12px;
   line-height: 18px;
   font-weight: 700;
 `;
 
 const WarningMessage = styled.div`
   display: flex;
-  flex-direction: row;
-  align-items: center;
+  flex-direction: column;
+  align-items: flex-start;
   width: 100%;
   border: 2px solid transparent;
   border-image-source: linear-gradient(
@@ -466,6 +503,6 @@ const WarningMessage = styled.div`
   border-image-slice: 1;
   border-radius: 6px;
   padding: 10px 0px 10px 10px;
-  gap: 8px;
+  gap: 10px;
   background: #24272c;
 `;
diff --git a/apps/dapp/src/components/Pages/Core/DappPages/SpiceBazaar/Earn/DisclaimerModal.tsx b/apps/dapp/src/components/Pages/Core/DappPages/SpiceBazaar/Earn/DisclaimerModal.tsx
@@ -0,0 +1,69 @@
+import styled from 'styled-components';
+import { Button } from 'components/Button/Button';
+import { Popover } from 'components/Pages/Core/DappPages/SpiceBazaar/components/Popover';
+
+interface IProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export const DisclaimerModal: React.FC<IProps> = ({ isOpen, onClose }) => {
+  return (
+    <>
+      <Popover
+        isOpen={isOpen}
+        onClose={onClose}
+        closeOnClickOutside
+        showCloseButton
+      >
+        <ModalContainer>
+          <Title>TGLD Warning</Title>
+          <Text>
+            TGLD cannot be cross chained to another address. Multisig wallets
+            might have a different address on different chains.
+          </Text>
+          <ConsentButton onClick={onClose}>I Understand</ConsentButton>
+        </ModalContainer>
+      </Popover>
+    </>
+  );
+};
+
+const ModalContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: ${({ theme }) => theme.palette.brand};
+  width: 400px;
+  padding: 0px 20px 0px 20px;
+  margin-top: 22px;
+  gap: 20px;
+`;
+
+const Title = styled.div`
+  font-size: 24px;
+  color: ${({ theme }) => theme.palette.brandLight};
+`;
+
+const Text = styled.div`
+  color: ${({ theme }) => theme.palette.brand};
+  font-size: 16px;
+  line-height: 20px;
+  text-align: center;
+`;
+
+const ConsentButton = styled(Button)`
+  padding: 12px 20px 12px 20px;
+  margin: 0px 0px 0px 0px;
+  width: max-content;
+  height: min-content;
+  background: ${({ theme }) => theme.palette.gradients.dark};
+  border: 1px solid ${({ theme }) => theme.palette.brandDark};
+  box-shadow: 0px 0px 20px rgba(222, 92, 6, 0.4);
+  border-radius: 10px;
+  font-size: 16px;
+  line-height: 19px;
+  text-transform: uppercase;
+  color: ${({ theme }) => theme.palette.brandLight};
+`;
diff --git a/apps/dapp/src/components/Pages/Core/DappPages/SpiceBazaar/Earn/StakeTemple/Stake.tsx b/apps/dapp/src/components/Pages/Core/DappPages/SpiceBazaar/Earn/StakeTemple/Stake.tsx
@@ -2,7 +2,6 @@ import { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import stakeTemple from 'assets/icons/stake-temple.svg?react';
 import templeGold from 'assets/icons/temple-gold.svg?react';
-import priorityHigh from 'assets/icons/priority-high.svg?react';
 import { Input } from 'components/Pages/Core/DappPages/SpiceBazaar/components/Input';
 import { Button } from 'components/Button/Button';
 import { useWallet } from 'providers/WalletProvider';
@@ -14,6 +13,7 @@ import { useSpiceBazaar } from 'providers/SpiceBazaarProvider';
 import * as breakpoints from 'styles/breakpoints';
 import { useMediaQuery } from 'react-responsive';
 import { queryPhone } from 'styles/breakpoints';
+import LargeRoundCheckBox from 'components/Pages/Core/DappPages/SpiceBazaar/components/LargeRoundCheckBox';
 
 export const Stake = () => {
   const isPhoneOrAbove = useMediaQuery({
@@ -48,6 +48,16 @@ export const Stake = () => {
     setInputValue(value);
   };
 
+  const [isCheckboxChecked1, setIsCheckboxChecked1] = useState(false);
+  const handleCheckboxToggle1 = (checked: boolean) => {
+    setIsCheckboxChecked1(checked);
+  };
+
+  const [isCheckboxChecked2, setIsCheckboxChecked2] = useState(false);
+  const handleCheckboxToggle2 = (checked: boolean) => {
+    setIsCheckboxChecked2(checked);
+  };
+
   return (
     <PageContainer>
       <AvailableAmountContainer>
@@ -89,21 +99,43 @@ export const Stake = () => {
         </ContentReceive>
       </ReceiveAmountContainer> */}
       <WarningMessage>
-        <ExclamationIcon />
-        TGLD is non-transferrable. <br />
-        Once submitted, bids cannot be withdrawn {!isPhoneOrAbove && <br />} or
-        canceled, {isPhoneOrAbove && <br />}
-        and your stake will be locked {!isPhoneOrAbove && <br />} for X days
-        before it can be {isPhoneOrAbove && <br />}
-        unstaked.
+        <Message>
+          <LargeRoundCheckBox
+            checked={isCheckboxChecked1}
+            onToggle={handleCheckboxToggle1}
+          />
+          <TextMessage>
+            TGLD is non-transferrable but can be cross-
+            {!isPhoneOrAbove && <br />}
+            chain {isPhoneOrAbove && <br />}
+            transferred to the same address. For{!isPhoneOrAbove && <br />}
+            multisigs,{' '}
+            <a target="_blank" rel="noreferrer" href="https://www.google.com">
+              read more.
+            </a>
+          </TextMessage>
+        </Message>
+        <Message>
+          <LargeRoundCheckBox
+            checked={isCheckboxChecked2}
+            onToggle={handleCheckboxToggle2}
+          />
+          Once submitted, stakes cannot be {!isPhoneOrAbove && <br />}
+          withdrawn or canceled {isPhoneOrAbove && <br />}
+          and your staked {!isPhoneOrAbove && <br />}
+          TEMPLE tokens will be locked for X days <br />
+          before they can be unstaked.
+        </Message>
       </WarningMessage>
       <TradeButton
         style={{ whiteSpace: 'nowrap', marginTop: 0 }}
         onClick={async () => {
           await stakeTemple(inputValue);
           setInputValue('');
+          setIsCheckboxChecked1(false);
+          setIsCheckboxChecked2(false);
         }}
-        disabled={!inputValue}
+        disabled={!inputValue || !isCheckboxChecked1 || !isCheckboxChecked2}
       >
         SUBMIT
       </TradeButton>
@@ -199,11 +231,30 @@ const ReceiveAmount = styled.h3`
   margin: 0px;
 `;
 
-const WarningMessage = styled.div`
+const Message = styled.div`
   display: flex;
   flex-direction: row;
-  align-items: center;
+  gap: 10px;
+
+  a {
+    color: ${({ theme }) => theme.palette.brandLight};
+    font-weight: 700;
+    text-decoration: underline;
+    font-size: 13px;
+    line-height: 20px;
+  }
+`;
 
+const TextMessage = styled.div`
+  display: inline;
+  line-height: 20px;
+  white-space: pre-wrap;
+`;
+
+const WarningMessage = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
   border: 2px solid transparent;
   border-image-source: linear-gradient(
     180deg,
@@ -212,8 +263,7 @@ const WarningMessage = styled.div`
   );
   border-image-slice: 1;
   border-radius: 6px;
-
-  padding: 10px 10px 10px 10px;
+  padding: 10px 0px 10px 10px;
   gap: 10px;
   background: #24272c;
   color: ${({ theme }) => theme.palette.brandLight};
@@ -226,11 +276,6 @@ const WarningMessage = styled.div`
   `)}
 `;
 
-const ExclamationIcon = styled(priorityHigh)`
-  min-width: 26px;
-  min-height: 26px;
-`;
-
 export const TradeButton = styled(Button)`
   padding: 12px 20px 12px 20px;
   width: ${(props) => props.width || 'min-content'};