Skip to content

Commit e553039

Browse files
mgrabinamgrabina
committed
% selector in asset input
1 parent 71e1637 commit e553039

File tree

17 files changed

+269
-71
lines changed

17 files changed

+269
-71
lines changed

‎src/components/MarketSwitcher.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,13 @@ type MarketLogoProps = {
7878
export const MarketLogo = ({ size, logo, testChainName, sx }: MarketLogoProps) => {
7979
return (
8080
<Box sx={{ mr: 2, width: size, height: size, position: 'relative', ...sx }}>
81-
<img src={logo} alt="" width="100%" height="100%" />
81+
<img
82+
src={logo}
83+
alt=""
84+
width="100%"
85+
height="100%"
86+
style={{ display: 'block', objectFit: 'contain', objectPosition: 'center center' }}
87+
/>
8288

8389
{testChainName && (
8490
<Tooltip title={testChainName} arrow>

‎src/components/transactions/Swap/actions/ActionsSkeleton.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,11 @@ const stateToLoadingType = (state: SwapState): LoadingType => {
1313

1414
export const ActionsLoading: React.FC<{ state: SwapState }> = ({ state }) => {
1515
const loadingType = stateToLoadingType(state);
16-
17-
// Timer logic for updating the loading text after 2 seconds when loadingType is 'quote'
1816
const [quoteTimeElapsed, setQuoteTimeElapsed] = useState(false);
1917
const timerRef = useRef<NodeJS.Timeout | null>(null);
2018

19+
// Timer logic for updating the loading text after 2 seconds when loadingType is 'quote'
20+
// Trick to change quote loading trick to make it feel more smooth
2121
useEffect(() => {
2222
if (loadingType === 'quote') {
2323
setQuoteTimeElapsed(false);

‎src/components/transactions/Swap/actions/CollateralSwap/CollateralSwapActionsViaParaswapAdapters.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,6 @@ export const CollateralSwapActionsViaParaswapAdapters = ({
112112

113113
if (!isProtocolSwapState(state)) throw new Error('State is not a protocol swap state');
114114

115-
// TODO: CHECK LIMIT ORDERS BUY ORDERS
116115
const signedAmount = approvedAmount;
117116
const amountToSwap = state.inputAmount;
118117
const amountToReceive = state.buyAmountFormatted || '0';

‎src/components/transactions/Swap/details/CowCostsDetails.tsx‎

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ import { Row } from 'src/components/primitives/Row';
1212
import { ExternalTokenIcon } from 'src/components/primitives/TokenIcon';
1313

1414
import { calculateFlashLoanAmounts } from '../helpers/cow/adapters.helpers';
15-
import { swapTypesThatRequiresInvertedQuote } from '../hooks/useSwapQuote';
1615
import { isCowProtocolRates, OrderType, SwapState } from '../types';
1716

1817
export const CowCostsDetails = ({ state }: { state: SwapState }) => {
@@ -38,45 +37,47 @@ export const CowCostsDetails = ({ state }: { state: SwapState }) => {
3837
// If using flash-loan via CoW we need to account for the flash-loan fee
3938
const flashloanFeeFormatted = normalize(
4039
calculateFlashLoanAmounts(state).flashLoanFeeAmount.toString(),
41-
state.sourceToken.decimals
40+
state.sellAmountToken?.decimals ?? 18
4241
);
43-
const flashloanFeeUsd = Number(flashloanFeeFormatted) * state.swapRate.srcTokenPriceUsd;
44-
const flashloanFeeToken = state.sourceToken;
42+
const flashLoanFeeTokenPriceUnitUsd = valueToBigNumber(state.sellAmountUSD ?? '0')
43+
.dividedBy(valueToBigNumber(state.sellAmountFormatted ?? '0'))
44+
.toNumber();
45+
const flashloanFeeUsd = Number(flashloanFeeFormatted) * flashLoanFeeTokenPriceUnitUsd;
46+
const flashloanFeeToken = state.sellAmountToken;
4547

4648
if (!state.buyAmountToken || !state.sellAmountToken) return null;
4749

4850
// Partner fee is applied to the surplus token:
4951
// - For sell orders: fee in buy token (destinationToken), deducted from buy amount
5052
// - For buy orders: fee in sell token (sourceToken), added to sell amount
5153
// For Debt and Repay with collateral, the swap is inverted to our UI
52-
const invertedSide = swapTypesThatRequiresInvertedQuote.includes(state.swapType)
53-
? state.side === 'sell'
54-
? 'buy'
55-
: 'sell'
56-
: state.side;
54+
const invertedSide = state.processedSide;
5755
let partnerFeeFormatted: string,
5856
partnerFeeUsd: number,
59-
partnerFeeToken: typeof state.sourceToken | typeof state.destinationToken;
57+
partnerFeeToken: typeof state.buyAmountToken | typeof state.sellAmountToken;
6058
if (invertedSide === 'buy') {
6159
// Fee in destination token (buy token)
6260
partnerFeeFormatted = normalize(
6361
state.swapRate.amountAndCosts.costs.partnerFee.amount.toString(),
64-
state.buyAmountToken?.decimals ?? 18
62+
state.sellAmountToken?.decimals ?? 18
6563
);
66-
partnerFeeUsd = Number(partnerFeeFormatted) * state.swapRate.destTokenPriceUsd;
67-
partnerFeeToken = state.destinationToken;
64+
const partnerFeeAmountPriceUnitUsd = valueToBigNumber(state.sellAmountUSD ?? '0')
65+
.dividedBy(valueToBigNumber(state.sellAmountFormatted ?? '0'))
66+
.toNumber();
67+
partnerFeeUsd = Number(partnerFeeFormatted) * partnerFeeAmountPriceUnitUsd;
68+
partnerFeeToken = state.sellAmountToken;
6869
} else {
6970
// Fee in source token (sell token)
7071
partnerFeeFormatted = normalize(
7172
state.swapRate.amountAndCosts.costs.partnerFee.amount.toString(),
7273
state.buyAmountToken?.decimals ?? 18
7374
);
7475

75-
const buyAmountTokenPriceUsd = valueToBigNumber(state.buyAmountUSD ?? '0')
76-
.dividedBy(valueToBigNumber(state.buyAmountFormatted?.toString() ?? '0'))
76+
const partnerFeeAmountPriceUnitUsd = valueToBigNumber(state.buyAmountUSD ?? '0')
77+
.dividedBy(valueToBigNumber(state.buyAmountFormatted ?? '0'))
7778
.toNumber();
7879

79-
partnerFeeUsd = Number(partnerFeeFormatted) * buyAmountTokenPriceUsd;
80+
partnerFeeUsd = Number(partnerFeeFormatted) * partnerFeeAmountPriceUnitUsd;
8081
partnerFeeToken = state.buyAmountToken;
8182
}
8283

‎src/components/transactions/Swap/inputs/LimitOrderInputs.tsx‎

Lines changed: 35 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { ArrowDownIcon, SwitchVerticalIcon } from '@heroicons/react/outline';
2-
import { Box, IconButton, SvgIcon } from '@mui/material';
2+
import { Box, IconButton, SvgIcon, Typography } from '@mui/material';
33
import { Dispatch } from 'react';
44

55
import { QUOTE_REFETCH_INTERVAL } from '../hooks/useSwapQuote';
@@ -27,16 +27,26 @@ export const LimitOrderInputs = ({
2727
<Box
2828
sx={{
2929
display: 'flex',
30-
justifyContent: !swapState.showNetworkSelector ? 'flex-end' : 'space-between',
30+
justifyContent:
31+
params.inputInputTitle || swapState.showNetworkSelector ? 'space-between' : 'flex-end',
3132
alignItems: 'center',
3233
}}
3334
>
34-
{swapState.showNetworkSelector && (
35-
<NetworkSelector
36-
networks={params.supportedNetworks}
37-
selectedNetwork={state.chainId}
38-
setSelectedNetwork={swapState.handleSelectedNetworkChange}
39-
/>
35+
{(params.inputInputTitle || swapState.showNetworkSelector) && (
36+
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
37+
{params.inputInputTitle && (
38+
<Typography variant="secondary14" color="text.secondary">
39+
{params.inputInputTitle}
40+
</Typography>
41+
)}
42+
{swapState.showNetworkSelector && (
43+
<NetworkSelector
44+
networks={params.supportedNetworks}
45+
selectedNetwork={state.chainId}
46+
setSelectedNetwork={swapState.handleSelectedNetworkChange}
47+
/>
48+
)}
49+
</Box>
4050
)}
4151

4252
<ExpirySelector
@@ -62,7 +72,15 @@ export const LimitOrderInputs = ({
6272
balanceTitle={params.inputBalanceTitle}
6373
assets={swapState.inputAssets}
6474
value={state.inputAmount}
75+
enableHover={true}
6576
onChange={swapState.handleInputChange}
77+
onClear={() =>
78+
setState({
79+
inputAmount: '',
80+
debouncedInputAmount: '',
81+
inputAmountUSD: '',
82+
})
83+
}
6684
usdValue={state.inputAmountUSD || '0'}
6785
onSelect={swapState.handleSelectedInputToken}
6886
selectedAsset={state.sourceToken}
@@ -151,8 +169,10 @@ export const LimitOrderInputs = ({
151169
<SwitchAssetInput
152170
chainId={state.chainId}
153171
balanceTitle={params.outputBalanceTitle}
172+
title={params.outputInputTitle}
154173
assets={swapState.outputAssets}
155174
value={state.outputAmount}
175+
enableHover={true}
156176
usdValue={state.outputAmountUSD || '0'}
157177
loading={
158178
state.debouncedInputAmount !== '0' &&
@@ -163,6 +183,13 @@ export const LimitOrderInputs = ({
163183
onChange={(value) => {
164184
swapState.handleOutputChange(value);
165185
}}
186+
onClear={() =>
187+
setState({
188+
outputAmount: '',
189+
debouncedOutputAmount: '',
190+
outputAmountUSD: '',
191+
})
192+
}
166193
onSelect={swapState.handleSelectedOutputToken}
167194
disableInput={false}
168195
selectedAsset={state.destinationToken}

‎src/components/transactions/Swap/inputs/MarketOrderInputs.tsx‎

Lines changed: 35 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { ArrowDownIcon, SwitchVerticalIcon } from '@heroicons/react/outline';
2-
import { Box, IconButton, SvgIcon } from '@mui/material';
2+
import { Box, IconButton, SvgIcon, Typography } from '@mui/material';
33
import { Dispatch } from 'react';
44

55
import { QUOTE_REFETCH_INTERVAL } from '../hooks/useSwapQuote';
@@ -15,6 +15,7 @@ export const MarketOrderInputs = ({
1515
params,
1616
state,
1717
swapState,
18+
setState,
1819
}: {
1920
params: SwapParams;
2021
state: SwapState;
@@ -26,16 +27,26 @@ export const MarketOrderInputs = ({
2627
<Box
2728
sx={{
2829
display: 'flex',
29-
justifyContent: !swapState.showNetworkSelector ? 'flex-end' : 'space-between',
30+
justifyContent:
31+
params.inputInputTitle || swapState.showNetworkSelector ? 'space-between' : 'flex-end',
3032
alignItems: 'center',
3133
}}
3234
>
33-
{swapState.showNetworkSelector && (
34-
<NetworkSelector
35-
networks={params.supportedNetworks}
36-
selectedNetwork={state.chainId}
37-
setSelectedNetwork={swapState.handleSelectedNetworkChange}
38-
/>
35+
{(params.inputInputTitle || swapState.showNetworkSelector) && (
36+
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
37+
{params.inputInputTitle && (
38+
<Typography variant="secondary14" color="text.secondary">
39+
{params.inputInputTitle}
40+
</Typography>
41+
)}
42+
{swapState.showNetworkSelector && (
43+
<NetworkSelector
44+
networks={params.supportedNetworks}
45+
selectedNetwork={state.chainId}
46+
setSelectedNetwork={swapState.handleSelectedNetworkChange}
47+
/>
48+
)}
49+
</Box>
3950
)}
4051

4152
<SwitchSlippageSelector
@@ -60,10 +71,24 @@ export const MarketOrderInputs = ({
6071
<SwitchAssetInput
6172
chainId={state.chainId}
6273
balanceTitle={params.inputBalanceTitle}
63-
title={params.inputInputTitle}
6474
assets={swapState.inputAssets}
6575
value={state.inputAmount}
76+
enableHover={true}
6677
onChange={swapState.handleInputChange}
78+
onClear={() =>
79+
setState({
80+
inputAmount: '',
81+
debouncedInputAmount: '',
82+
inputAmountUSD: '',
83+
outputAmount: '',
84+
debouncedOutputAmount: '',
85+
outputAmountUSD: '',
86+
swapRate: undefined,
87+
ratesLoading: false,
88+
error: undefined,
89+
warnings: [],
90+
})
91+
}
6792
usdValue={state.inputAmountUSD.toString() || '0'}
6893
onSelect={swapState.handleSelectedInputToken}
6994
selectedAsset={state.sourceToken}
@@ -147,6 +172,7 @@ export const MarketOrderInputs = ({
147172
assets={swapState.outputAssets}
148173
title={params.outputInputTitle}
149174
value={state.outputAmount}
175+
enableHover={false}
150176
usdValue={state.outputAmountUSD || '0'}
151177
loading={
152178
state.debouncedInputAmount !== '0' &&

0 commit comments

Comments
 (0)