Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Liquidity Page #81

Merged
merged 3 commits into from
Nov 26, 2023
Merged

Add Liquidity Page #81

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
88b2cfc
Styling of add liquidity page
Ishagoyal Nov 20, 2023
3bf0139
Styling of add liquidity page when no pools initialized
Ishagoyal Nov 21, 2023
d8e7f56
Merge branch 'retroboy/swap-ui' into isha/feature/add-liquidity-page
Ishagoyal Nov 25, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 7 additions & 9 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,6 @@
"npm.packageManager": "yarn",
"typescript.updateImportsOnFileMove.enabled": "always",
"javascript.updateImportsOnFileMove.enabled": "always",
"editor.formatOnSaveMode": "file",
"editor.tabCompletion": "on",
"editor.tabSize": 2,
"editor.inlineSuggest.enabled": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.formatOnPaste": false,
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
Expand All @@ -18,5 +11,10 @@
"files.eol": "\n",
"eslint.enable": true,
"eslint.debug": true,
"prettier.trailingComma": "none",
}
"extensions.disabled": [
"ms-vscode.jscs",
"dbaeumer.vscode-eslint",
"esbenp.prettier-vscode",
"rvest.vs-code-prettier-eslint"
]
}
11 changes: 5 additions & 6 deletions src/components/Button/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ type BaseButtonProps = {
altDisabledStyle?: boolean
} & ButtonProps

