Skip to content

Commit 1ca038b

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

File tree

29 files changed

+695
-263
lines changed

29 files changed

+695
-263
lines changed

‎package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,10 +36,10 @@
3636
"dev:queue-manager": "node ./scripts/dev-watch/command.mjs --project @rango-dev/queue-manager-demo",
3737
"dev:widget:type-checker": "node ./scripts/dev-ts-check/command.mjs --project @rango-dev/widget-app",
3838
"dev:widget:dev-server": "yarn --cwd ./widget/app/ dev",
39-
"dev:widget": "npm-run-all --parallel dev:widget:dev-server dev:widget:type-checker",
39+
"dev:widget": "concurrently \"yarn dev:widget:dev-server\" \"yarn dev:widget:type-checker\"",
4040
"dev:playground:type-checker": "node ./scripts/dev-ts-check/command.mjs --project @rango-dev/widget-playground",
4141
"dev:playground:dev-server": "yarn --cwd ./widget/playground/ dev",
42-
"dev:playground": "npm-run-all --parallel dev:playground:dev-server dev:playground:type-checker",
42+
"dev:playground": "concurrently \"yarn dev:playground:dev-server\" \"yarn dev:playground:type-checker\"",
4343
"lint": "nx run-many --target=lint",
4444
"format": "nx run-many --target=format",
4545
"publish": "node ./scripts/publish/command.mjs",
@@ -81,6 +81,7 @@
8181
"buffer": "^5.5.0",
8282
"chalk": "^5.2.0",
8383
"command-line-args": "^5.2.1",
84+
"concurrently": "^9.2.0",
8485
"conventional-changelog-angular": "^5.0.13",
8586
"conventional-changelog-cli": "^2.2.2",
8687
"conventional-commits-filter": "^2.0.7",
@@ -103,7 +104,6 @@
103104
"globals": "^15.14.0",
104105
"happy-dom": "^14.12.0",
105106
"lint-staged": "^13.2.2",
106-
"npm-run-all": "^4.1.5",
107107
"nx": "16.2.1",
108108
"os-browserify": "^0.3.0",
109109
"parcel": "^2.11.0",

‎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: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,3 @@ export const Container = styled('div', {
66
gap: '$5',
77
alignSelf: 'stretch',
88
});
9-
10-
export const FromContainer = styled('div', {
11-
position: 'relative',
12-
});

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

Lines changed: 3 additions & 85 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 } 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,61 +47,7 @@ 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
13452
sharpBottomStyle={!isExpandable && (!!selectedQuote || fetchingQuote)}
13553
label={i18n.t('To')}

‎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: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import type { SwapInputPropTypes } from '@rango-dev/ui';
2+
3+
import { styled } from '@rango-dev/ui';
4+
5+
export const FromContainer = styled('div', {
6+
position: 'relative',
7+
});
8+
9+
export const swapInputStyles: SwapInputPropTypes['style'] = {
10+
container: {
11+
borderTopRightRadius: 0,
12+
borderTopLeftRadius: 0,
13+
},
14+
};

0 commit comments

Comments
 (0)