Skip to content

Commit

Permalink
feat: support ton bridge
Browse files Browse the repository at this point in the history
  • Loading branch information
@junjieit
junjieit committed Sep 5, 2024
1 parent f4b4137 commit 41d08e4
Show file tree
Hide file tree
Showing 23 changed files with 629 additions and 196 deletions.
2 changes: 1 addition & 1 deletion .husky/pre-commit
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,4 @@
. "$(dirname -- "$0")/_/husky.sh"

# use lerna isntead of yarn in windows
./node_modules/.bin/lerna run test && ./node_modules/.bin/lerna run test:e2e
./node_modules/.bin/lerna run test
2 changes: 1 addition & 1 deletion packages/dodoex-widgets/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@dodoex/widgets",
"version": "2.6.12-beta.6",
"version": "2.6.12-beta.11",
"description": "DODO Widgets",
"source": "src/index.tsx",
"types": "dist/src/index.d.ts",
Expand Down
64 changes: 35 additions & 29 deletions packages/dodoex-widgets/src/components/Bridge/BridgeSummaryDialog/BridgeSummaryDetail.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -194,35 +194,41 @@ export default function BridgeSummaryDetail({
/>
</>
)} */}
<Box
sx={{
typography: 'body2',
fontWeight: 600,
}}
>
{truncatePoolAddress(route.fromAddress)}
</Box>
<HoverOpacity
component="a"
// @ts-ignore
href={fromAddressScanUrl}
target="_blank"
rel="noopener noreferrer"
sx={{
ml: 6,
width: 18,
height: 18,
color: 'text.secondary',
}}
>
<Box
component={ArrowTopRightBorder}
sx={{
width: 18,
height: 18,
}}
/>
</HoverOpacity>
{route.fromAddress ? (
<>
<Box
sx={{
typography: 'body2',
fontWeight: 600,
}}
>
{truncatePoolAddress(route.fromAddress)}
</Box>
<HoverOpacity
component="a"
// @ts-ignore
href={fromAddressScanUrl}
target="_blank"
rel="noopener noreferrer"
sx={{
ml: 6,
width: 18,
height: 18,
color: 'text.secondary',
}}
>
<Box
component={ArrowTopRightBorder}
sx={{
width: 18,
height: 18,
}}
/>
</HoverOpacity>
</>
) : (
'-'
)}
</Box>
</Box>
{route.feeUSD ? (
Expand Down
2 changes: 1 addition & 1 deletion packages/dodoex-widgets/src/components/Swap/components/ConnectWallet/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ export default function ConnectWallet({
size={Button.Size.middle}
fullWidth
onClick={async () => {
if (onConnectWalletClick) {
if (onConnectWalletClick && needConnectChainId !== ChainId.TON) {
// switch chain
if (
!needEvmChainId &&
Expand Down
131 changes: 105 additions & 26 deletions packages/dodoex-widgets/src/components/Swap/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,9 @@ import {
useTheme,
RotatingIcon,
Tooltip,
Input,
} from '@dodoex/components';
import { formatTokenAmountNumber } from '../../utils';
import { formatTokenAmountNumber, isAddress } from '../../utils';
import { useMemo, useState, useEffect, useCallback } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Setting, Dodo, Warn, DoubleRight } from '@dodoex/icons';
Expand Down Expand Up @@ -71,16 +72,20 @@ import {
import { useWalletState } from '../../hooks/ConnectWallet/useWalletState';
import { useWeb3React } from '@web3-react/core';
import useTonConnectStore from '../../hooks/ConnectWallet/TonConnect';
import { isAndroid, isIOS } from '../../utils/device';
import WebApp from '@twa-dev/sdk';

export interface SwapProps {
/** Higher priority setting slippage */
getAutoSlippage?: GetAutoSlippage;
onConnectWalletClick?: ConnectWalletProps['onConnectWalletClick'];
bridgeToTonUrl?: string;
}

export function Swap({
getAutoSlippage,
onConnectWalletClick,
bridgeToTonUrl,
}: SwapProps = {}) {
const theme = useTheme();
const { isInflight } = useInflights();
Expand Down Expand Up @@ -158,9 +163,17 @@ export function Swap({
const insufficientBalance = useMemo(() => {
const token = isReverseRouting ? toToken : fromToken;
const balance = new BigNumber(token ? getBalance(token) || 0 : 0);
if (
!(token && getBalance(token)) &&
fromToken?.chainId !== ChainId.TON &&
toToken?.chainId === ChainId.TON
) {
return false;
}
return balance.lt(isReverseRouting ? toAmt ?? 0 : fromAmt);
}, [isReverseRouting, fromToken, toToken, fromAmt, toAmt, getBalance]);

const [receiveAddress, setReceiveAddress] = useState('');
const {
bridgeRouteList,
status: bridgeRouteStatus,
Expand All @@ -170,6 +183,7 @@ export function Swap({
fromToken,
fromAmount: fromAmt,
fromFiatPrice,
toAddress: receiveAddress ? receiveAddress : undefined,
});
const [switchBridgeRouteShow, setSwitchBridgeRouteShow] = useState(false);
const [selectedRouteIdOrigin, setSelectRouteId] = useState('');
Expand All @@ -183,7 +197,8 @@ export function Swap({
() =>
bridgeRouteList.find(
(route) =>
route.id === selectedRouteId && route.fromAddress === account,
route.id === selectedRouteId &&
(route.fromAddress === account || !account),
),
[bridgeRouteList, selectedRouteId, account],
);
Expand Down Expand Up @@ -703,18 +718,29 @@ export function Swap({
let needEvmChainId = undefined as undefined | ChainId;
const isFromTon = fromToken?.chainId === ChainId.TON;
const isToTon = toToken?.chainId === ChainId.TON;
if (!(isFromTon && isToTon) && (isFromTon || isToTon)) {
needEvmChainId = isFromTon ? toToken?.chainId : fromToken?.chainId;
let isNeedConnect = false;
let needSwitchChain = fromToken?.chainId;
if (isFromTon || isToTon) {
// if (window.ethereum) {
// if (!(isFromTon && isToTon)) {
// needEvmChainId = isFromTon ? toToken?.chainId : fromToken?.chainId;
// }
// isNeedConnect =
// !web3React.account ||
// (fromToken?.chainId && chainId !== fromToken.chainId) ||
// !tonConnect.connected;
// } else {
needSwitchChain = ChainId.TON;
isNeedConnect = !tonConnect.connected;
// }
} else {
isNeedConnect =
!account || (!!fromToken?.chainId && chainId !== fromToken.chainId);
}
if (
!account ||
(fromToken?.chainId && chainId !== fromToken.chainId) ||
(needEvmChainId && !tonConnect.connected) ||
!web3React.account
)
if (isNeedConnect)
return (
<ConnectWallet
needSwitchChain={fromToken?.chainId}
needSwitchChain={needSwitchChain}
onConnectWalletClick={onConnectWalletClick}
needEvmChainId={needEvmChainId}
/>
Expand Down Expand Up @@ -809,22 +835,75 @@ export function Swap({
);

if (isBridge) {
const needReceiveAddress =
!web3React.account &&
fromToken.chainId === ChainId.TON &&
toToken.chainId !== ChainId.TON;
return (
<Button
fullWidth
onClick={() =>
handleSendBridgeRoute({
selectedRoute,
fromEtherTokenBalance,
goNext: () => setBridgeSummaryShow(true),
})
}
data-testid={swapReviewBtn}
disabled={!selectedRoute}
isLoading={sendRouteLoading}
>
<Trans>Review Cross Chain</Trans>
</Button>
<>
{needReceiveAddress && (
<Input
fullWidth
value={receiveAddress}
onChange={(e) => setReceiveAddress(e.target.value)}
errorMsg={
!receiveAddress || isAddress(receiveAddress)
? undefined
: 'Invalid address'
}
sx={{
height: 48,
border: 'none',
}}
placeholder="Receive address"
/>
)}
<Button
fullWidth
onClick={() => {
if (
fromToken.chainId !== ChainId.TON &&
toToken.chainId === ChainId.TON &&
bridgeToTonUrl
) {
const splitSymbol =
bridgeToTonUrl.indexOf('?') !== -1 ? '&' : '?';
const link = `${bridgeToTonUrl}${splitSymbol}tonAccount=${tonConnect.connected?.account}&fromTokenAddress=${fromToken.address}&fromChainId=${fromToken.chainId}&toTokenAddress=${toToken.address}&toChainId=${toToken.chainId}&fromAmt=${fromAmt}`;
if (isAndroid || isIOS) {
WebApp.openLink(
`https://metamask.app.link/dapp/${link.replace(
/^https?:\/\//,
'',
)}`,
);
} else {
WebApp.openLink(link);
}
return;
}
handleSendBridgeRoute({
selectedRoute,
fromEtherTokenBalance,
goNext: () => setBridgeSummaryShow(true),
});
}}
data-testid={swapReviewBtn}
disabled={
!selectedRoute ||
(needReceiveAddress && !isAddress(receiveAddress))
}
isLoading={sendRouteLoading}
sx={
needReceiveAddress
? {
mt: 12,
}
: undefined
}
>
<Trans>Review Cross Chain</Trans>
</Button>
</>
);
}
return (
Expand Down
6 changes: 4 additions & 2 deletions packages/dodoex-widgets/src/components/TokenPicker/TokenItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { tokenPickerItem } from '../../constants/testId';
import { useTheme } from '@dodoex/components';
import { ChainId } from '../../constants/chains';
import { useWeb3React } from '@web3-react/core';
import useTonConnectStore from '../../hooks/ConnectWallet/TonConnect';

export default function TokenItem({
token,
Expand All @@ -24,7 +25,8 @@ export default function TokenItem({
}) {
const theme = useTheme();
const getBalance = useGetBalance();
const { account } = useWeb3React();
const { account: evmAccount } = useWeb3React();
const tonAccount = useTonConnectStore((state) => state.connected?.account);
const balanceBigNumber = getBalance(token);
const balance = balanceBigNumber
? formatReadableNumber({
Expand Down Expand Up @@ -71,7 +73,7 @@ export default function TokenItem({
>
{token.symbol}
</Box>
{account && (
{(token.chainId === ChainId.TON ? tonAccount : evmAccount) && (
<Box
sx={{
mt: 4,
Expand Down
Loading

0 comments on commit 41d08e4

Please sign in to comment.