Merge pull request #149 from HaloDAO/develop

Pre-release PR
xave-finance · Feb 10, 2022 · 1ddbeee · 1ddbeee
2 parents d9f1ace + 34a3cb8
commit 1ddbeee
Show file tree

Hide file tree

Showing 9 changed files with 88 additions and 22 deletions.
diff --git a/cypress/integration/rnbw-visibility-on-arbitrum.test.ts b/cypress/integration/rnbw-visibility-on-arbitrum.test.ts
@@ -0,0 +1,8 @@
+describe('RNBW Visibility testing in Kovan Network', function() {
+  it('Visit Home page of Halo Dao', function() {
+    cy.visit('/')
+  })
+  it('Show RNBW Tokens', function() {
+    cy.get('#rainbow').click()
+  })
+})
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
@@ -640,8 +640,8 @@ export const RNBWBalance = ({ onClickHandler }: RNBWBalanceProps) => {
 
   return (
     <>
-      {chainId && [1, 3, 4, 5, 42, 137].includes(chainId) && (
-        <UNIWrapper onClick={onClickHandler}>
+      {chainId && [1, 3, 4, 5, 42, 137, 42161, 421611].includes(chainId) && (
+        <UNIWrapper id="rainbow" onClick={onClickHandler}>
           <UNIAmount active={!!account} style={{ pointerEvents: 'auto' }}>
             {account && (
               <TYPE.white

diff --git a/src/halo-hooks/amm/useSwapToken.ts b/src/halo-hooks/amm/useSwapToken.ts
@@ -31,11 +31,13 @@ export const useSwapToken = (
 ) => {
   const { account, chainId, library } = useActiveWeb3React()
   const [price, setPrice] = useState<number>()
+  const [isLoadingPrice, setIsLoadingPrice] = useState(false)
   const { getFutureTime } = useTime()
   const [toAmountBalance, setToAmountBalance] = useState('0')
   const [fromAmountBalance, setFromAmountBalance] = useState('0')
   const [toMinimumAmount, setToMinimumAmount] = useState<string | undefined>()
   const [fromMinimumAmount, setFromMinimumAmount] = useState<string | undefined>()
+  const [isLoadingMinimumAmount, setIsLoadingMinimumAmount] = useState(false)
   const [allowance, setAllowance] = useState('0')
   const addTransaction = useTransactionAdder()
 
@@ -95,7 +97,7 @@ export const useSwapToken = (
 
   const getPrice = useCallback(async () => {
     if (!chainId || !library) return
-
+    setIsLoadingPrice(true)
     try {
       const toTokenAssimilatorContract = getContract(
         (haloAssimilators[chainId as ChainId] as AssimilatorAddressMap)[toCurrency.symbol as TokenSymbol],
@@ -116,12 +118,13 @@ export const useSwapToken = (
     } catch (e) {
       console.log(e)
     }
+    setIsLoadingPrice(false)
   }, [chainId, library, fromCurrency.symbol, toCurrency.symbol])
 
   const getMinimumAmount = useCallback(
     async (amount: string, currencySide: CurrencySide) => {
       // currencySide is the unknown
-
+      setIsLoadingMinimumAmount(true)
       const CurveContract = await getRouter()
 
       if (!CurveContract || !chainId) return
@@ -151,6 +154,7 @@ export const useSwapToken = (
       } catch (e) {
         setButtonState(SwapButtonState.InsufficientLiquidity)
       }
+      setIsLoadingMinimumAmount(false)
     },
     [
       fromCurrency.address,
@@ -250,8 +254,10 @@ export const useSwapToken = (
     getPrice,
     getMinimumAmount,
     price,
+    isLoadingPrice,
     toMinimumAmount,
     fromMinimumAmount,
+    isLoadingMinimumAmount,
     allowance,
     approve,
     swapToken,

diff --git a/src/halo-hooks/useHaloHalo.ts b/src/halo-hooks/useHaloHalo.ts
@@ -81,7 +81,8 @@ const useHaloHalo = () => {
   const approve = useCallback(async () => {
     try {
       const tx = await haloContract?.approve(halohaloContract?.address, ethers.constants.MaxUint256.toString())
-      return addTransaction(tx, { summary: 'Approve' })
+      addTransaction(tx, { summary: 'Approve' })
+      return tx
     } catch (e) {
       return e
     }

diff --git a/src/pages/HaloHalo/HaloDepositPanel.tsx b/src/pages/HaloHalo/HaloDepositPanel.tsx
@@ -120,10 +120,12 @@ export default function CurrencyInputPanel({
     try {
       setRequestedApproval(true)
       const txHash = await approve()
-      console.log(txHash)
       // user rejected tx or didn't go thru
-      if (!txHash) {
+      if (txHash.code === 4001 || txHash.code === -32603) {
         setRequestedApproval(false)
+      } else {
+        setRequestedApproval(true)
+        await txHash.wait()
       }
     } catch (e) {
       console.log(e)

diff --git a/src/pages/Tailwind/Bridge/modals/BridgeTransactionModal.tsx b/src/pages/Tailwind/Bridge/modals/BridgeTransactionModal.tsx
@@ -95,33 +95,51 @@ const BridgeTransactionModal = ({
           <div className="py-4 text-sm">
             <div className="flex justify-between mb-2 font-bold">
               <div className="text-secondary-alternate">Gas fee (estimated)</div>
-              <div>
-                {estimatedGas} {Currency.getNativeCurrencySymbol(originChainId)}{' '}
+              <div
+                className={`
+                    ${!estimatedGas && 'animate-pulse bg-primary h-4 w-20 rounded'} flex justify-end
+                `}
+              >
+                {estimatedGas && `${estimatedGas} ${Currency.getNativeCurrencySymbol(originChainId)}`}
               </div>
             </div>
             <div className="flex justify-between mb-2 font-bold">
               <div className="text-secondary-alternate">Estimated lower bound shuttle fee</div>
               <div>
-                <div>
-                  {lowerBoundFee.toFixed(2)} {token.symbol}
+                <div
+                  className={`
+                    ${!lowerBoundFee && 'animate-pulse bg-primary h-4 w-20 rounded'} flex justify-end
+                  `}
+                >
+                  {lowerBoundFee ? `${lowerBoundFee.toFixed(2)} ${token.symbol}` : ''}
                 </div>
               </div>
             </div>
             <div className="flex justify-between mb-2 font-bold">
               <div className="text-secondary-alternate">Estimated upper bound shuttle fee</div>
               <div>
-                <div>
-                  {upperBoundFee.toFixed(2)} {token.symbol}
+                <div
+                  className={`
+                    ${!upperBoundFee && 'animate-pulse bg-primary h-4 w-20 rounded'} flex justify-end
+                  `}
+                >
+                  {upperBoundFee ? `${upperBoundFee.toFixed(2)} ${token.symbol}` : ''}
                 </div>
               </div>
             </div>
-            <div className="border-b border-black w-full"></div>
+            <div className="border-b border-black w-full" />
             <div className="flex justify-between mb-2 font-bold">
               <div className="text-secondary-alternate">Amount after fees</div>
               <div>
-                <div>
-                  {(Number(amount) - upperBoundFee).toFixed(2)} ~ {(Number(amount) - lowerBoundFee).toFixed(2)}{' '}
-                  {token.symbol}
+                <div
+                  className={`
+                    ${!upperBoundFee && 'animate-pulse bg-primary mt-1 h-4 w-36 rounded'} flex justify-end
+                  `}
+                >
+                  {upperBoundFee
+                    ? `${(Number(amount) - upperBoundFee).toFixed(2)} ~ ${(Number(amount) - lowerBoundFee).toFixed(2)} 
+                  ${token.symbol}`
+                    : ''}
                 </div>
               </div>
             </div>

diff --git a/src/pages/Tailwind/Swap/SwapDetails.tsx b/src/pages/Tailwind/Swap/SwapDetails.tsx
@@ -3,34 +3,54 @@ import { formatNumber, NumberFormat } from 'utils/formatNumber'
 
 interface SwapDetailsProps {
   price?: number
+  isLoadingPrice?: boolean
   toCurrency?: string
   fromCurrency?: string
   minimumReceived?: string
+  isLoadingMinimumAmount?: boolean
   priceImpact?: string
   liqProviderFee?: string
 }
 
 export default function SwapDetails({
   price,
+  isLoadingPrice,
   toCurrency,
   fromCurrency,
-  minimumReceived
+  minimumReceived,
+  isLoadingMinimumAmount
 }: /*
   priceImpact,
   liqProviderFee
   */
 SwapDetailsProps) {
+  const minimumReceivedOutput = () => {
+    if (isLoadingMinimumAmount) return ' '
+    if (!isLoadingMinimumAmount && minimumReceived) return `${minimumReceived} ${toCurrency}`
+    return '--'
+  }
+
   return (
     <>
       <div className="flex flex-row justify-start mt-6 px-8 w-container text-sm font-bold">
         <div className="w-1/2 text-secondary-alternate">Price</div>
-        <div className="w-1/2 flex justify-end">
-          {price ? `${formatNumber(price, NumberFormat.long)} ${toCurrency}/${fromCurrency}` : '--'}
+        <div
+          className={`
+            ${isLoadingPrice && 'animate-pulse bg-primary h-4 w-36 rounded'} w-1/2 flex justify-end
+          `}
+        >
+          {price && !isLoadingPrice ? `${formatNumber(price, NumberFormat.long)} ${toCurrency}/${fromCurrency}` : ''}
         </div>
       </div>
       <div className="flex flex-row justify-start mt-2 px-8 w-container text-sm font-bold">
         <div className="w-1/2 text-secondary-alternate">Minimum Received</div>
-        <div className="w-1/2 flex justify-end">{minimumReceived ? `${minimumReceived} ${toCurrency}` : '--'}</div>
+        <div
+          className={`
+            ${isLoadingMinimumAmount && 'animate-pulse bg-primary h-4 w-36 rounded'} w-1/2 flex justify-end
+          `}
+        >
+          {minimumReceivedOutput()}
+        </div>
       </div>
 
       {/*

diff --git a/src/pages/Tailwind/Swap/SwapPanel.tsx b/src/pages/Tailwind/Swap/SwapPanel.tsx
@@ -48,13 +48,14 @@ const SwapPanel = () => {
     toAmountBalance,
     fromAmountBalance,
     price,
+    isLoadingPrice,
     toMinimumAmount,
     fromMinimumAmount,
+    isLoadingMinimumAmount,
     approve,
     allowance,
     swapToken
   } = useSwapToken(toCurrency, fromCurrency, setButtonState)
-
   const handleApprove = useCallback(async () => {
     try {
       setApproveState(ApproveButtonState.Approving)
@@ -308,9 +309,11 @@ const SwapPanel = () => {
         <CurrentButtonContent />
         <SwapDetails
           price={price}
+          isLoadingPrice={isLoadingPrice}
           toCurrency={toCurrency.symbol}
           fromCurrency={fromCurrency.symbol}
           minimumReceived={toMinimumAmount}
+          isLoadingMinimumAmount={isLoadingMinimumAmount}
         />
       </>
     )
@@ -426,7 +429,9 @@ const SwapPanel = () => {
         fromAmount={fromInputValue}
         toAmount={toInputValue}
         minimumAmount={toMinimumAmount || '0'}
+        isLoadingMinimumAmount={isLoadingMinimumAmount}
         price={price || 0}
+        isLoadingPrice={isLoadingPrice}
         onSwap={async () => {
           const txn = await swapToken(fromInputValue, txDeadline, slippage)
           if (txn) {

diff --git a/src/pages/Tailwind/Swap/modals/SwapTransactionModal.tsx b/src/pages/Tailwind/Swap/modals/SwapTransactionModal.tsx
@@ -18,7 +18,9 @@ interface SwapTransactionModalProps {
   fromAmount: string
   toAmount: string
   minimumAmount: string
+  isLoadingMinimumAmount: boolean
   price: number
+  isLoadingPrice: boolean
   onSwap: () => void
   onPriceUpdate: () => void
   onDismiss: () => void
@@ -38,7 +40,9 @@ const SwapTransactionModal = ({
   fromAmount,
   toAmount,
   minimumAmount,
+  isLoadingMinimumAmount,
   price,
+  isLoadingPrice,
   onSwap,
   onPriceUpdate,
   onDismiss,
@@ -103,9 +107,11 @@ const SwapTransactionModal = ({
         </div>
         <SwapDetails
           price={price}
+          isLoadingPrice={isLoadingPrice}
           toCurrency={toCurrency.symbol}
           fromCurrency={fromCurrency.symbol}
           minimumReceived={minimumAmount}
+          isLoadingMinimumAmount={isLoadingMinimumAmount}
         />
         <div className="bg-white p-4 pb-4">
           <PrimaryButton