Merge remote-tracking branch 'origin/develop' into 2440/uni-merge

cowprotocol · Mar 24, 2022 · 625df57 · 625df57
2 parents 573e360 + 89b0cf9
commit 625df57
Show file tree

Hide file tree

Showing 5 changed files with 268 additions and 276 deletions.
diff --git a/src/custom/components/CurrencyInputPanel/CurrencyInputPanelMod.tsx b/src/custom/components/CurrencyInputPanel/CurrencyInputPanelMod.tsx
@@ -7,15 +7,15 @@ import useActiveWeb3React from 'hooks/useActiveWeb3React'
 import { darken } from 'polished'
 import { ReactNode, useCallback, useState } from 'react'
 import { Lock } from 'react-feather'
-import styled from 'styled-components/macro'
+import styled, { css } from 'styled-components/macro'
 // import { formatCurrencyAmount } from 'utils/formatCurrencyAmount'
 
 import { ReactComponent as DropDown } from 'assets/images/dropdown.svg'
 import useTheme from 'hooks/useTheme'
 import { useCurrencyBalance } from 'state/wallet/hooks'
 import { ThemedText } from 'theme'
 import { ButtonGray } from 'components/Button'
-import CurrencyLogo from 'components/CurrencyLogo'
+import CurrencyLogo, { StyledLogo } from 'components/CurrencyLogo'
 import DoubleCurrencyLogo from 'components/DoubleLogo'
 import { Input as NumericalInput } from 'components/NumericalInput'
 import { RowBetween, RowFixed } from 'components/Row'
@@ -26,7 +26,8 @@ import { FiatValue } from 'components/CurrencyInputPanel/FiatValue'
 import { WithClassName } from 'types'
 import { formatMax, formatSmart } from 'utils/format'
 import { AMOUNT_PRECISION } from 'constants/index'
-import { AuxInformationContainer } from '.' // mod
+import { FeeInformationTooltipWrapper } from 'components/swap/FeeInformationTooltip'
+import { TextWrapper } from '@src/components/HoverInlineText' // mod
 import { CurrencySearchModal } from '.' // mod
 
 export const InputPanel = styled.div<{ hideInput?: boolean }>`
@@ -64,6 +65,72 @@ export const Container = styled.div<{ hideInput: boolean; showAux?: boolean }>`
   }
 `
 
+// mod - due to circular dependencies and lazy loading
+// mod - this custom component has to be here rather than ./index.tsx
+export const AuxInformationContainer = styled(Container)<{
+  margin?: string
+  borderColor?: string
+  borderWidth?: string
+}>`
+  margin: ${({ margin = '0 auto' }) => margin};
+  border-radius: 0 0 15px 15px;
+
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+    height: auto;
+    flex-flow: column wrap;
+    justify-content: flex-end;
+    align-items: flex-end;
+  `}
+
+  > ${FeeInformationTooltipWrapper} {
+    align-items: center;
+    justify-content: space-between;
+    margin: 0 16px;
+    padding: 16px 0;
+    font-weight: 600;
+    font-size: 14px;
+    height: auto;
+
+    ${({ theme }) => theme.mediaWidth.upToSmall`
+      flex-flow: column wrap;
+      width: 100%;
+      align-items: flex-start;
+      margin: 0;
+      padding: 16px;
+    `}
+
+    > span {
+      font-size: 18px;
+      gap: 2px;
+      word-break: break-all;
+      text-align: right;
+
+      ${({ theme }) => theme.mediaWidth.upToSmall`  
+        text-align: left;
+        align-items: flex-start;
+        width: 100%;
+      `};
+    }
+
+    > span:first-child {
+      font-size: 14px;
+      display: flex;
+      align-items: center;
+      white-space: nowrap;
+
+      ${({ theme }) => theme.mediaWidth.upToSmall`
+        margin: 0 0 10px;
+      `}
+    }
+
+    > span > small {
+      opacity: 0.75;
+      font-size: 13px;
+      font-weight: 500;
+    }
+  }
+`
+
 export const CurrencySelect = styled(ButtonGray)<{ visible: boolean; selected: boolean; hideInput?: boolean }>`
   align-items: center;
   background-color: ${({ selected, theme }) => (selected ? theme.bg1 : theme.primary1)};
@@ -163,6 +230,199 @@ export const StyledNumericalInput = styled(NumericalInput)<{ $loading: boolean }
   ${loadingOpacityMixin}
 `
 
