Merge pull request #66 from jediswaplabs/iamoskvin/add-liquidity

Add liquidity page
jediswaplabs · Nov 17, 2023 · 7595436 · 7595436
2 parents dce06a9 + 868eceb
commit 7595436
Show file tree

Hide file tree

Showing 15 changed files with 97 additions and 81 deletions.
diff --git a/src/components/Card/index.tsx b/src/components/Card/index.tsx
@@ -10,8 +10,9 @@ const Card = styled(Box)<{ width?: string; padding?: string; border?: string; $b
 export default Card
 
 export const LightCard = styled(Card)`
-  border: 1px solid ${({ theme }) => theme.surface3};
-  background-color: ${({ theme }) => theme.surface2};
+  border-radius: 8px;
+  background: rgba(196, 196, 196, 0.01);
+  box-shadow: 0px 0.76977px 30.79088px 0px rgba(227, 222, 255, 0.20) inset, 0px 3.07909px 13.8559px 0px rgba(154, 146, 210, 0.30) inset, 0px 75.43767px 76.9772px -36.94907px rgba(202, 172, 255, 0.30) inset, 0px -63.12132px 52.3445px -49.26542px rgba(96, 68, 144, 0.30) inset;
 `
 
 export const GrayCard = styled(Card)`
@@ -28,8 +29,7 @@ export const DarkCard = styled(Card)`
 `
 
 export const OutlineCard = styled(Card)`
-  border: 1px solid ${({ theme }) => theme.surface3};
-  background-color: ${({ theme }) => theme.surface2};
+  border: 1px solid ${({ theme }) => theme.jediGreyBorder};
 `
 
 export const YellowCard = styled(Card)`
@@ -39,7 +39,7 @@ export const YellowCard = styled(Card)`
 `
 
 export const BlueCard = styled(Card)`
-  background-color: ${({ theme }) => theme.accent2};
-  color: ${({ theme }) => theme.accent1};
+  background-color: ${({ theme }) => theme.jediNavyBlue};
+  color: ${({ theme }) => theme.jediWhite};
   border-radius: 12px;
 `
diff --git a/src/components/CurrencyInputPanel/index.tsx b/src/components/CurrencyInputPanel/index.tsx
@@ -28,7 +28,7 @@ const InputPanel = styled.div<{ hideInput?: boolean }>`
   ${flexColumnNoWrap};
   position: relative;
   border-radius: ${({ hideInput }) => (hideInput ? '16px' : '20px')};
-  background-color: ${({ theme, hideInput }) => (hideInput ? 'transparent' : theme.surface2)};
+  // background-color: ${({ theme, hideInput }) => (hideInput ? 'transparent' : theme.surface2)};
 
   z-index: 1;
   width: ${({ hideInput }) => (hideInput ? '100%' : 'initial')};
@@ -37,10 +37,13 @@ const InputPanel = styled.div<{ hideInput?: boolean }>`
 `;
 
 const Container = styled.div<{ hideInput: boolean; disabled: boolean }>`
-  border-radius: ${({ hideInput }) => (hideInput ? '16px' : '20px')};
+  border-radius: ${({ hideInput }) => (hideInput ? '8px' : '8px')};
   border: 1px solid ${({ theme }) => theme.surface3};
-  background-color: ${({ theme }) => theme.surface2};
-  width: ${({ hideInput }) => (hideInput ? '100%' : 'initial')};
+  // background-color: ${({ theme }) => theme.surface2};
+  background-color: rgba(196, 196, 196, 0.01);
+  // background-color: #3e1371;
+  box-shadow: 0px 0.76977px 30.79088px 0px rgba(227, 222, 255, 0.20) inset, 0px 3.07909px 13.8559px 0px rgba(154, 146, 210, 0.30) inset, 0px 75.43767px 76.9772px -36.94907px rgba(202, 172, 255, 0.30) inset, 0px -63.12132px 52.3445px -49.26542px rgba(96, 68, 144, 0.30) inset;
+  width: ${({ hideInput }) => (hideInput ? '90%' : 'initial')};
   ${({ theme, hideInput, disabled }) => !disabled
     && `
     :focus,
@@ -58,7 +61,8 @@ const CurrencySelect = styled(ButtonGray)<{
   pointerEvents?: string
 }>`
   align-items: center;
-  background-color: ${({ selected, theme }) => (selected ? theme.surface1 : theme.accent1)};
+  // background-color: ${({ selected, theme }) => (selected ? theme.surface1 : theme.accent1)};
+  background-color: ${({theme}) => theme.jediNavyBlue};
   opacity: ${({ disabled }) => (!disabled ? 1 : 0.4)};
   box-shadow: ${({ theme }) => theme.deprecated_shallowShadow};
   color: ${({ selected, theme }) => (selected ? theme.neutral1 : theme.white)};
@@ -82,7 +86,7 @@ const InputRow = styled.div<{ selected: boolean }>`
   ${flexRowNoWrap};
   align-items: center;
   justify-content: space-between;
-  padding: ${({ selected }) => (selected ? ' 1rem 1rem 0.75rem 1rem' : '1rem 1rem 1rem 1rem')};
+  padding: ${({ selected }) => (selected ? ' 1rem 1rem 0.75rem 0' : '1rem 1rem 1rem 0')};
 `;
 
 const LabelRow = styled.div`
@@ -130,14 +134,14 @@ const StyledTokenName = styled.span<{ active?: boolean }>`
 
 const StyledBalanceMax = styled.button<{ disabled?: boolean }>`
   background-color: transparent;
-  background-color: ${({ theme }) => theme.accent2};
-  border: none;
-  border-radius: 12px;
-  color: ${({ theme }) => theme.accent1};
+  // background-color: ${({ theme }) => theme.accent2};
+  border: 1px solid #444;
+  border-radius: 4px;
+  color: ${({ theme }) => theme.jediWhite};
   cursor: pointer;
   font-size: 11px;
   font-weight: 535;
-  margin-left: 0.25rem;
+  margin-right: 0.5rem;
   opacity: ${({ disabled }) => (!disabled ? 1 : 0.4)};
   padding: 4px 6px;
   pointer-events: ${({ disabled }) => (!disabled ? 'initial' : 'none')};
@@ -179,7 +183,8 @@ interface CurrencyInputPanelProps {
   disableNonToken?: boolean
   renderBalance?: (amount: CurrencyAmount<Currency>) => ReactNode
   locked?: boolean
-  loading?: boolean
+  loading?: boolean,
+  hideShadow?: boolean,
 }
 
 export default function CurrencyInputPanel({ value,
@@ -200,6 +205,7 @@ export default function CurrencyInputPanel({ value,
   hideInput = false,
   locked = false,
   loading = false,
+  hideShadow = false,
   ...rest }: CurrencyInputPanelProps) {
   const [modalOpen, setModalOpen] = useState(false);
   const { account, chainId } = useWeb3React();
@@ -212,21 +218,12 @@ export default function CurrencyInputPanel({ value,
 
   const chainAllowed = isSupportedChain(chainId);
 
+  const containerStyles = hideShadow ? {boxShadow: 'none'} : {};
   return (
     <InputPanel id={id} hideInput={hideInput} {...rest}>
       {!locked && (
-        <Container hideInput={hideInput} disabled={!chainAllowed}>
+        <Container hideInput={hideInput} disabled={!chainAllowed} style={containerStyles}>
           <InputRow style={hideInput ? { padding: '0', borderRadius: '8px' } : {}} selected={!onCurrencySelect}>
-            {!hideInput && (
-              <StyledNumericalInput
-                className="token-amount-input"
-                value={value}
-                onUserInput={onUserInput}
-                disabled={!chainAllowed}
-                $loading={loading}
-              />
-            )}
-
             <StyledPrefetchBalancesWrapper shouldFetchOnAccountUpdate={modalOpen} $fullWidth={hideInput}>
               <CurrencySelect
                 disabled={!chainAllowed}
@@ -271,27 +268,24 @@ export default function CurrencyInputPanel({ value,
                 </Aligner>
               </CurrencySelect>
             </StyledPrefetchBalancesWrapper>
+            {!hideInput && (
+              <div>
+                <StyledNumericalInput
+                  className="token-amount-input"
+                  value={value}
+                  onUserInput={onUserInput}
+                  disabled={!chainAllowed}
+                  $loading={loading}
+                  style={{width: 'auto', textAlign: 'right'}}
+                />
+              </div>
+            )}
           </InputRow>
           {Boolean(!hideInput && !hideBalance && currency) && (
             <FiatRow>
               <RowBetween>
-                <LoadingOpacityContainer $loading={loading}>
-                  {fiatValue && <FiatValue fiatValue={fiatValue} />}
-                </LoadingOpacityContainer>
                 {account && (
                   <RowFixed style={{ height: '17px' }}>
-                    <ThemedText.DeprecatedBody
-                      onClick={onMax}
-                      color={theme.neutral3}
-                      fontWeight={535}
-                      fontSize={14}
-                      style={{ display: 'inline', cursor: 'pointer' }}
-                    >
-                      {Boolean(!hideBalance && currency && selectedCurrencyBalance)
-                          && (renderBalance?.(selectedCurrencyBalance as CurrencyAmount<Currency>) || (
-                            <Trans>Balance: {formatCurrencyAmount(selectedCurrencyBalance, 4)}</Trans>
-                          ))}
-                    </ThemedText.DeprecatedBody>
                     {Boolean(showMaxButton && selectedCurrencyBalance) && (
                       <TraceEvent
                         events={[BrowserEvent.onClick]}
@@ -303,8 +297,23 @@ export default function CurrencyInputPanel({ value,
                         </StyledBalanceMax>
                       </TraceEvent>
                     )}
+                    <ThemedText.DeprecatedBody
+                      onClick={onMax}
+                      color={theme.neutral3}
+                      fontWeight={535}
+                      fontSize={14}
+                      style={{ display: 'inline', cursor: 'pointer' }}
+                    >
+                      {Boolean(!hideBalance && currency && selectedCurrencyBalance)
+                          && (renderBalance?.(selectedCurrencyBalance as CurrencyAmount<Currency>) || (
+                            <Trans>Bal: {formatCurrencyAmount(selectedCurrencyBalance, 4)}</Trans>
+                          ))}
+                    </ThemedText.DeprecatedBody>
                   </RowFixed>
                 )}
+              <LoadingOpacityContainer $loading={loading}>
+                {fiatValue && <FiatValue fiatValue={fiatValue} />}
+              </LoadingOpacityContainer>
               </RowBetween>
             </FiatRow>
           )}

diff --git a/src/components/FeeSelector/FeeOption.tsx b/src/components/FeeSelector/FeeOption.tsx
@@ -31,7 +31,7 @@ interface FeeOptionProps {
 
 export function FeeOption({ feeAmount, active, poolState, distributions, onClick }: FeeOptionProps) {
   return (
-    <ButtonRadioChecked active={active} onClick={onClick}>
+    <ButtonRadioChecked active={active} onClick={onClick} style={{ border: '1px solid #444', borderRadius: '8px'}}>
       <AutoColumn gap="sm" justify="flex-start">
         <AutoColumn justify="flex-start" gap="6px">
           <ResponsiveText>

diff --git a/src/components/FeeSelector/FeeTierPercentageBadge.tsx b/src/components/FeeSelector/FeeTierPercentageBadge.tsx
@@ -16,7 +16,7 @@ export function FeeTierPercentageBadge({
   poolState: PoolState
 }) {
   return (
-    <Badge>
+    <Badge style={{backgroundColor: '#444', borderRadius: '4px', padding: '2px'}}>
       <ThemedText.DeprecatedLabel fontSize={10}>
         {!distributions || poolState === PoolState.NOT_EXISTS || poolState === PoolState.INVALID ? (
           <Trans>Not created</Trans>

diff --git a/src/components/FeeSelector/index.tsx b/src/components/FeeSelector/index.tsx
@@ -152,7 +152,7 @@ export default function FeeSelector({
               {!feeAmount ? (
                 <>
                   <ThemedText.DeprecatedLabel>
-                    <Trans>Fee tier</Trans>
+                    <Trans>Select Fee tier</Trans>
                   </ThemedText.DeprecatedLabel>
                   <ThemedText.DeprecatedMain fontWeight={485} fontSize="12px" textAlign="left">
                     <Trans>The % you will earn in fees.</Trans>
@@ -163,7 +163,7 @@ export default function FeeSelector({
                   <ThemedText.DeprecatedLabel className="selected-fee-label">
                     <Trans>{FEE_AMOUNT_DETAIL[feeAmount].label}% fee tier</Trans>
                   </ThemedText.DeprecatedLabel>
-                  <Box style={{ width: 'fit-content', marginTop: '8px' }} className="selected-fee-percentage">
+                  <Box style={{ width: 'fit-content', marginTop: '8px', backgroundColor: '#444', borderRadius: '4px' }} className="selected-fee-percentage">
                     {distributions && (
                       <FeeTierPercentageBadge
                         distributions={distributions}

diff --git a/src/components/InputStepCounter/InputStepCounter.tsx b/src/components/InputStepCounter/InputStepCounter.tsx
@@ -31,6 +31,8 @@ const InputRow = styled.div`
 const SmallButton = styled(ButtonGray)`
   border-radius: 8px;
   padding: 4px;
+  background-color: transparent;
+  border: 1px solid #444;
 `
 
 const FocusedOutlineCard = styled(OutlineCard)<{ active?: boolean; pulsing?: boolean }>`

diff --git a/src/components/LiquidityChartRangeInput/Zoom.tsx b/src/components/LiquidityChartRangeInput/Zoom.tsx
@@ -7,7 +7,7 @@ import styled from 'styled-components'
 import { ZoomLevels } from './types'
 
 const Wrapper = styled.div<{ count: number }>`
-  display: grid;
+  display: none;
   grid-template-columns: repeat(${({ count }) => count.toString()}, 1fr);
   grid-gap: 6px;
 

diff --git a/src/components/NavigationTabs/index.tsx b/src/components/NavigationTabs/index.tsx
@@ -102,7 +102,7 @@ export function AddRemoveTabs({
           }}
           flex={children ? '1' : undefined}
         >
-          <StyledArrowLeft stroke={theme.neutral2} />
+          <StyledArrowLeft stroke={theme.jediWhite} />
         </StyledLink>
         <AddRemoveTitleText textAlign={children ? 'start' : 'center'}>
           {creating ? (

diff --git a/src/components/RateToggle/index.tsx b/src/components/RateToggle/index.tsx
@@ -21,10 +21,10 @@ export default function RateToggle({
   return tokenA && tokenB ? (
     <div style={{ width: 'fit-content', display: 'flex', alignItems: 'center' }} onClick={handleRateToggle}>
       <ToggleWrapper width="fit-content">
-        <ToggleElement isActive={isSorted} fontSize="12px">
+        <ToggleElement isActive={isSorted} fontSize="12px" style={{borderRadius: '4px 0 0 4px'}}>
           <Trans>{isSorted ? currencyA.symbol : currencyB.symbol}</Trans>
         </ToggleElement>
-        <ToggleElement isActive={!isSorted} fontSize="12px">
+        <ToggleElement isActive={!isSorted} fontSize="12px" style={{borderRadius: '0 4px 4px 0'}}>
           <Trans>{isSorted ? currencyB.symbol : currencyA.symbol}</Trans>
         </ToggleElement>
       </ToggleWrapper>

diff --git a/src/components/Toggle/MultiToggle.tsx b/src/components/Toggle/MultiToggle.tsx
@@ -4,10 +4,10 @@ export const ToggleWrapper = styled.button<{ width?: string }>`
   display: flex;
   align-items: center;
   width: ${({ width }) => width ?? '100%'};
-  padding: 1px;
+  padding: 0;
   background: ${({ theme }) => theme.surface2};
   border-radius: 8px;
-  border: ${({ theme }) => '1px solid ' + theme.surface3};
+  border: none;
   cursor: pointer;
   outline: none;
 `
@@ -17,11 +17,12 @@ export const ToggleElement = styled.span<{ isActive?: boolean; fontSize?: string
   align-items: center;
   width: 100%;
   padding: 4px 0.5rem;
-  border-radius: 6px;
+  border-radius: 4px;
   justify-content: center;
   height: 100%;
-  background: ${({ theme, isActive }) => (isActive ? theme.surface1 : 'none')};
-  color: ${({ theme, isActive }) => (isActive ? theme.neutral1 : theme.neutral3)};
+  background: ${({ theme, isActive }) => (isActive ? theme.jediWhite : '#572c95')};
+  box-shadow: 0px 0.76977px 30.79088px 0px rgba(227, 222, 255, 0.20) inset, 0px 3.07909px 13.8559px 0px rgba(154, 146, 210, 0.30) inset;
+  color: ${({ theme, isActive }) => (isActive ? theme.jediPink : theme.jediWhite)};
   font-size: ${({ fontSize }) => fontSize ?? '1rem'};
   font-weight: 535;
   white-space: nowrap;

diff --git a/src/pages/AddLiquidity/index.tsx b/src/pages/AddLiquidity/index.tsx
@@ -28,7 +28,7 @@ import { ThemedText } from 'theme/components';
 import { addressesAreEquivalent } from 'utils/addressesAreEquivalent';
 import { WrongChainError } from 'utils/errors';
 import { ButtonError, ButtonLight, ButtonPrimary, ButtonText } from '../../components/Button';
-import { BlueCard, OutlineCard, YellowCard } from '../../components/Card';
+import { BlueCard, LightCard, OutlineCard, YellowCard } from '../../components/Card';
 import { AutoColumn } from '../../components/Column';
 import CurrencyInputPanel from '../../components/CurrencyInputPanel';
 import FeeSelector from '../../components/FeeSelector';
@@ -618,6 +618,7 @@ function AddLiquidity() {
                           currency={currencies[Field.CURRENCY_A] ?? null}
                           id="add-liquidity-input-tokena"
                           showCommonBases
+                          hideShadow
                         />
 
                         <CurrencyInputPanel
@@ -632,6 +633,7 @@ function AddLiquidity() {
                           currency={currencies[Field.CURRENCY_B] ?? null}
                           id="add-liquidity-input-tokenb"
                           showCommonBases
+                          hideShadow
                         />
                       </RowBetween>
 
@@ -689,7 +691,20 @@ function AddLiquidity() {
                         </RowFixed>
                       )}
                     </RowBetween>
-
+                    <LiquidityChartRangeInput
+                          currencyA={baseCurrency ?? undefined}
+                          currencyB={quoteCurrency ?? undefined}
+                          feeAmount={feeAmount}
+                          ticksAtLimit={ticksAtLimit}
+                          price={
+                            price ? parseFloat((invertPrice ? price.invert() : price).toSignificant(8)) : undefined
+                          }
+                          priceLower={priceLower}
+                          priceUpper={priceUpper}
+                          onLeftRangeInput={onLeftRangeInput}
+                          onRightRangeInput={onRightRangeInput}
+                          interactive={!hasExistingPosition}
+                        />
                     <RangeSelector
                       priceLower={priceLower}
                       priceUpper={priceUpper}
@@ -756,20 +771,6 @@ function AddLiquidity() {
                             </Trans>
                           </AutoColumn>
                         )}
-                        <LiquidityChartRangeInput
-                          currencyA={baseCurrency ?? undefined}
-                          currencyB={quoteCurrency ?? undefined}
-                          feeAmount={feeAmount}
-                          ticksAtLimit={ticksAtLimit}
-                          price={
-                            price ? parseFloat((invertPrice ? price.invert() : price).toSignificant(8)) : undefined
-                          }
-                          priceLower={priceLower}
-                          priceUpper={priceUpper}
-                          onLeftRangeInput={onLeftRangeInput}
-                          onRightRangeInput={onRightRangeInput}
-                          interactive={!hasExistingPosition}
-                        />
                       </>
                     ) : (
                       <AutoColumn gap="md">
@@ -796,16 +797,15 @@ function AddLiquidity() {
                             </ThemedText.DeprecatedBody>
                           </BlueCard>
                         )}
-                        <OutlineCard padding="12px">
+                        <LightCard padding="12px">
                           <StyledInput
                             className="start-price-input"
                             value={startPriceTypedValue}
                             onUserInput={onStartPriceInput}
                           />
-                        </OutlineCard>
+                        </LightCard>
                         <RowBetween
                           style={{
-                            backgroundColor: theme.surface1,
                             padding: '12px',
                             borderRadius: '12px',
                           }}