Skip to content

Commit 53b7367

Browse files
Ikari-Shinji-reIkari-Shinji-re
committed
feat: implement flow for connecting source wallet
1 parent 2dd7c3d commit 53b7367

File tree

28 files changed

+699
-223
lines changed

28 files changed

+699
-223
lines changed

‎widget/embedded/src/components/AppRoutes.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import { RoutesPage } from '../pages/Routes';
1515
import { SelectBlockchainPage } from '../pages/SelectBlockchainPage';
1616
import { SelectSwapItemsPage } from '../pages/SelectSwapItemPage/index';
1717
import { SettingsPage } from '../pages/SettingsPage';
18+
import { SourceWalletPage } from '../pages/SourceWalletPage';
1819
import { SwapDetailsPage } from '../pages/SwapDetailsPage';
1920
import { WalletsPage } from '../pages/WalletsPage';
2021

@@ -37,6 +38,10 @@ export function AppRoutes() {
3738
path: navigationRoutes.routes,
3839
element: <RoutesPage />,
3940
},
41+
{
42+
path: navigationRoutes.sourceWallet,
43+
element: <SourceWalletPage />,
44+
},
4045
{
4146
path: navigationRoutes.fromSwap,
4247
children: [

‎widget/embedded/src/constants/navigationRoutes.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ export const navigationRoutes = {
22
home: '/',
33
fromSwap: 'from-swap',
44
toSwap: 'to-swap',
5+
sourceWallet: 'source-wallet',
56
blockchains: 'blockchains',
67
settings: 'settings',
78
customTokens: 'custom-tokens',

‎widget/embedded/src/containers/Inputs/Inputs.styles.ts‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@ export const Container = styled('div', {
77
alignSelf: 'stretch',
88
});
99

10-
export const FromContainer = styled('div', {
11-
position: 'relative',
12-
});
10+
export const DestinationInputStyles = {
11+
container: {
12+
borderBottomRightRadius: 0,
13+
borderBottomLeftRadius: 0,
14+
},
15+
};

‎widget/embedded/src/containers/Inputs/Inputs.tsx‎

Lines changed: 8 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,9 @@ import type { PropTypes } from './Inputs.types';
22

33
import { i18n } from '@lingui/core';
44
import { SwapInput } from '@rango-dev/ui';
5-
import BigNumber from 'bignumber.js';
65
import React from 'react';
76

8-
import { SwitchFromAndToButton } from '../../components/SwitchFromAndTo';
97
import { errorMessages } from '../../constants/errors';
10-
import { ZERO } from '../../constants/numbers';
118
import {
129
PERCENTAGE_CHANGE_MAX_DECIMALS,
1310
PERCENTAGE_CHANGE_MIN_DECIMALS,
@@ -16,51 +13,26 @@ import {
1613
USD_VALUE_MAX_DECIMALS,
1714
USD_VALUE_MIN_DECIMALS,
1815
} from '../../constants/routing';
19-
import { useAppStore } from '../../store/AppStore';
2016
import { useQuoteStore } from '../../store/quote';
2117
import { getContainer } from '../../utils/common';
2218
import { numberToString } from '../../utils/numbers';
2319
import { getPriceImpact, getPriceImpactLevel } from '../../utils/quote';
2420
import { canComputePriceImpact } from '../../utils/swap';
25-
import { formatBalance, isFetchingBalance } from '../../utils/wallets';
2621

27-
import { Container, FromContainer } from './Inputs.styles';
22+
import { Container, DestinationInputStyles } from './Inputs.styles';
23+
import { SourceInput } from './SourceInput/SourceInput';
2824

2925
export function Inputs(props: PropTypes) {
3026
const { fetchingQuote, fetchMetaStatus, onClickToken, isExpandable } = props;
3127
const {
32-
fromToken,
33-
fromBlockchain,
3428
toToken,
3529
toBlockchain,
36-
setInputAmount,
37-
sanitizeInputAmount,
3830
inputAmount,
3931
inputUsdValue,
4032
outputAmount,
4133
outputUsdValue,
4234
selectedQuote,
4335
} = useQuoteStore();
44-
const { connectedWallets, getBalanceFor } = useAppStore();
45-
const fromTokenBalance = fromToken ? getBalanceFor(fromToken) : null;
46-
const fromTokenFormattedBalance =
47-
formatBalance(fromTokenBalance)?.amount ?? '0';
48-
49-
const fromBalanceAmount = fromTokenBalance
50-
? new BigNumber(fromTokenBalance.amount).shiftedBy(
51-
-fromTokenBalance.decimals
52-
)
53-
: ZERO;
54-
55-
const fetchingBalance =
56-
!!fromBlockchain &&
57-
isFetchingBalance(connectedWallets, fromBlockchain.name);
58-
59-
const priceImpactInputCanNotBeComputed = !canComputePriceImpact(
60-
selectedQuote,
61-
inputAmount,
62-
inputUsdValue
63-
);
6436

6537
const priceImpactOutputCanNotBeComputed = !canComputePriceImpact(
6638
selectedQuote,
@@ -75,63 +47,13 @@ export function Inputs(props: PropTypes) {
7547

7648
return (
7749
<Container>
78-
<FromContainer>
79-
<SwapInput
80-
label={i18n.t('From')}
81-
id="widget-swap-from"
82-
mode="From"
83-
onInputChange={setInputAmount}
84-
onInputBlur={sanitizeInputAmount}
85-
balance={fromTokenFormattedBalance}
86-
chain={{
87-
displayName: fromBlockchain?.displayName || '',
88-
image: fromBlockchain?.logo,
89-
}}
90-
token={{
91-
displayName: fromToken?.symbol || '',
92-
image: fromToken?.image,
93-
securityWarning: !!fromToken?.warning,
94-
}}
95-
onClickToken={() => onClickToken('from')}
96-
price={{
97-
value: inputAmount,
98-
usdValue: priceImpactInputCanNotBeComputed
99-
? undefined
100-
: numberToString(
101-
inputUsdValue,
102-
USD_VALUE_MIN_DECIMALS,
103-
USD_VALUE_MAX_DECIMALS
104-
),
105-
realUsdValue: priceImpactInputCanNotBeComputed
106-
? undefined
107-
: inputUsdValue?.toString(),
108-
error: priceImpactInputCanNotBeComputed
109-
? errorMessages().unknownPriceError.impactTitle
110-
: undefined,
111-
}}
112-
disabled={fetchMetaStatus === 'failed'}
113-
loading={fetchMetaStatus === 'loading'}
114-
loadingBalance={fetchingBalance}
115-
tooltipContainer={getContainer()}
116-
onSelectMaxBalance={() => {
117-
const tokenBalanceReal = numberToString(
118-
fromBalanceAmount,
119-
fromTokenBalance?.decimals
120-
);
121-
122-
// if a token hasn't any value, we will reset the input by setting an empty string.
123-
const nextInputAmount = !!fromTokenBalance?.amount
124-
? tokenBalanceReal.split(',').join('')
125-
: '';
126-
127-
setInputAmount(nextInputAmount);
128-
}}
129-
anyWalletConnected={connectedWallets.length > 0}
130-
/>
131-
<SwitchFromAndToButton />
132-
</FromContainer>
50+
<SourceInput onClickToken={() => onClickToken('from')} />
13351
<SwapInput
134-
sharpBottomStyle={!isExpandable && (!!selectedQuote || fetchingQuote)}
52+
style={
53+
!isExpandable && (!!selectedQuote || fetchingQuote)
54+
? DestinationInputStyles
55+
: undefined
56+
}
13557
label={i18n.t('To')}
13658
mode="To"
13759
id="widget-swap-to-input"

‎widget/embedded/src/containers/Inputs/MaxBalance.styles.ts‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { Button, css, darkTheme, styled } from '@rango-dev/ui';
2+
3+
export const MaxButton = styled(Button, {
4+
$$color: '$colors$secondary100',
5+
[`.${darkTheme} &`]: {
6+
$$color: '$colors$secondary800',
7+
},
8+
backgroundColor: '$$color',
9+
'& ._typography': {
10+
color: '$colors$secondary500',
11+
[`.${darkTheme} &`]: {
12+
color: '$colors$secondary250',
13+
},
14+
},
15+
variants: {
16+
size: {
17+
small: {
18+
padding: '$4 $8',
19+
height: '$20',
20+
alignItems: 'center',
21+
borderRadius: '$xs',
22+
'& span': {
23+
display: 'flex',
24+
},
25+
},
26+
},
27+
},
28+
});
29+
30+
export const balanceStyles = css({
31+
display: 'flex',
32+
justifyContent: 'center',
33+
alignItems: 'center',
34+
});

‎widget/embedded/src/containers/Inputs/MaxBalance.tsx‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import type { PropTypes } from './MaxBalance.types';
2+
3+
import { Divider, Skeleton, Typography } from '@rango-dev/ui';
4+
import React from 'react';
5+
import { useTranslation } from 'react-i18next';
6+
7+
import { balanceStyles, MaxButton } from './MaxBalance.styles';
8+
9+
export function MaxBalance(props: PropTypes) {
10+
const { balance, loading, onClickMaxBalance } = props;
11+
const { t } = useTranslation();
12+
13+
return (
14+
<>
15+
{!loading && (
16+
<div className={balanceStyles()}>
17+
<Typography variant="body" size="xsmall" color="neutral600">
18+
{t('Balance')}: {balance ?? '0.00'}
19+
</Typography>
20+
<Divider direction="horizontal" size={4} />
21+
{balance && (
22+
<MaxButton
23+
variant="default"
24+
size="small"
25+
id="widget-home-max-btn"
26+
onClick={onClickMaxBalance}>
27+
<Typography variant="body" size="xsmall">
28+
{t('Max')}
29+
</Typography>
30+
</MaxButton>
31+
)}
32+
</div>
33+
)}
34+
{loading && (
35+
<div className={balanceStyles()}>
36+
<Skeleton variant="text" size="large" width={105} />
37+
</div>
38+
)}
39+
</>
40+
);
41+
}

‎widget/embedded/src/containers/Inputs/MaxBalance.types.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export type PropTypes = {
2+
balance?: string;
3+
loading: boolean;
4+
onClickMaxBalance: () => void;
5+
};

‎widget/embedded/src/containers/Inputs/SourceInput/SourceInput.styles.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { styled } from '@rango-dev/ui';
2+
3+
export const FromContainer = styled('div', {
4+
position: 'relative',
5+
});

0 commit comments

Comments
 (0)