Fix 6-dec tokens not being able to confirm swap (#722)

TempleDAO · Jan 13, 2023 · 5dc0207 · 5dc0207
1 parent 7a472c2
commit 5dc0207
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 34 deletions.
diff --git a/apps/dapp/src/components/Pages/Core/NewUI/HomeInput.tsx b/apps/dapp/src/components/Pages/Core/NewUI/HomeInput.tsx
@@ -153,22 +153,19 @@ export const InputWrapper = styled.div<InputWrapperProps>`
   position: relative;
   margin-bottom: 0.2rem;
   padding: 0.7rem 0.5rem;
-  background-color: ${(props) => props.theme.palette.dark};
+  background-color: ${props => props.theme.palette.dark};
   height: ${({ small }) => (small ? '3rem' : '4.5rem')};
 
-  border: 0.125rem /* 2/16 */ solid ${(props) => props.theme.palette.brand};
+  border: 0.125rem /* 2/16 */ solid ${props => props.theme.palette.brand};
   // width will be manage by layout case by case
   width: 90%;
   border-radius: 10px;
+  padding: 0.7rem 1.5rem;
 
-  ${tabletAndAbove(`
-    padding: 0.7rem 1.5rem;
-  `)}
-
-  ${(props) =>
+  ${props =>
     props.isDisabled &&
     css`
-      background-color: ${(props) => props.theme.palette.brand25};
+      background-color: ${props => props.theme.palette.brand25};
     `}
 `;
 
@@ -198,7 +195,7 @@ export const InputHint = styled.small<InputHintProps>`
   text-transform: uppercase;
   width: max-content;
 
-  ${(props) =>
+  ${props =>
     props.hasAction &&
     css`
       border-radius: 0.25em;
@@ -245,23 +242,6 @@ const Ticker = styled.p`
   font-weight: bold;
 `;
 
-const Divider = styled.div`
-  display: none;
-  position: absolute;
-  width: ${pixelsToRems(10)}rem;
-  height: 80%;
-  left: ${pixelsToRems(160)}rem;
-  top: 10%;
-  bottom: 10%;
-  background: url(${divider});
-  background-repeat: no-repeat;
-  background-size: cover;
-
-  ${phoneAndAbove(`
-    display: inline-block;
-  `)};
-`;
-
 const Suffix = styled.p<SizeProps>`
   ${theme.typography.h3};
   color: ${theme.palette.brandLight};

diff --git a/apps/dapp/src/components/TransactionSettingsModal/TransactionPreviewModal.tsx b/apps/dapp/src/components/TransactionSettingsModal/TransactionPreviewModal.tsx
@@ -1,11 +1,10 @@
 import styled from 'styled-components';
 import { Popover } from 'components/Popover';
-import { useSwapController } from 'components/Pages/Core/Trade/use-swap-controller';
-import { formatNumber, formatNumberFixedDecimals, formatToken } from 'utils/formatter';
+import { formatNumberFixedDecimals, formatToken } from 'utils/formatter';
 import { SwapReducerState } from 'components/Pages/Core/Trade/types';
 import { BigNumber, ethers } from 'ethers';
 import { ZERO } from 'utils/bigNumber';
-import { getBigNumberFromString } from 'components/Vault/utils';
+import { getBigNumberFromString, getTokenInfo } from 'components/Vault/utils';
 import { Button } from 'components/Button/Button';
 import { transparentize } from 'polished';
 
@@ -18,7 +17,7 @@ interface IProps {
 
 export const TransactionPreviewModal: React.FC<IProps> = ({ isOpen, onClose, state, handleTransaction }) => {
   // Check if swap should be disabled
-  const bigInputValue = getBigNumberFromString(state.inputValue || '0');
+  const bigInputValue = getBigNumberFromString(state.inputValue || '0', getTokenInfo(state.inputToken).decimals);
   const isButtonDisabled =
     state.isTransactionPending || state.inputTokenBalance.eq(ZERO) || bigInputValue.gt(state.inputTokenBalance);
 
@@ -57,13 +56,13 @@ export const TransactionPreviewModal: React.FC<IProps> = ({ isOpen, onClose, sta
         <SwapDetailsHeader>Swap Details</SwapDetailsHeader>
         <AmountAfterFees>
           <span>Total expected after fees:</span>
-          <span>
+          <NoWrapSpan>
             {formatToken(state.quote.returnAmount, state.outputToken, 4)} {state.outputToken}
-          </span>
+          </NoWrapSpan>
         </AmountAfterFees>
         <div>
           <span>The least you'll get at {state.slippageTolerance}% slippage:</span>
-          <span>
+          <NoWrapSpan>
             {formatToken(
               state.quote.returnAmount
                 .mul(BigNumber.from(10_000))
@@ -72,7 +71,7 @@ export const TransactionPreviewModal: React.FC<IProps> = ({ isOpen, onClose, sta
               4
             )}{' '}
             {state.outputToken}
-          </span>
+          </NoWrapSpan>
         </div>
       </SwapDetails>
       <TradeButton
@@ -113,6 +112,7 @@ const SwapDetails = styled.div`
   border: 1px solid ${({ theme }) => theme.palette.brand};
   border-radius: 0.5rem;
   box-shadow: 0 0 0.3rem 0.3rem rgba(0, 0, 0, 0.2);
+  text-align: left;
 
   div {
     font-size: 0.9rem;
@@ -135,6 +135,9 @@ const AmountAfterFees = styled.div`
   color: ${({ theme }) => theme.palette.brandLight};
   padding: 1rem 0 0.5rem 0;
 `;
+const NoWrapSpan = styled.span`
+  white-space: nowrap;
+`;
 const TradeButton = styled(Button)`
   padding: 10px;
   gap: 20px;