Skip to content

Commit

Permalink
Merge remote-tracking branch 'origin/feat/bridge' into tmp/20240730
Browse files Browse the repository at this point in the history
  • Loading branch information
@dmy147
dmy147 committed Aug 2, 2024
2 parents 632f800 + 5f663a8 commit 5a79667
Show file tree
Hide file tree
Showing 10 changed files with 312 additions and 270 deletions.
12 changes: 6 additions & 6 deletions apps/mobile/src/assets/icons/swap/max-button.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
82 changes: 45 additions & 37 deletions apps/mobile/src/components/SelectSortedChain/ChainItem.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useMemo } from 'react';
import { useMemo, useState } from 'react';
import { Image, Text, View } from 'react-native';

import { CHAINS_ENUM, Chain } from '@/constant/chains';
Expand All @@ -14,6 +14,7 @@ import { RcWalletCC } from '@/assets/icons/common';
import { formatUsdValue } from '@/utils/number';
import { toast } from '../Toast';
import { TestnetChainLogo } from '../Chain/TestnetChainLogo';
import { Tip } from '../Tip';

export default function ChainItem({
data,
Expand Down Expand Up @@ -48,44 +49,51 @@ export default function ChainItem({
return disabledTips;
}, [data, disabledTips]);

const [tipsVisible, setTipsVisible] = useState(false);

return (
<TouchableView
activeOpacity={disabled ? 1 : undefined}
style={[styles.container, disabled && styles.disable, style]}
onPress={() => {
if (disabled) {
finalDisabledTips && toast.info(finalDisabledTips);
return;
}
onPress?.(data?.enum);
}}>
{data.isTestnet ? (
<TestnetChainLogo name={data.name} style={styles.logo} size={32} />
) : (
<Image
source={{
uri: data.logo,
}}
style={styles.logo}
/>
)}
<View style={styles.contentContainer}>
<View style={styles.leftBasic}>
<Text style={styles.nameText}>{data?.name}</Text>
{!!chainBalanceItem?.usd_value && (
<View style={styles.selectChainItemBalance}>
<RcWalletCC style={styles.walletIcon} />
<Text style={styles.usdValueText}>
{formatUsdValue(chainBalanceItem?.usd_value || 0)}
</Text>
</View>
)}
</View>
<View style={styles.rightArea}>
{value && value === data?.enum ? <RcIconChecked /> : null}
<Tip
content={finalDisabledTips}
isVisible={tipsVisible}
onClose={() => setTipsVisible(false)}>
<TouchableView
activeOpacity={disabled ? 1 : undefined}
style={[styles.container, disabled && styles.disable, style]}
onPress={() => {
if (disabled) {
finalDisabledTips && setTipsVisible(true); // toast.info(finalDisabledTips);
return;
}
onPress?.(data?.enum);
}}>
{data.isTestnet ? (
<TestnetChainLogo name={data.name} style={styles.logo} size={32} />
) : (
<Image
source={{
uri: data.logo,
}}
style={styles.logo}
/>
)}
<View style={styles.contentContainer}>
<View style={styles.leftBasic}>
<Text style={styles.nameText}>{data?.name}</Text>
{!!chainBalanceItem?.usd_value && (
<View style={styles.selectChainItemBalance}>
<RcWalletCC style={styles.walletIcon} />
<Text style={styles.usdValueText}>
{formatUsdValue(chainBalanceItem?.usd_value || 0)}
</Text>
</View>
)}
</View>
<View style={styles.rightArea}>
{value && value === data?.enum ? <RcIconChecked /> : null}
</View>
</View>
</View>
</TouchableView>
</TouchableView>
</Tip>
);
}

Expand Down
45 changes: 21 additions & 24 deletions apps/mobile/src/screens/Bridge/components/BridgeContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,6 @@ import {
useQuoteVisible,
useSetQuoteVisible,
useSetRefreshId,
useSetSettingVisible,
useSettingVisible,
useTokenPair,
} from '../hooks';
import { useCurrentAccount } from '@/hooks/account';
Expand Down Expand Up @@ -100,7 +98,7 @@ const getStyles = createGetStyles(colors => ({
flexDirection: 'row',
height: 52,
borderRadius: 4,
borderWidth: StyleSheet.hairlineWidth,
borderWidth: 1,
borderColor: colors['neutral-line'],
paddingHorizontal: 12,
alignItems: 'center',
Expand Down Expand Up @@ -188,15 +186,15 @@ export const BridgeContent = () => {

handleAmountChange,
handleBalance,
inputAmount,
debouncePayAmount,
payAmount,
inSufficient,

openQuotesList,
quoteLoading,
quoteList,

notAvailableQuote,
noBestQuote,

bestQuoteId,
selectedBridgeQuote,

Expand Down Expand Up @@ -243,7 +241,7 @@ export const BridgeContent = () => {
from_token_id: payToken.id,
user_addr: currentAccount?.address,
from_chain_id: payToken.chain,
from_token_raw_amount: new BigNumber(debouncePayAmount)
from_token_raw_amount: new BigNumber(payAmount)
.times(10 ** payToken.decimals)
.toFixed(0, 1)
.toString(),
Expand All @@ -260,14 +258,14 @@ export const BridgeContent = () => {
toTokenId: receiveToken.id,
toChainId: receiveToken.chain,
status: tx ? 'success' : 'fail',
payAmount: debouncePayAmount,
payAmount: payAmount,
});
bridgeToken(
{
to: tx.to,
value: tx.value,
data: tx.data,
payTokenRawAmount: new BigNumber(debouncePayAmount)
payTokenRawAmount: new BigNumber(payAmount)
.times(10 ** payToken.decimals)
.toFixed(0, 1)
.toString(),
Expand All @@ -281,7 +279,7 @@ export const BridgeContent = () => {
bridge_id: selectedBridgeQuote.bridge_id,
from_chain_id: payToken.chain,
from_token_id: payToken.id,
from_token_amount: debouncePayAmount,
from_token_amount: payAmount,
to_chain_id: receiveToken.chain,
to_token_id: receiveToken.id,
to_token_amount: selectedBridgeQuote.to_token_amount,
Expand All @@ -307,7 +305,7 @@ export const BridgeContent = () => {
toTokenId: receiveToken.id,
toChainId: receiveToken.chain,
status: 'fail',
payAmount: debouncePayAmount,
payAmount: payAmount,
});
console.error(error);
} finally {
Expand Down Expand Up @@ -377,14 +375,14 @@ export const BridgeContent = () => {
<TouchableOpacity
style={[styles.subTitle, styles.maxBtn]}
onPress={handleBalance}>
<RcIconMaxButton width={34} height={16} />
<RcIconMaxButton />
</TouchableOpacity>
</View>
</View>

<View style={styles.inputContainer}>
<TextInput
value={inputAmount}
value={payAmount}
onChangeText={handleAmountChange}
keyboardType="numeric"
inputMode="decimal"
Expand All @@ -394,9 +392,9 @@ export const BridgeContent = () => {
placeholderTextColor={colors['neutral-foot']}
/>
<Text style={styles.inputUsdValue}>
{inputAmount
{payAmount
? `≈ ${formatUsdValue(
new BigNumber(inputAmount)
new BigNumber(payAmount)
.times(payToken?.price || 0)
.toString(10),
)}`
Expand All @@ -405,24 +403,23 @@ export const BridgeContent = () => {
</View>

{quoteLoading &&
Number(debouncePayAmount) > 0 &&
Number(payAmount) > 0 &&
!inSufficient &&
!selectedBridgeQuote?.manualClick && <BestQuoteLoading />}

{payToken &&
!inSufficient &&
receiveToken &&
Number(debouncePayAmount) > 0 &&
(!quoteLoading ||
(selectedBridgeQuote && selectedBridgeQuote?.manualClick)) && (
Number(payAmount) > 0 &&
(!quoteLoading || selectedBridgeQuote?.manualClick) && (
<BridgeReceiveDetails
openQuotesList={openQuotesList}
activeProvider={selectedBridgeQuote}
payAmount={debouncePayAmount}
payAmount={payAmount}
payToken={payToken}
receiveToken={receiveToken}
bestQuoteId={bestQuoteId}
isEmptyQuote={notAvailableQuote}
noBestQuote={noBestQuote}
/>
)}
</View>
Expand Down Expand Up @@ -467,7 +464,7 @@ export const BridgeContent = () => {
disabled={
!payToken ||
!receiveToken ||
!debouncePayAmount ||
Number(payAmount) > 0 ||
inSufficient ||
!selectedBridgeQuote
}
Expand All @@ -482,7 +479,7 @@ export const BridgeContent = () => {
onConfirm={gotoBridge}
/>

{payToken && receiveToken && Number(debouncePayAmount) > 0 && chain ? (
{payToken && receiveToken && Number(payAmount) > 0 && chain ? (
<QuoteList
list={quoteList}
loading={quoteLoading}
Expand All @@ -493,7 +490,7 @@ export const BridgeContent = () => {
userAddress={currentAccount?.address || ''}
chain={chain}
payToken={payToken}
payAmount={debouncePayAmount}
payAmount={payAmount}
receiveToken={receiveToken}
inSufficient={inSufficient}
setSelectedBridgeQuote={setSelectedBridgeQuote}
Expand Down
16 changes: 10 additions & 6 deletions apps/mobile/src/screens/Bridge/components/BridgeHistory.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -197,14 +197,14 @@ const Transaction = forwardRef<View, { data: BridgeHistory }>(

<View style={styles.transactionFooter}>
<TouchableOpacity onPress={gotoScan}>
<Text style={styles.transactionDetail}>
<Text style={styles.transactionDetail} numberOfLines={1}>
{t('page.bridge.detail-tx')}:{' '}
<Text style={styles.transactionId}>
{txId ? ellipsis(txId) : ''}
</Text>
</Text>
</TouchableOpacity>
<Text style={styles.gasFee}>
<Text style={styles.gasFee} numberOfLines={1}>
{!loading
? t('page.bridge.gas-fee', { gasUsed })
: t('page.bridge.gas-x-price', {
Expand Down Expand Up @@ -440,6 +440,7 @@ const getStyles = createGetStyles(colors => ({
paddingTop: 10,
borderTopWidth: 0.5,
borderColor: colors['neutral-line'],
gap: 4,
},
transactionDetail: {
fontSize: 13,
Expand All @@ -449,9 +450,12 @@ const getStyles = createGetStyles(colors => ({
textDecorationLine: 'underline',
},
gasFee: {
textAlign: 'right',
marginLeft: 'auto',
fontSize: 13,
color: colors['neutral-foot'],
flex: 1,
flexWrap: 'wrap',
},
emptyContainer: {
width: '100%',
Expand All @@ -466,7 +470,7 @@ const getStyles = createGetStyles(colors => ({
emptyText: {
textAlign: 'center',
fontSize: 14,
color: 'rgba(62, 73, 94, 1)', // Update as needed
color: colors['neutral-foot'],
},
historyList: {
maxHeight: 434,
Expand All @@ -493,7 +497,7 @@ const getStyles = createGetStyles(colors => ({
borderRadius: 6,
},
emptyView: {
marginTop: 100,
marginTop: '50%',
flex: 1,
alignItems: 'center',
justifyContent: 'center',
Expand All @@ -503,8 +507,8 @@ const getStyles = createGetStyles(colors => ({
fontSize: 20,
fontWeight: '500',
textAlign: 'center',
paddingTop: 20,
paddingBottom: 16,
paddingTop: 16,
paddingBottom: 4,
backgroundColor: colors['neutral-bg-2'],
color: colors['neutral-title-1'],
},
Expand Down
Loading

0 comments on commit 5a79667

Please sign in to comment.