+// mod - due to circular dependencies and lazy loading
+// mod - this custom component has to be here rather than ./index.tsx
+export const Wrapper = styled.div<{ selected: boolean; showLoader: boolean }>`
+  // CSS Override
+
+  ${InputPanel} {
+    background: transparent;
+    color: ${({ theme }) => theme.currencyInput?.color};
+
+    ${({ theme }) => theme.mediaWidth.upToSmall`
+      flex-flow: column wrap;
+
+      > div > div > input {
+        width: 100%;
+        text-align: left;
+        padding: 0;
+        margin: 20px 0 8px;
+        word-break: break-all;
+      }
+    `};
+
+    &:hover {
+      color: ${({ theme }) => theme.currencyInput?.color};
+    }
+  }
+
+  ${LabelRow} {
+    color: ${({ theme }) => theme.currencyInput?.color};
+
+    span:hover {
+      color: ${({ theme }) => theme.currencyInput?.color};
+    }
+  }
+
+  ${InputRow} {
+    background: transparent;
+
+    ${({ theme }) => theme.mediaWidth.upToSmall`
+      flex-flow: column wrap;
+      padding: 1rem 1rem 0 1rem;
+    `};
+
+    > input,
+    > input::placeholder {
+      background: transparent;
+      color: inherit;
+    }
+
+    > input::placeholder {
+      opacity: 0.5;
+    }
+  }
+
+  ${StyledBalanceMax} {
+    color: ${({ theme }) => theme.primary4};
+
+    ${({ theme }) => theme.mediaWidth.upToSmall`
+      margin: 0 0 auto 0;
+    `};
+  }
+
+  ${Container} {
+    background: ${({ theme }) => (theme.currencyInput?.background ? theme.currencyInput?.background : theme.bg1)};
+    border: ${({ theme }) =>
+      theme.currencyInput?.border ? theme.currencyInput?.border : `border: 1px solid ${theme.bg2}`};
+
+    &:hover {
+      border: ${({ theme }) =>
+        theme.currencyInput?.border ? theme.currencyInput?.border : `border: 1px solid ${theme.bg2}`};
+    }
+  }
+
+  ${AuxInformationContainer} {
+    background-color: ${({ theme }) => darken(0.0, theme.bg1 || theme.bg3)};
+    border-top: none;
+
+    &:hover {
+      background-color: ${({ theme }) => darken(0.0, theme.bg1 || theme.bg3)};
+      border-top: none;
+    }
+  }
+
+  ${({ showLoader, theme }) =>
+    showLoader &&
+    css`
+      #swap-currency-output ${Container} {
+        position: relative;
+        display: inline-block;
+
+        overflow: hidden;
+        &::after {
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: 0;
+          transform: translateX(-100%);
+          background-image: linear-gradient(
+            90deg,
+            rgba(255, 255, 255, 0) 0,
+            ${theme.shimmer1} 20%,
+            ${theme.shimmer2} 60%,
+            rgba(255, 255, 255, 0)
+          );
+          animation: shimmer 2s infinite;
+          content: '';
+        }
+
+        @keyframes shimmer {
+          100% {
+            transform: translateX(100%);
+          }
+        }
+      }
+    `}
+
+  ${CurrencySelect} {
+    z-index: 2;
+    color: ${({ selected, theme }) =>
+      selected ? theme.buttonCurrencySelect.colorSelected : theme.buttonCurrencySelect.color};
+    transition: background-color 0.2s ease-in-out;
+
+    ${({ theme }) => theme.mediaWidth.upToSmall`
+      width: 100%;
+    `};
+
+    &:focus {
+      background-color: ${({ selected, theme }) => (selected ? theme.bg1 : theme.primary1)};
+    }
+    &:hover {
+      background-color: ${({ theme }) => darken(0.05, theme.primary1)};
+    }
+
+    path {
+      stroke: ${({ selected, theme }) =>
+        selected ? theme.buttonCurrencySelect.colorSelected : theme.buttonCurrencySelect.color};
+      stroke-width: 1.5px;
+    }
+  }
+
+  ${RowBetween} {
+    color: ${({ theme }) => theme.currencyInput?.color};
+
+    ${({ theme }) => theme.mediaWidth.upToSmall`
+      flex-flow: column wrap;
+    `}
+
+    > div > div > span,
+    > div {
+      color: ${({ theme }) => theme.currencyInput?.color};
+    }
+
+    // Balance Wrapper
+    > div:first-of-type {
+      ${({ theme }) => theme.mediaWidth.upToSmall`
+        margin: 10px 0 0;
+        width: 100%;
+        opacity: 0.75;
+      `}
+    }
+
+    // USD estimation
+    > div:last-of-type {
+      ${({ theme }) => theme.mediaWidth.upToSmall`
+        order: -1;
+        width: 100%;
+        text-align: left;
+        justify-content: flex-start;
+        display: flex;
+      `}
+    }
+
+    // Balance text
+    ${({ theme }) => theme.mediaWidth.upToSmall`
+      > div > div {
+        word-break: break-all;
+      }
+    `}
+  }
+
+  ${StyledLogo} {
+    background: ${({ theme }) => theme.bg1};
+  }
+
+  // Reset the cursor for the FIAT estimate & price impact
+  ${TextWrapper} {
+    &:hover,
+    + span:hover {
+      cursor: initial;
+    }
+  }
+`
+
 export interface CurrencyInputPanelProps extends WithClassName {
   value: string
   onUserInput: (value: string) => void