m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 01:47:00 +01:00
Code

Disable Bridge button on unsupported networks (#18268)

Browse Source
This commit is contained in:
micaelae 2023-03-23 10:24:10 -07:00 committed by GitHub
parent 0351309227
commit 2fc0d93789
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 101 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
shared/constants/bridge.ts Normal file
View File

@ -0,0 +1,10 @@
import { CHAIN_IDS } from './network';
export const ALLOWED_BRIDGE_CHAIN_IDS = [
CHAIN_IDS.MAINNET,
CHAIN_IDS.BSC,
CHAIN_IDS.POLYGON,
CHAIN_IDS.AVALANCHE,
CHAIN_IDS.OPTIMISM,
CHAIN_IDS.ARBITRUM,
];

43
ui/components/app/wallet-overview/eth-overview.js
View File

@ -19,6 +19,7 @@ import {
getCurrentKeyring,
getSwapsDefaultToken,
getIsSwapsChain,
getIsBridgeChain,
getIsBuyableChain,
getNativeCurrencyImage,
getSelectedAccountCachedBalance,
@ -56,6 +57,7 @@ const EthOverview = ({ className }) => {
const showFiat = useSelector(getShouldShowFiat);
const balance = useSelector(getSelectedAccountCachedBalance);
const isSwapsChain = useSelector(getIsSwapsChain);
const isBridgeChain = useSelector(getIsBridgeChain);
const isBuyableChain = useSelector(getIsBuyableChain);
const primaryTokenImage = useSelector(getNativeCurrencyImage);
const defaultSwapsToken = useSelector(getSwapsDefaultToken);
@ -232,26 +234,41 @@ const EthOverview = ({ className }) => {
/>
<IconButton
className="eth-overview__button"
disabled={!isBridgeChain}
data-testid="eth-overview-bridge"
Icon={
<Icon name={ICON_NAMES.BRIDGE} color={IconColor.primaryInverse} />
}
label={t('bridge')}
onClick={() => {
const portfolioUrl = process.env.PORTFOLIO_URL;
const bridgeUrl = `${portfolioUrl}/bridge`;
global.platform.openTab({
url: `${bridgeUrl}?metamaskEntry=ext`,
});
trackEvent({
category: EVENT.CATEGORIES.NAVIGATION,
event: EVENT_NAMES.BRIDGE_LINK_CLICKED,
properties: {
location: 'Home',
text: 'Bridge',
},
});
if (isBridgeChain) {
const portfolioUrl = process.env.PORTFOLIO_URL;
const bridgeUrl = `${portfolioUrl}/bridge`;
global.platform.openTab({
url: `${bridgeUrl}?metamaskEntry=ext`,
});
trackEvent({
category: EVENT.CATEGORIES.NAVIGATION,
event: EVENT_NAMES.BRIDGE_LINK_CLICKED,
properties: {
location: 'Home',
text: 'Bridge',
},
});
}
}}
tooltipRender={
isBridgeChain
? null
: (contents) => (
<Tooltip
title={t('currentlyUnavailable')}
position="bottom"
>
{contents}
</Tooltip>
)
}
/>
</>
}

46
ui/components/app/wallet-overview/eth-overview.test.js
View File

@ -145,13 +145,30 @@ describe('EthOverview', () => {
expect(secondaryBalance).toHaveTextContent('0');
});
it('should always show the Bridge button', () => {
const { queryByTestId } = renderWithProvider(<EthOverview />, store);
it('should have the Bridge button enabled if chain id is part of supported chains', () => {
const mockedAvalancheStore = {
...mockStore,
metamask: {
...mockStore.metamask,
provider: { ...mockStore.metamask.provider, chainId: '0xa86a' },
},
};
const mockedStore = configureMockStore([thunk])(mockedAvalancheStore);
const { queryByTestId, queryByText } = renderWithProvider(
<EthOverview />,
mockedStore,
);
const bridgeButton = queryByTestId(ETH_OVERVIEW_BRIDGE);
expect(bridgeButton).toBeInTheDocument();
expect(bridgeButton).toBeEnabled();
expect(queryByText('Bridge').parentElement).not.toHaveAttribute(
'data-original-title',
'Unavailable on this network',
);
});
it('should open the Bridge URI when clicking on Bridge button', async () => {
it('should open the Bridge URI when clicking on Bridge button on supported network', async () => {
const { queryByTestId } = renderWithProvider(<EthOverview />, store);
const bridgeButton = queryByTestId(ETH_OVERVIEW_BRIDGE);
@ -169,6 +186,29 @@ describe('EthOverview', () => {
);
});
it('should have the Bridge button disabled if chain id is not part of supported chains', () => {
const mockedFantomStore = {
...mockStore,
metamask: {
...mockStore.metamask,
provider: { ...mockStore.metamask.provider, chainId: '0xfa' },
},
};
const mockedStore = configureMockStore([thunk])(mockedFantomStore);
const { queryByTestId, queryByText } = renderWithProvider(
<EthOverview />,
mockedStore,
);
const bridgeButton = queryByTestId(ETH_OVERVIEW_BRIDGE);
expect(bridgeButton).toBeInTheDocument();
expect(bridgeButton).toBeDisabled();
expect(queryByText('Bridge').parentElement).toHaveAttribute(
'data-original-title',
'Unavailable on this network',
);
});
it('should always show the Portfolio button', () => {
const { queryByTestId } = renderWithProvider(<EthOverview />, store);
const portfolioButton = queryByTestId(ETH_OVERVIEW_PORTFOLIO);

1
ui/components/ui/icon-button/icon-button.scss
View File

@ -22,6 +22,7 @@
border-radius: 18px;
margin-top: 6px;
margin-bottom: 5px;
margin-inline: auto;
}
&--disabled {

7
ui/selectors/selectors.js
View File

@ -41,6 +41,8 @@ import {
ALLOWED_DEV_SWAPS_CHAIN_IDS,
} from '../../shared/constants/swaps';
import { ALLOWED_BRIDGE_CHAIN_IDS } from '../../shared/constants/bridge';
import {
shortenAddress,
getAccountByAddress,
@ -750,6 +752,11 @@ export function getIsSwapsChain(state) {
: ALLOWED_DEV_SWAPS_CHAIN_IDS.includes(chainId);
}
export function getIsBridgeChain(state) {
const chainId = getCurrentChainId(state);
return ALLOWED_BRIDGE_CHAIN_IDS.includes(chainId);
}
export function getIsBuyableChain(state) {
const chainId = getCurrentChainId(state);
return Object.keys(BUYABLE_CHAINS_MAP).includes(chainId);

10
ui/selectors/selectors.test.js
View File

@ -390,4 +390,14 @@ describe('Selectors', () => {
const isDesktopEnabled = selectors.getIsDesktopEnabled(mockState);
expect(isDesktopEnabled).toBeFalsy();
});
it('#getIsBridgeChain', () => {
mockState.metamask.provider.chainId = '0xa';
const isOptimismSupported = selectors.getIsBridgeChain(mockState);
expect(isOptimismSupported).toBeTruthy();
mockState.metamask.provider.chainId = '0xfa';
const isFantomSupported = selectors.getIsBridgeChain(mockState);
expect(isFantomSupported).toBeFalsy();
});
});