fix: wrap/unwrap should not show computed trade details

mr365k · May 21, 2021 · 3aaa3fe · 3aaa3fe
1 parent bc243e1
commit 3aaa3fe
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 64 deletions.
diff --git a/src/hooks/useWrapCallback.ts b/src/hooks/useWrapCallback.ts
@@ -33,11 +33,13 @@ export default function useWrapCallback(
 
   return useMemo(() => {
     if (!wethContract || !chainId || !inputCurrency || !outputCurrency) return NOT_APPLICABLE
+    const weth = WETH9[chainId]
+    if (!weth) return NOT_APPLICABLE
 
     const hasInputAmount = Boolean(inputAmount?.greaterThan('0'))
     const sufficientBalance = inputAmount && balance && !balance.lessThan(inputAmount)
 
-    if (inputCurrency.isNative && outputCurrency.equals(WETH9[chainId])) {
+    if (inputCurrency.isNative && weth.equals(outputCurrency)) {
       return {
         wrapType: WrapType.WRAP,
         execute:
@@ -53,7 +55,7 @@ export default function useWrapCallback(
             : undefined,
         inputError: sufficientBalance ? undefined : hasInputAmount ? 'Insufficient ETH balance' : 'Enter ETH amount',
       }
-    } else if (WETH9[chainId].equals(inputCurrency) && outputCurrency.isNative) {
+    } else if (weth.equals(inputCurrency) && outputCurrency.isNative) {
       return {
         wrapType: WrapType.UNWRAP,
         execute:

diff --git a/src/pages/Swap/index.tsx b/src/pages/Swap/index.tsx
@@ -122,6 +122,7 @@ export default function Swap({ history }: RouteComponentProps) {
     inputError: wrapInputError,
   } = useWrapCallback(currencies[Field.INPUT], currencies[Field.OUTPUT], typedValue)
   const showWrap: boolean = wrapType !== WrapType.NOT_APPLICABLE
+  console.log(showWrap)
   const { address: recipientAddress } = useENSAddress(recipient)
 
   const parsedAmounts = useMemo(
@@ -428,70 +429,72 @@ export default function Swap({ history }: RouteComponentProps) {
               </>
             ) : null}
 
-            <Row style={{ justifyContent: !trade ? 'center' : 'space-between' }}>
-              <RowFixed>
-                {[V3TradeState.VALID, V3TradeState.SYNCING, V3TradeState.NO_ROUTE_FOUND].includes(v3TradeState) &&
-                  (toggledVersion === Version.v3 && isTradeBetter(v3Trade, v2Trade) ? (
-                    <BetterTradeLink version={Version.v2} otherTradeNonexistent={!v3Trade} />
-                  ) : toggledVersion === Version.v2 && isTradeBetter(v2Trade, v3Trade) ? (
-                    <BetterTradeLink version={Version.v3} otherTradeNonexistent={!v2Trade} />
-                  ) : (
-                    toggledVersion === Version.v2 && (
-                      <ButtonGray
-                        width="fit-content"
-                        padding="0.1rem 0.5rem 0.1rem 0.35rem"
-                        as={Link}
-                        to="/swap"
-                        style={{
-                          display: 'flex',
-                          justifyContent: 'space-between',
-                          alignItems: 'center',
-                          height: '24px',
-                          opacity: 0.8,
-                          lineHeight: '120%',
-                          marginLeft: '0.75rem',
-                        }}
-                      >
-                        <ArrowLeft color={theme.text3} size={12} /> &nbsp;
-                        <TYPE.main style={{ lineHeight: '120%' }} fontSize={12}>
-                          <HideSmall>Back to </HideSmall>V3
-                        </TYPE.main>
-                      </ButtonGray>
-                    )
-                  ))}
-
-                {toggledVersion === Version.v3 && trade && isTradeBetter(v2Trade, v3Trade) && (
-                  <ButtonGray
-                    width="fit-content"
-                    padding="0.1rem 0.5rem"
-                    disabled
-                    style={{
-                      display: 'flex',
-                      justifyContent: 'space-between',
-                      height: '24px',
-                      opacity: 0.4,
-                      marginLeft: '0.25rem',
-                    }}
-                  >
-                    <TYPE.black fontSize={12}>V3</TYPE.black>
-                  </ButtonGray>
-                )}
-              </RowFixed>
-              {trade ? (
+            {showWrap ? null : (
+              <Row style={{ justifyContent: !trade ? 'center' : 'space-between' }}>
                 <RowFixed>
-                  <TradePrice
-                    price={trade.executionPrice}
-                    showInverted={showInverted}
-                    setShowInverted={setShowInverted}
-                  />
-                  <MouseoverTooltipContent
-                    content={<AdvancedSwapDetails trade={trade} allowedSlippage={allowedSlippage} />}
-                  >
-                    <StyledInfo />
-                  </MouseoverTooltipContent>
+                  {[V3TradeState.VALID, V3TradeState.SYNCING, V3TradeState.NO_ROUTE_FOUND].includes(v3TradeState) &&
+                    (toggledVersion === Version.v3 && isTradeBetter(v3Trade, v2Trade) ? (
+                      <BetterTradeLink version={Version.v2} otherTradeNonexistent={!v3Trade} />
+                    ) : toggledVersion === Version.v2 && isTradeBetter(v2Trade, v3Trade) ? (
+                      <BetterTradeLink version={Version.v3} otherTradeNonexistent={!v2Trade} />
+                    ) : (
+                      toggledVersion === Version.v2 && (
+                        <ButtonGray
+                          width="fit-content"
+                          padding="0.1rem 0.5rem 0.1rem 0.35rem"
+                          as={Link}
+                          to="/swap"
+                          style={{
+                            display: 'flex',
+                            justifyContent: 'space-between',
+                            alignItems: 'center',
+                            height: '24px',
+                            opacity: 0.8,
+                            lineHeight: '120%',
+                            marginLeft: '0.75rem',
+                          }}
+                        >
+                          <ArrowLeft color={theme.text3} size={12} /> &nbsp;
+                          <TYPE.main style={{ lineHeight: '120%' }} fontSize={12}>
+                            <HideSmall>Back to </HideSmall>V3
+                          </TYPE.main>
+                        </ButtonGray>
+                      )
+                    ))}
+
+                  {toggledVersion === Version.v3 && trade && isTradeBetter(v2Trade, v3Trade) && (
+                    <ButtonGray
+                      width="fit-content"
+                      padding="0.1rem 0.5rem"
+                      disabled
+                      style={{
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        height: '24px',
+                        opacity: 0.4,
+                        marginLeft: '0.25rem',
+                      }}
+                    >
+                      <TYPE.black fontSize={12}>V3</TYPE.black>
+                    </ButtonGray>
+                  )}
                 </RowFixed>
-              ) : null}
-            </Row>
+                {trade ? (
+                  <RowFixed>
+                    <TradePrice
+                      price={trade.executionPrice}
+                      showInverted={showInverted}
+                      setShowInverted={setShowInverted}
+                    />
+                    <MouseoverTooltipContent
+                      content={<AdvancedSwapDetails trade={trade} allowedSlippage={allowedSlippage} />}
+                    >
+                      <StyledInfo />
+                    </MouseoverTooltipContent>
+                  </RowFixed>
+                ) : null}
+              </Row>
+            )}
 
             <BottomGrouping>
               {swapIsUnsupported ? (