export const BaseButton = styled(RebassButton)<BaseButtonProps>`
export const BaseButton = styled(RebassButton) <BaseButtonProps>`
padding: ${({ padding }) => padding ?? '16px'};
width: ${({ width }) => width ?? '100%'};
line-height: 24px;
Expand Down Expand Up @@ -312,8 +312,7 @@ export function ButtonDropdownLight({ disabled = false, children, ...rest }: { d
}

const ActiveOutlined = styled(ButtonOutlined)`
border: 1px solid;
border-color: ${({ theme }) => theme.accent1};
border: ${({ theme }) => `1px solid ${theme.jediBlue}`} !important ;
`;

const Circle = styled.div`
Expand Down Expand Up @@ -353,9 +352,9 @@ export function ButtonRadioChecked({ active = false, children, ...rest }: { acti
<RowBetween>
{children}
<CheckboxWrapper>
<Circle>
{/* <Circle>
<ResponsiveCheck size={13} stroke={theme.white} />
</Circle>
</Circle> */}
</CheckboxWrapper>
</RowBetween>
</ActiveOutlined>
Expand Down Expand Up @@ -466,7 +465,7 @@ const BaseThemeButton = styled.button<BaseThemeButtonProps>`
}
`;

interface ThemeButtonProps extends React.ComponentPropsWithoutRef<'button'>, BaseThemeButtonProps {}
interface ThemeButtonProps extends React.ComponentPropsWithoutRef<'button'>, BaseThemeButtonProps { }
type ThemeButtonRef = HTMLButtonElement

export const ThemeButton = forwardRef<ThemeButtonRef, ThemeButtonProps>((
Expand Down
146 changes: 76 additions & 70 deletions src/components/CurrencyInputPanel/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,28 @@
import { Trans } from '@lingui/macro';
import { BrowserEvent, InterfaceElementName, SwapEventName } from '@uniswap/analytics-events';
import { Currency, CurrencyAmount } from '@uniswap/sdk-core';
import { Pair } from '@uniswap/v2-sdk';
import { useWeb3React } from '@web3-react/core';
import { darken } from 'polished';
import { ReactNode, useCallback, useState } from 'react';
import styled, { useTheme } from 'styled-components';
import { Trans } from '@lingui/macro'
import { BrowserEvent, InterfaceElementName, SwapEventName } from '@uniswap/analytics-events'
import { Currency, CurrencyAmount } from '@uniswap/sdk-core'
import { Pair } from '@uniswap/v2-sdk'
import { useWeb3React } from '@web3-react/core'
import { darken } from 'polished'
import { ReactNode, useCallback, useState } from 'react'
import styled, { useTheme } from 'styled-components'

import { TraceEvent } from 'analytics';
import { LoadingOpacityContainer, loadingOpacityMixin } from 'components/Loader/styled';
import PrefetchBalancesWrapper from 'components/PrefetchBalancesWrapper/PrefetchBalancesWrapper';
import { isSupportedChain } from 'constants/chains';
import { ThemedText } from 'theme/components';
import { flexColumnNoWrap, flexRowNoWrap } from 'theme/styles';
import { formatCurrencyAmount } from 'utils/formatCurrencyAmount';
import { ReactComponent as DropDown } from '../../assets/images/dropdown.svg';
import { useCurrencyBalance } from '../../state/connection/hooks';
import { ButtonGray } from '../Button';
import DoubleCurrencyLogo from '../DoubleLogo';
import CurrencyLogo from '../Logo/CurrencyLogo';
import { Input as NumericalInput } from '../NumericalInput';
import { RowBetween, RowFixed } from '../Row';
import CurrencySearchModal from '../SearchModal/CurrencySearchModal';
import { FiatValue } from './FiatValue';
import { TraceEvent } from 'analytics'
import { LoadingOpacityContainer, loadingOpacityMixin } from 'components/Loader/styled'
import PrefetchBalancesWrapper from 'components/PrefetchBalancesWrapper/PrefetchBalancesWrapper'
import { isSupportedChain } from 'constants/chains'
import { ThemedText } from 'theme/components'
import { flexColumnNoWrap, flexRowNoWrap } from 'theme/styles'
import { formatCurrencyAmount } from 'utils/formatCurrencyAmount'
import { ReactComponent as DropDown } from '../../assets/images/dropdown.svg'
import { useCurrencyBalance } from '../../state/connection/hooks'
import { ButtonGray } from '../Button'
import DoubleCurrencyLogo from '../DoubleLogo'
import CurrencyLogo from '../Logo/CurrencyLogo'
import { Input as NumericalInput } from '../NumericalInput'
import { RowBetween, RowFixed } from '../Row'
import CurrencySearchModal from '../SearchModal/CurrencySearchModal'
import { FiatValue } from './FiatValue'

const InputPanel = styled.div<{ hideInput?: boolean }>`
${flexColumnNoWrap};
Expand All @@ -34,24 +34,28 @@ const InputPanel = styled.div<{ hideInput?: boolean }>`
width: ${({ hideInput }) => (hideInput ? '100%' : 'initial')};
transition: height 1s ease;
will-change: height;
`;
`

const Container = styled.div<{ hideInput: boolean; disabled: boolean }>`
border-radius: ${({ hideInput }) => (hideInput ? '8px' : '8px')};
border: 1px solid ${({ theme }) => theme.surface3};
// 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;
box-shadow: 0px 0.76977px 30.79088px 0px rgba(227, 222, 255, 0.2) inset,
0px 3.07909px 13.8559px 0px rgba(154, 146, 210, 0.3) inset,
0px 75.43767px 76.9772px -36.94907px rgba(202, 172, 255, 0.3) inset,
0px -63.12132px 52.3445px -49.26542px rgba(96, 68, 144, 0.3) inset;
width: ${({ hideInput }) => (hideInput ? '90%' : 'initial')};
${({ theme, hideInput, disabled }) => !disabled
&& `
${({ theme, hideInput, disabled }) =>
!disabled &&
`
:focus,
:hover {
border: 1px solid ${hideInput ? ' transparent' : theme.surface2};
}
`}
`;
`

const CurrencySelect = styled(ButtonGray)<{
visible: boolean
Expand All @@ -62,7 +66,7 @@ const CurrencySelect = styled(ButtonGray)<{
}>`
align-items: center;
// background-color: ${({ selected, theme }) => (selected ? theme.surface1 : theme.accent1)};
background-color: ${({theme}) => theme.jediNavyBlue};
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)};
Expand All @@ -80,14 +84,14 @@ const CurrencySelect = styled(ButtonGray)<{
margin-left: ${({ hideInput }) => (hideInput ? '0' : '12px')};
visibility: ${({ visible }) => (visible ? 'visible' : 'hidden')};
${({ pointerEvents }) => pointerEvents && 'pointer-events: none'}
`;
`

const InputRow = styled.div<{ selected: boolean }>`
${flexRowNoWrap};
align-items: center;
justify-content: space-between;
padding: ${({ selected }) => (selected ? ' 1rem 1rem 0.75rem 0' : '1rem 1rem 1rem 0')};
`;
`

const LabelRow = styled.div`
${flexRowNoWrap};
Expand All @@ -100,13 +104,13 @@ const LabelRow = styled.div`
cursor: pointer;
color: ${({ theme }) => darken(0.2, theme.neutral2)};
}
`;
`

const FiatRow = styled(LabelRow)`
justify-content: flex-end;
padding: 0px 1rem 0.75rem;
height: 32px;
`;
`

// note the line height 0 ensures even if we change font/font-size it doesn't break centering
const Aligner = styled.span`
Expand All @@ -115,7 +119,7 @@ const Aligner = styled.span`
justify-content: space-between;
width: 100%;
line-height: 0px;
`;
`

const StyledDropDown = styled(DropDown)<{ selected: boolean }>`
margin: 0 0.25rem 0 0.35rem;
Expand All @@ -125,12 +129,14 @@ const StyledDropDown = styled(DropDown)<{ selected: boolean }>`
stroke: ${({ selected, theme }) => (selected ? theme.neutral1 : theme.white)};
stroke-width: 1.5px;
}
`;
`

const StyledTokenName = styled.span<{ active?: boolean }>`
${({ active }) => (active ? ' margin: 0 0.25rem 0 0.25rem;' : ' margin: 0 0.25rem 0 0.25rem;')}
font-size: 20px;
`;
font-size: 14px;
font-weight: 700;
font-family: 'DM Sans';
`

const StyledBalanceMax = styled.button<{ disabled?: boolean }>`
background-color: transparent;
Expand All @@ -153,16 +159,16 @@ const StyledBalanceMax = styled.button<{ disabled?: boolean }>`
:focus {
outline: none;
}
`;
`

const StyledNumericalInput = styled(NumericalInput)<{ $loading: boolean }>`
${loadingOpacityMixin};
text-align: left;
`;
`

