Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Chain Badge consolidation & backend delivery #6328

Open
wants to merge 21 commits into
base: develop
Choose a base branch
from
Open

Chain Badge consolidation & backend delivery #6328

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
3c5ec4f
start work on backend driven chain badge
walmat Dec 12, 2024
a339e99
Update src/components/expanded-state/AvailableNetworksv2.tsx
walmat Dec 12, 2024
0fae303
consolidate SwapCoinIcon into RainbowCoinIcon
walmat Dec 13, 2024
909d8fd
Merge branch 'develop' into @matthew/backend-chain-badge
walmat Dec 16, 2024
2e0dca6
replace ChainBadge with ChainImage and consolidate + cleanup
walmat Dec 16, 2024
ef79118
fix missing native asset icon URL from swaps
walmat Dec 16, 2024
e9f7542
more badge sizing fixes
walmat Dec 16, 2024
ab5192b
add migration and clearing of FastImage cache in dev section to fix m…
walmat Dec 17, 2024
17c5282
fix lint
walmat Dec 17, 2024
df53969
fix up swaps
walmat Dec 17, 2024
7903783
address more swaps nuances
walmat Dec 17, 2024
9615017
more sizing issues fixed
walmat Dec 17, 2024
2b110f5
remove size={40} from RainbowCoinIcon as it's default
walmat Dec 17, 2024
a672fea
Merge branch 'develop' into @matthew/backend-chain-badge
walmat Dec 17, 2024
854663a
merge migrations
walmat Dec 18, 2024
5647e22
chore: merge
walmat Dec 19, 2024
f367641
chore: merge
walmat Dec 19, 2024
2a3d313
merge develop
walmat Dec 23, 2024
e093c7a
Convert Chain Selection DropdownMenu to Backend Networks (#6344)
walmat Dec 23, 2024
2bde15e
refactor trending tokens to remove SwapCoinIcon and fix APP-2217
walmat Dec 23, 2024
b1398f2
fix APP-2218
walmat Dec 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 1 addition & 6 deletions src/components/L2Disclaimer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,6 @@ import { Text } from './text';
import { padding, position } from '@/styles';
import { darkModeThemeColors } from '@/styles/colors';
import * as lang from '@/languages';
import { isL2Chain } from '@/handlers/web3';
import { EthCoinIcon } from './coin-icon/EthCoinIcon';
import { useBackendNetworksStore } from '@/state/backendNetworks/backendNetworks';

const L2Disclaimer = ({
Expand All @@ -23,7 +21,6 @@ const L2Disclaimer = ({
prominent,
customText,
symbol,
forceDarkMode,
}) => {
const localColors = isNft ? darkModeThemeColors : colors;
const radialGradientProps = {
Expand All @@ -36,15 +33,13 @@ const L2Disclaimer = ({
},
};

const isL2 = isL2Chain({ chainId });

return (
<>
<ButtonPressAnimation marginBottom={marginBottom} onPress={onPress} scaleTo={0.95}>
<Row borderRadius={16} marginHorizontal={marginHorizontal} style={padding.object(android ? 6 : 10, 10, android ? 6 : 10, 10)}>
<RadialGradient {...radialGradientProps} borderRadius={16} radius={600} />
<Column justify="center">
{isL2 ? <ChainBadge chainId={chainId} position="relative" size="small" forceDark={forceDarkMode} /> : <EthCoinIcon size={20} />}
<ChainBadge chainId={chainId} position="relative" size="small" />
</Column>
<Column flex={1} justify="center" marginHorizontal={8}>
<Text
Expand Down
103 changes: 5 additions & 98 deletions src/components/coin-icon/ChainBadge.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,50 +1,10 @@
import React from 'react';
import FastImage from 'react-native-fast-image';
import ArbitrumBadge from '../../assets/badges/arbitrumBadge.png';
import ArbitrumBadgeDark from '../../assets/badges/arbitrumBadgeDark.png';
import ArbitrumBadgeLarge from '../../assets/badges/arbitrumBadgeLarge.png';
import ArbitrumBadgeLargeDark from '../../assets/badges/arbitrumBadgeLargeDark.png';
import OptimismBadge from '../../assets/badges/optimismBadge.png';
import OptimismBadgeDark from '../../assets/badges/optimismBadgeDark.png';
import OptimismBadgeLarge from '../../assets/badges/optimismBadgeLarge.png';
import OptimismBadgeLargeDark from '../../assets/badges/optimismBadgeLargeDark.png';
import PolygonBadge from '../../assets/badges/polygonBadge.png';
import PolygonBadgeDark from '../../assets/badges/polygonBadgeDark.png';
import PolygonBadgeLarge from '../../assets/badges/polygonBadgeLarge.png';
import PolygonBadgeLargeDark from '../../assets/badges/polygonBadgeLargeDark.png';
import BscBadge from '../../assets/badges/bscBadge.png';
import BscBadgeDark from '../../assets/badges/bscBadgeDark.png';
import BscBadgeLarge from '../../assets/badges/bscBadgeLarge.png';
import BscBadgeLargeDark from '../../assets/badges/bscBadgeLargeDark.png';
import ZoraBadge from '../../assets/badges/zoraBadge.png';
import ZoraBadgeDark from '../../assets/badges/zoraBadgeDark.png';
import ZoraBadgeLarge from '../../assets/badges/zoraBadgeLarge.png';
import ZoraBadgeLargeDark from '../../assets/badges/zoraBadgeLargeDark.png';
import BaseBadge from '../../assets/badges/baseBadge.png';
import BaseBadgeDark from '../../assets/badges/baseBadgeDark.png';
import BaseBadgeLarge from '../../assets/badges/baseBadgeLarge.png';
import BaseBadgeLargeDark from '../../assets/badges/baseBadgeLargeDark.png';
import AvalancheBadge from '../../assets/badges/avalancheBadge.png';
import AvalancheBadgeDark from '../../assets/badges/avalancheBadgeDark.png';
import AvalancheBadgeLarge from '../../assets/badges/avalancheBadgeLarge.png';
import AvalancheBadgeLargeDark from '../../assets/badges/avalancheBadgeLargeDark.png';
import BlastBadge from '../../assets/badges/blastBadge.png';
import BlastBadgeDark from '../../assets/badges/blastBadgeDark.png';
import BlastBadgeLarge from '../../assets/badges/blastBadgeLarge.png';
import BlastBadgeLargeDark from '../../assets/badges/blastBadgeLargeDark.png';
import DegenBadge from '../../assets/badges/degenBadge.png';
import DegenBadgeDark from '../../assets/badges/degenBadgeDark.png';
import DegenBadgeLarge from '../../assets/badges/degenBadgeLarge.png';
import DegenBadgeLargeDark from '../../assets/badges/degenBadgeLargeDark.png';
import ApechainBadge from '../../assets/badges/apechainBadge.png';
import ApechainBadgeDark from '../../assets/badges/apechainBadgeDark.png';
import ApechainBadgeLarge from '../../assets/badges/apechainBadgeLarge.png';
import ApechainBadgeLargeDark from '../../assets/badges/apechainBadgeLargeDark.png';
import { Centered } from '../layout';
import styled from '@/styled-thing';
import { position as positions } from '@/styles';
import { ChainBadgeSizeConfigs } from '@/components/coin-icon/ChainBadgeSizeConfigs';
import { ChainId } from '@/state/backendNetworks/types';
import { useBackendNetworksStore } from '@/state/backendNetworks/backendNetworks';

const ChainIcon = styled(FastImage)({
height: ({ containerSize }) => containerSize,
Expand All @@ -70,64 +30,11 @@ export default function ChainBadge({
marginBottom = 0,
position = 'absolute',
size = 'small',
forceDark = false,
showBadge = true,
}) {
const { isDarkMode: isDarkModeGlobal } = useTheme();
const { containerSize, iconSize } = ChainBadgeSizeConfigs[size];

const isDarkMode = forceDark ? true : isDarkModeGlobal;

const source = useMemo(() => {
let val = null;
if (size === 'large') {
if (chainId === ChainId.apechain) {
val = isDarkMode ? ApechainBadgeLargeDark : ApechainBadgeLarge;
} else if (chainId === ChainId.arbitrum) {
val = isDarkMode ? ArbitrumBadgeLargeDark : ArbitrumBadgeLarge;
} else if (chainId === ChainId.optimism) {
val = isDarkMode ? OptimismBadgeLargeDark : OptimismBadgeLarge;
} else if (chainId === ChainId.polygon) {
val = isDarkMode ? PolygonBadgeLargeDark : PolygonBadgeLarge;
} else if (chainId === ChainId.bsc) {
val = isDarkMode ? BscBadgeLargeDark : BscBadgeLarge;
} else if (chainId === ChainId.zora) {
val = isDarkMode ? ZoraBadgeLargeDark : ZoraBadgeLarge;
} else if (chainId === ChainId.base) {
val = isDarkMode ? BaseBadgeLargeDark : BaseBadgeLarge;
} else if (chainId === ChainId.avalanche) {
val = isDarkMode ? AvalancheBadgeLargeDark : AvalancheBadgeLarge;
} else if (chainId === ChainId.blast) {
val = isDarkMode ? BlastBadgeLargeDark : BlastBadgeLarge;
} else if (chainId === ChainId.degen) {
val = isDarkMode ? DegenBadgeLargeDark : DegenBadgeLarge;
}
} else {
if (chainId === ChainId.apechain) {
val = isDarkMode ? ApechainBadgeDark : ApechainBadge;
} else if (chainId === ChainId.arbitrum) {
val = isDarkMode ? ArbitrumBadgeDark : ArbitrumBadge;
} else if (chainId === ChainId.optimism) {
val = isDarkMode ? OptimismBadgeDark : OptimismBadge;
} else if (chainId === ChainId.polygon) {
val = isDarkMode ? PolygonBadgeDark : PolygonBadge;
} else if (chainId === ChainId.bsc) {
val = isDarkMode ? BscBadgeDark : BscBadge;
} else if (chainId === ChainId.zora) {
val = isDarkMode ? ZoraBadgeDark : ZoraBadge;
} else if (chainId === ChainId.base) {
val = isDarkMode ? BaseBadgeDark : BaseBadge;
} else if (chainId === ChainId.avalanche) {
val = isDarkMode ? AvalancheBadgeDark : AvalancheBadge;
} else if (chainId === ChainId.blast) {
val = isDarkMode ? BlastBadgeDark : BlastBadge;
} else if (chainId === ChainId.degen) {
val = isDarkMode ? DegenBadgeDark : DegenBadge;
}
}
return val;
}, [chainId, isDarkMode, size]);

if (!source) return null;
const chainBadge = useBackendNetworksStore.getState().getChainsBadge()[chainId];
if (!chainBadge || !showBadge) return null;

return (
<IndicatorIconContainer
Expand All @@ -137,7 +44,7 @@ export default function ChainBadge({
marginBottom={marginBottom}
position={position}
>
<ChainIcon containerSize={containerSize} iconSize={iconSize} source={source} />
<ChainIcon containerSize={containerSize} iconSize={iconSize} source={{ uri: chainBadge }} />
</IndicatorIconContainer>
);
}
66 changes: 0 additions & 66 deletions src/components/coin-icon/ChainIcon.js
View file
Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion src/components/coin-icon/CoinIcon.tsx
View file
Open in desktop

This file was deleted.

142 changes: 0 additions & 142 deletions src/components/coin-icon/CoinIconFallback.js
View file
Open in desktop

This file was deleted.

Loading
Loading