Skip to content

Commit

Permalink
fix(evm): improve bridge tab and origin flow (#359)
Browse files Browse the repository at this point in the history
  • Loading branch information
@danielsimao
danielsimao authored Dec 20, 2024
1 parent 6fa801d commit 2c6edf6
Show file tree
Hide file tree
Showing 9 changed files with 152 additions and 78 deletions.
29 changes: 27 additions & 2 deletions apps/evm/src/app/[lang]/(bridge)/bridge/Bridge.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,8 @@ const Bridge = ({ searchParams }: Props) => {
const [bridgeOrigin, setBridgeOrigin] = useState<BridgeOrigin>(getOrigin(type, chain, symbol));

const handleChangeTab = (key: Key) => {
if (type === key.toString()) return;

const newChain = L1_CHAIN;

setChain(newChain);
Expand Down Expand Up @@ -117,22 +119,45 @@ const Bridge = ({ searchParams }: Props) => {
router.replace('?' + urlSearchParams);
}, [type, chain, router, symbol, urlSearchParams]);

const isBobBridgeDisabled = !(chain === L1_CHAIN || chain === L2_CHAIN || chain === 'BTC');

const isExternalBridgeDisabled = chain === 'BTC' || !!(symbol && externalUnsupportedTokens.includes(symbol));

const isWithdrawTabDisabled = chain === 'BTC';

const tabsDisabledKeys = isWithdrawTabDisabled ? [Type.Withdraw] : undefined;

return (
<Layout>
<StyledFlex alignItems='flex-start' direction={{ base: 'column', md: 'row' }} gap='2xl' marginTop='xl'>
<StyledCard>
<Tabs fullWidth selectedKey={type} size='lg' onSelectionChange={handleChangeTab}>
<Tabs
fullWidth
disabledKeys={tabsDisabledKeys}
selectedKey={type}
size='lg'
onSelectionChange={handleChangeTab}
>
<TabsItem key={Type.Deposit} title={<Trans>Deposit</Trans>}>
<></>
</TabsItem>
<TabsItem key={Type.Withdraw} title={<Trans>Withdraw</Trans>}>
<TabsItem
key={Type.Withdraw}
title={<Trans>Withdraw</Trans>}
tooltipProps={{
isDisabled: !isWithdrawTabDisabled,
label: <Trans>Withdrawals back to BTC are currently not supported</Trans>
}}
>
<></>
</TabsItem>
</Tabs>
<BridgeForm
bridgeOrigin={bridgeOrigin}
chain={chain}
direction={direction}
isBobBridgeDisabled={isBobBridgeDisabled}
isExternalBridgeDisabled={isExternalBridgeDisabled}
symbol={symbol}
onChangeChain={handleChangeChain}
onChangeOrigin={handleChangeOrigin}
Expand Down
18 changes: 8 additions & 10 deletions apps/evm/src/app/[lang]/(bridge)/bridge/components/BridgeForm/BobBridgeForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -137,7 +137,11 @@ const BobBridgeForm = ({
const handleSuccess = (data: BridgeTransaction) => {
onBridgeSuccess?.(data);

handleReset();
// Resetting form and defaulting ETH
form.resetForm({ values: { ...initialValues, [BRIDGE_ASSET]: initialToken.symbol } });

onChangeSymbol?.(initialToken.symbol);
setAmount('');

refetchBalances();
};
Expand Down Expand Up @@ -409,16 +413,10 @@ const BobBridgeForm = ({
hideErrors: 'untouched'
});

const handleReset = () => {
form.resetForm();

onChangeSymbol?.(initialValues[BRIDGE_ASSET]);
setAmount('');
};

// Reseting form but keeping the symbol between Deposit and Withdraw
useEffect(() => {
handleReset();

form.resetForm({ values: { ...initialValues, [BRIDGE_ASSET]: symbol } });
setAmount('');
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [direction]);

Expand Down
10 changes: 4 additions & 6 deletions apps/evm/src/app/[lang]/(bridge)/bridge/components/BridgeForm/BridgeForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,8 @@ type BridgeFormProps = {
direction: TransactionDirection;
symbol?: string;
bridgeOrigin?: BridgeOrigin;
isBobBridgeDisabled?: boolean;
isExternalBridgeDisabled?: boolean;
onChangeSymbol: (symbol: string) => void;
onChangeOrigin?: (origin: BridgeOrigin) => void;
onChangeChain?: (chain: ChainId | 'BTC') => void;
Expand All @@ -65,6 +67,8 @@ const allNetworks = [
const BridgeForm = ({
direction = TransactionDirection.L1_TO_L2,
bridgeOrigin,
isBobBridgeDisabled,
isExternalBridgeDisabled,
chain,
symbol,
onChangeSymbol,
Expand Down Expand Up @@ -181,12 +185,6 @@ const BridgeForm = ({
}
: undefined;

const isBobBridgeDisabled =
(direction === TransactionDirection.L1_TO_L2 && chain !== L1_CHAIN && chain !== 'BTC') ||
(direction === TransactionDirection.L2_TO_L1 && chain !== L1_CHAIN);

const isExternalBridgeDisabled = chain === 'BTC';

return (
<>
<Flex direction='column' marginTop='2xl'>
Expand Down
56 changes: 32 additions & 24 deletions apps/evm/src/locales/en.po
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ msgstr "<0>Stake your BTC with 1-click</0> and receive BTC LSTs on BOB."
msgid "2 hours"
msgstr "2 hours"

#: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BridgeForm.tsx:216
#: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BridgeForm.tsx:214
msgid "3rd Party"
msgstr "3rd Party"

Expand Down Expand Up @@ -146,7 +146,7 @@ msgstr "All Spice you harvest between 9 December 2024 and 12 January 2025 will r
msgid "Already harvesting?"
msgstr "Already harvesting?"

#: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BobBridgeForm.tsx:473
#: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BobBridgeForm.tsx:471
#: src/app/[lang]/(bridge)/components/BtcTokenInput/BtcTokenInput.tsx:38
msgid "Amount"
msgstr "Amount"
Expand All @@ -167,7 +167,7 @@ msgstr "and that you have read and understood our"
msgid "Apply"
msgstr "Apply"

#: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BobBridgeForm.tsx:457
#: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BobBridgeForm.tsx:455
msgid "Approve"
msgstr "Approve"

Expand Down Expand Up @@ -262,7 +262,7 @@ msgstr "Below is the Spice you've harvested from apps. Keep participating to inc
msgid "BOB"
msgstr "BOB"

#: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BridgeForm.tsx:213
#: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BridgeForm.tsx:211
msgid "BOB Bridge"
msgstr "BOB Bridge"

Expand Down Expand Up @@ -335,7 +335,7 @@ msgstr "Book a call with the founders"
msgid "Bridge"
msgstr "Bridge"

#: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BobBridgeForm.tsx:458
#: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BobBridgeForm.tsx:456
#: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BtcBridgeForm.tsx:143
msgid "Bridge Asset"
msgstr "Bridge Asset"
Expand All @@ -349,11 +349,11 @@ msgstr "Bridge Assets"
msgid "Bridge BTC LSTs to BOB"
msgstr "Bridge BTC LSTs to BOB"

#: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BobBridgeForm.tsx:453
#: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BobBridgeForm.tsx:451
msgid "Bridge Disabled"
msgstr "Bridge Disabled"

#: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BridgeForm.tsx:206
#: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BridgeForm.tsx:204
msgid "bridge network"
msgstr "bridge network"

Expand Down Expand Up @@ -402,7 +402,7 @@ msgstr "Cannot stake into {assetName} due to insufficient liquidity."
#~ msgid "Category"
#~ msgstr "Category"

#: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BobBridgeForm.tsx:455
#: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BobBridgeForm.tsx:453
msgid "Checking Allowance"
msgstr "Checking Allowance"

Expand Down Expand Up @@ -533,7 +533,7 @@ msgstr "Current TVL:"
msgid "Deploy high priority assets into high priority DeFi protocols to maximize your Spice harvest."
msgstr "Deploy high priority assets into high priority DeFi protocols to maximize your Spice harvest."

#: src/app/[lang]/(bridge)/bridge/Bridge.tsx:125
#: src/app/[lang]/(bridge)/bridge/Bridge.tsx:141
#: src/app/[lang]/(bridge)/components/TransactionList/TransactionDetails.tsx:41
msgid "Deposit"
msgstr "Deposit"
Expand Down Expand Up @@ -617,7 +617,7 @@ msgstr "enable ETH top-up for transaction fees on BOB network"
#~ msgid "Enter Address"
#~ msgstr "Enter Address"

#: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BobBridgeForm.tsx:484
#: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BobBridgeForm.tsx:482
#: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BtcBridgeForm.tsx:131
#: src/app/[lang]/(bridge)/stake/components/StakeForm/BtcStakeForm.tsx:95
msgid "Enter destination address"
Expand Down Expand Up @@ -693,7 +693,7 @@ msgstr "Fee"
msgid "Feeling lucky? Try your luck with the daily lottery!<0/>Participate in Fusion voting to receive 3 lottery tickets each day."
msgstr "Feeling lucky? Try your luck with the daily lottery!<0/>Participate in Fusion voting to receive 3 lottery tickets each day."

#: src/app/[lang]/(bridge)/components/TransactionList/TransactionList.tsx:95
#: src/app/[lang]/(bridge)/components/TransactionList/TransactionList.tsx:102
msgid "Fetching bridging operations..."
msgstr "Fetching bridging operations..."

Expand Down Expand Up @@ -886,11 +886,11 @@ msgstr "Learn More"
#~ msgid "Learn more about {0}"
#~ msgstr "Learn more about {0}"

#: src/app/[lang]/(bridge)/utils/stakeData.tsx:106
#: src/app/[lang]/(bridge)/utils/stakeData.tsx:104
msgid "Lend out tBTC on Segment."
msgstr "Lend out tBTC on Segment."

#: src/app/[lang]/(bridge)/utils/stakeData.tsx:121
#: src/app/[lang]/(bridge)/utils/stakeData.tsx:119
msgid "Lend out wBTC on Segment."
msgstr "Lend out wBTC on Segment."

Expand Down Expand Up @@ -1084,7 +1084,7 @@ msgstr "new tickets drop in {timeToNextDraw}"
#~ msgid "No assets shown"
#~ msgstr "No assets shown"

#: src/app/[lang]/(bridge)/components/TransactionList/TransactionList.tsx:122
#: src/app/[lang]/(bridge)/components/TransactionList/TransactionList.tsx:130
msgid "No bridging operations found"
msgstr "No bridging operations found"

Expand Down Expand Up @@ -1256,7 +1256,7 @@ msgstr "Receive"
#~ msgid "Receive {ticker}"
#~ msgstr "Receive {ticker}"

#: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BobBridgeForm.tsx:483
#: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BobBridgeForm.tsx:481
#: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BtcBridgeForm.tsx:131
#: src/app/[lang]/(bridge)/stake/components/StakeForm/BtcStakeForm.tsx:94
msgid "Recipient"
Expand Down Expand Up @@ -1351,11 +1351,11 @@ msgstr "select gas token"
msgid "Select Network"
msgstr "Select Network"

#: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BridgeForm.tsx:170
#: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BridgeForm.tsx:174
msgid "select network to bridge from"
msgstr "select network to bridge from"

#: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BridgeForm.tsx:180
#: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BridgeForm.tsx:184
msgid "select network to bridge to"
msgstr "select network to bridge to"

Expand Down Expand Up @@ -1509,11 +1509,11 @@ msgstr "Stake"
msgid "Stake BTC into Babylon via Bedrock and receive liquid staking token uniBTC."
msgstr "Stake BTC into Babylon via Bedrock and receive liquid staking token uniBTC."

#: src/app/[lang]/(bridge)/utils/stakeData.tsx:89
#: src/app/[lang]/(bridge)/utils/stakeData.tsx:87
msgid "Stake BTC into Babylon via Bedrock, get uniBTC liquid staking token, and deposit into Pell restaking."
msgstr "Stake BTC into Babylon via Bedrock, get uniBTC liquid staking token, and deposit into Pell restaking."

#: src/app/[lang]/(bridge)/utils/stakeData.tsx:154
#: src/app/[lang]/(bridge)/utils/stakeData.tsx:151
msgid "Stake BTC into Babylon via Bedrock, get uniBTC liquid staking token, and lend it out on Segment."
msgstr "Stake BTC into Babylon via Bedrock, get uniBTC liquid staking token, and lend it out on Segment."

Expand All @@ -1529,15 +1529,15 @@ msgstr "Stake BTC into Babylon via Solv Protocol and receive liquid staking toke
#~ msgid "Stake BTC into Babylon via Solv Protocol, get solvBTC.BBN liquid staking token, and deposit into Pell."
#~ msgstr "Stake BTC into Babylon via Solv Protocol, get solvBTC.BBN liquid staking token, and deposit into Pell."

#: src/app/[lang]/(bridge)/utils/stakeData.tsx:71
#: src/app/[lang]/(bridge)/utils/stakeData.tsx:70
msgid "Stake BTC into Babylon via Solv Protocol, get SolvBTC.BBN liquid staking token, and deposit into Pell."
msgstr "Stake BTC into Babylon via Solv Protocol, get SolvBTC.BBN liquid staking token, and deposit into Pell."

#: src/app/[lang]/(bridge)/utils/stakeData.tsx:124
#~ msgid "Stake BTC into Babylon via Solv Protocol, get solvBTC.BBN liquid staking token, and lend it out on Segment."
#~ msgstr "Stake BTC into Babylon via Solv Protocol, get solvBTC.BBN liquid staking token, and lend it out on Segment."

#: src/app/[lang]/(bridge)/utils/stakeData.tsx:136
#: src/app/[lang]/(bridge)/utils/stakeData.tsx:134
msgid "Stake BTC into Babylon via Solv Protocol, get SolvBTC.BBN liquid staking token, and lend it out on Segment."
msgstr "Stake BTC into Babylon via Solv Protocol, get SolvBTC.BBN liquid staking token, and lend it out on Segment."

Expand Down Expand Up @@ -1963,7 +1963,7 @@ msgstr "User rejected the request."
msgid "Username"
msgstr "Username"

#: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BridgeForm.tsx:221
#: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BridgeForm.tsx:219
msgid "Using the official bridge usually takes 7 days. For faster withdrawals we recommend using a 3rd party bridge for supported tokens (ETH, WBTC, USDT, USDC)."
msgstr "Using the official bridge usually takes 7 days. For faster withdrawals we recommend using a 3rd party bridge for supported tokens (ETH, WBTC, USDT, USDC)."

Expand All @@ -1979,7 +1979,7 @@ msgstr "Using the official bridge usually takes 7 days. For faster withdrawals w
#~ msgid "View a summary of your wallet on the BOB network. DeFi positions may not be tracked."
#~ msgstr "View a summary of your wallet on the BOB network. DeFi positions may not be tracked."

#: src/app/[lang]/(bridge)/components/TransactionList/TransactionList.tsx:132
#: src/app/[lang]/(bridge)/components/TransactionList/TransactionList.tsx:140
msgid "View All Transactions"
msgstr "View All Transactions"

Expand Down Expand Up @@ -2071,7 +2071,7 @@ msgstr "When you vote, you do not give away any of your harvest. Your Spice tota
#~ msgid "Where total_qualified_spice is the total spice earned by all users that qualify for Babylon points, i.e., had LST in their wallet at some points and are registered in Fusion."
#~ msgstr "Where total_qualified_spice is the total spice earned by all users that qualify for Babylon points, i.e., had LST in their wallet at some points and are registered in Fusion."

#: src/app/[lang]/(bridge)/bridge/Bridge.tsx:128
#: src/app/[lang]/(bridge)/bridge/Bridge.tsx:146
#: src/app/[lang]/(bridge)/components/TransactionList/TransactionDetails.tsx:41
msgid "Withdraw"
msgstr "Withdraw"
Expand All @@ -2090,6 +2090,14 @@ msgstr "Withdraw Locked Assets"
msgid "Withdraw to L1 failed. Please try again."
msgstr "Withdraw to L1 failed. Please try again."

#: src/app/[lang]/(bridge)/bridge/Bridge.tsx:149
msgid "Withdrawals back to BTC are currently not supported"
msgstr "Withdrawals back to BTC are currently not supported"

#: src/app/[lang]/(bridge)/bridge/Bridge.tsx:149
#~ msgid "Withdraws back to BTC are currently not supported"
#~ msgstr "Withdraws back to BTC are currently not supported"

#: src/app/[lang]/fusion/components/UserInfo/MultipliersModal.tsx:209
msgid "Yield Assets"
msgstr "Yield Assets"
Expand Down
Loading

0 comments on commit 2c6edf6

Please sign in to comment.