const StyledPrefetchBalancesWrapper = styled(PrefetchBalancesWrapper)<{ $fullWidth: boolean }>`
width: ${({ $fullWidth }) => ($fullWidth ? '100%' : 'auto')};
`;
`

interface CurrencyInputPanelProps {
value: string
Expand All @@ -183,11 +189,12 @@ interface CurrencyInputPanelProps {
disableNonToken?: boolean
renderBalance?: (amount: CurrencyAmount<Currency>) => ReactNode
locked?: boolean
loading?: boolean,
hideShadow?: boolean,
loading?: boolean
hideShadow?: boolean
}

export default function CurrencyInputPanel({ value,
export default function CurrencyInputPanel({
value,
onUserInput,
onMax,
showMaxButton,
Expand All @@ -206,19 +213,20 @@ export default function CurrencyInputPanel({ value,
locked = false,
loading = false,
hideShadow = false,
...rest }: CurrencyInputPanelProps) {
const [modalOpen, setModalOpen] = useState(false);
const { account, chainId } = useWeb3React();
const selectedCurrencyBalance = useCurrencyBalance(account ?? undefined, currency ?? undefined);
const theme = useTheme();
...rest
}: CurrencyInputPanelProps) {
const [modalOpen, setModalOpen] = useState(false)
const { account, chainId } = useWeb3React()
const selectedCurrencyBalance = useCurrencyBalance(account ?? undefined, currency ?? undefined)
const theme = useTheme()

const handleDismissSearch = useCallback(() => {
setModalOpen(false);
}, [setModalOpen]);
setModalOpen(false)
}, [setModalOpen])

const chainAllowed = isSupportedChain(chainId);
const chainAllowed = isSupportedChain(chainId)

const containerStyles = hideShadow ? {boxShadow: 'none'} : {};
const containerStyles = hideShadow ? { boxShadow: 'none' } : {}
return (
<InputPanel id={id} hideInput={hideInput} {...rest}>
{!locked && (
Expand All @@ -233,7 +241,7 @@ export default function CurrencyInputPanel({ value,
className="open-currency-select-button"
onClick={() => {
if (onCurrencySelect) {
setModalOpen(true);
setModalOpen(true)
}
}}
pointerEvents={!onCurrencySelect ? 'none' : undefined}
Expand All @@ -252,14 +260,12 @@ export default function CurrencyInputPanel({ value,
{pair?.token0.symbol}:{pair?.token1.symbol}
</StyledTokenName>
) : (
<StyledTokenName
className="token-symbol-container"
active={Boolean(currency && currency.symbol)}
>
<StyledTokenName className="token-symbol-container" active={Boolean(currency && currency.symbol)}>
{(currency && currency.symbol && currency.symbol.length > 20
? `${currency.symbol.slice(0, 4)
}...${
currency.symbol.slice(currency.symbol.length - 5, currency.symbol.length)}`
? `${currency.symbol.slice(0, 4)}...${currency.symbol.slice(
currency.symbol.length - 5,
currency.symbol.length
)}`
: currency?.symbol) || <Trans>Select a token</Trans>}
</StyledTokenName>
)}
Expand All @@ -276,7 +282,7 @@ export default function CurrencyInputPanel({ value,
onUserInput={onUserInput}
disabled={!chainAllowed}
$loading={loading}
style={{width: 'auto', textAlign: 'right'}}
style={{ width: 'auto', textAlign: 'right' }}
/>
</div>
)}
Expand Down Expand Up @@ -304,16 +310,16 @@ export default function CurrencyInputPanel({ value,
fontSize={14}
style={{ display: 'inline', cursor: 'pointer' }}
>
{Boolean(!hideBalance && currency && selectedCurrencyBalance)
&& (renderBalance?.(selectedCurrencyBalance as CurrencyAmount<Currency>) || (
<Trans>Bal: {formatCurrencyAmount(selectedCurrencyBalance, 4)}</Trans>
))}
{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>
<LoadingOpacityContainer $loading={loading}>
{fiatValue && <FiatValue fiatValue={fiatValue} />}
</LoadingOpacityContainer>
</RowBetween>
</FiatRow>
)}
Expand All @@ -332,5 +338,5 @@ export default function CurrencyInputPanel({ value,
/>
)}
</InputPanel>
);
)
}
4 changes: 2 additions & 2 deletions src/components/FeeSelector/FeeTierPercentageBadge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@ export function FeeTierPercentageBadge({
poolState: PoolState
}) {
return (
<Badge style={{backgroundColor: '#444', borderRadius: '4px', padding: '2px'}}>
<ThemedText.DeprecatedLabel fontSize={10}>
<Badge style={{ backgroundColor: '#444', borderRadius: '4px', padding: '4px' }}>
<ThemedText.DeprecatedLabel fontSize={10} lineHeight={1}>
{!distributions || poolState === PoolState.NOT_EXISTS || poolState === PoolState.INVALID ? (
<Trans>Not created</Trans>
) : distributions[feeAmount] !== undefined ? (
Expand Down
Loading