diff --git a/.changeset/ready-books-march.md b/.changeset/ready-books-march.md new file mode 100644 index 000000000..137297830 --- /dev/null +++ b/.changeset/ready-books-march.md @@ -0,0 +1,19 @@ +--- +'@reown/appkit-scaffold-react-native': patch +'@reown/appkit-ethers5-react-native': patch +'@reown/appkit-ethers-react-native': patch +'@reown/appkit-wagmi-react-native': patch +'@reown/appkit-core-react-native': patch +'@reown/appkit-auth-ethers-react-native': patch +'@reown/appkit-auth-wagmi-react-native': patch +'@reown/appkit-react-native-cli': patch +'@reown/appkit-coinbase-ethers-react-native': patch +'@reown/appkit-coinbase-wagmi-react-native': patch +'@reown/appkit-common-react-native': patch +'@reown/appkit-scaffold-utils-react-native': patch +'@reown/appkit-siwe-react-native': patch +'@reown/appkit-ui-react-native': patch +'@reown/appkit-wallet-react-native': patch +--- + +fix: correctly set approved networks and support all networks flag diff --git a/.changeset/six-dots-punch.md b/.changeset/six-dots-punch.md new file mode 100644 index 000000000..60d46ebd7 --- /dev/null +++ b/.changeset/six-dots-punch.md @@ -0,0 +1,18 @@ +--- +'@reown/appkit-scaffold-react-native': patch +'@reown/appkit-core-react-native': patch +'@reown/appkit-ui-react-native': patch +'@reown/appkit-auth-ethers-react-native': patch +'@reown/appkit-auth-wagmi-react-native': patch +'@reown/appkit-coinbase-ethers-react-native': patch +'@reown/appkit-coinbase-wagmi-react-native': patch +'@reown/appkit-common-react-native': patch +'@reown/appkit-ethers-react-native': patch +'@reown/appkit-ethers5-react-native': patch +'@reown/appkit-scaffold-utils-react-native': patch +'@reown/appkit-siwe-react-native': patch +'@reown/appkit-wagmi-react-native': patch +'@reown/appkit-wallet-react-native': patch +--- + +fix: show network images correctly diff --git a/package.json b/package.json index fc5a5c418..106bc985d 100644 --- a/package.json +++ b/package.json @@ -92,6 +92,8 @@ "esbuild": "0.25.0", "postcss": "8.4.31", "cookie": "0.7.0", - "ip": "^2.0.1" + "ip": "^2.0.1", + "form-data": "3.0.4", + "sha.js": "2.4.12" } } diff --git a/packages/core/src/controllers/ConnectorController.ts b/packages/core/src/controllers/ConnectorController.ts index 7ff77664c..798aadd51 100644 --- a/packages/core/src/controllers/ConnectorController.ts +++ b/packages/core/src/controllers/ConnectorController.ts @@ -42,7 +42,7 @@ export const ConnectorController = { return state.connectors.find(c => c.type === 'AUTH'); }, - setConnectedConnector( + async setConnectedConnector( connectorType: ConnectorControllerState['connectedConnector'], saveStorage = true ) { @@ -50,9 +50,9 @@ export const ConnectorController = { if (saveStorage) { if (connectorType) { - StorageUtil.setConnectedConnector(connectorType); + await StorageUtil.setConnectedConnector(connectorType); } else { - StorageUtil.removeConnectedConnector(); + await StorageUtil.removeConnectedConnector(); } } }, diff --git a/packages/core/src/controllers/NetworkController.ts b/packages/core/src/controllers/NetworkController.ts index f1023c952..25649d16e 100644 --- a/packages/core/src/controllers/NetworkController.ts +++ b/packages/core/src/controllers/NetworkController.ts @@ -1,13 +1,13 @@ import { proxy, ref } from 'valtio'; import type { CaipNetwork, CaipNetworkId } from '../utils/TypeUtil'; import { PublicStateController } from './PublicStateController'; -import { NetworkUtil } from '@reown/appkit-common-react-native'; +import { NetworkUtil, type ConnectorType } from '@reown/appkit-common-react-native'; import { ConstantsUtil } from '../utils/ConstantsUtil'; // -- Types --------------------------------------------- // export interface NetworkControllerClient { switchCaipNetwork: (network: NetworkControllerState['caipNetwork']) => Promise; - getApprovedCaipNetworksData: () => Promise<{ + getApprovedCaipNetworksData: (connectorType?: ConnectorType) => Promise<{ approvedCaipNetworkIds: NetworkControllerState['approvedCaipNetworkIds']; supportsAllNetworks: NetworkControllerState['supportsAllNetworks']; }>; @@ -77,8 +77,8 @@ export const NetworkController = { return Boolean(state.smartAccountEnabledNetworks?.includes(Number(networkId))); }, - async getApprovedCaipNetworksData() { - const data = await this._getClient().getApprovedCaipNetworksData(); + async getApprovedCaipNetworksData(connectorType?: ConnectorType) { + const data = await this._getClient().getApprovedCaipNetworksData(connectorType); state.supportsAllNetworks = data.supportsAllNetworks; state.approvedCaipNetworkIds = data.approvedCaipNetworkIds; }, diff --git a/packages/core/src/utils/AssetUtil.ts b/packages/core/src/utils/AssetUtil.ts index 30efc3eb4..c16115d58 100644 --- a/packages/core/src/utils/AssetUtil.ts +++ b/packages/core/src/utils/AssetUtil.ts @@ -14,13 +14,17 @@ export const AssetUtil = { return undefined; }, - getNetworkImage(network?: CaipNetwork) { - if (network?.imageUrl) { - return network?.imageUrl; + getNetworkImage(network?: CaipNetwork, networkImages?: Record) { + if (!network) { + return undefined; } - if (network?.imageId) { - return AssetController.state.networkImages[network.imageId]; + if (network.imageUrl) { + return network.imageUrl; + } + + if (network.imageId) { + return networkImages?.[network.imageId]; } return undefined; diff --git a/packages/ethers/src/client.ts b/packages/ethers/src/client.ts index c60c214d3..ec4dc2f0f 100644 --- a/packages/ethers/src/client.ts +++ b/packages/ethers/src/client.ts @@ -139,17 +139,18 @@ export class AppKit extends AppKitScaffold { getApprovedCaipNetworksData: async () => new Promise(async resolve => { - const walletChoice = await StorageUtil.getConnectedConnector(); + const walletId = (await StorageUtil.getItem(EthersConstantsUtil.WALLET_ID)) as string; + const walletChoice = PresetsUtil.ConnectorTypesMap[walletId ?? '']; const walletConnectType = PresetsUtil.ConnectorTypesMap[ConstantsUtil.WALLET_CONNECT_CONNECTOR_ID]!; const authType = PresetsUtil.ConnectorTypesMap[ConstantsUtil.AUTH_CONNECTOR_ID]!; - if (walletChoice?.includes(walletConnectType)) { + if (walletChoice === walletConnectType) { const provider = await this.getWalletConnectProvider(); const result = getWalletConnectCaipNetworks(provider); resolve(result); - } else if (walletChoice?.includes(authType)) { + } else if (walletChoice === authType) { const result = getAuthCaipNetworks(); resolve(result); } else { diff --git a/packages/ethers5/src/client.ts b/packages/ethers5/src/client.ts index 5fb0625c1..b6693dab7 100644 --- a/packages/ethers5/src/client.ts +++ b/packages/ethers5/src/client.ts @@ -126,17 +126,18 @@ export class AppKit extends AppKitScaffold { getApprovedCaipNetworksData: async () => new Promise(async resolve => { - const walletChoice = await StorageUtil.getConnectedConnector(); + const walletId = (await StorageUtil.getItem(EthersConstantsUtil.WALLET_ID)) as string; + const walletChoice = PresetsUtil.ConnectorTypesMap[walletId ?? '']; const walletConnectType = PresetsUtil.ConnectorTypesMap[ConstantsUtil.WALLET_CONNECT_CONNECTOR_ID]!; const authType = PresetsUtil.ConnectorTypesMap[ConstantsUtil.AUTH_CONNECTOR_ID]!; - if (walletChoice?.includes(walletConnectType)) { + if (walletChoice === walletConnectType) { const provider = await this.getWalletConnectProvider(); const result = getWalletConnectCaipNetworks(provider); resolve(result); - } else if (walletChoice?.includes(authType)) { + } else if (walletChoice === authType) { const result = getAuthCaipNetworks(); resolve(result); } else { diff --git a/packages/scaffold/src/client.ts b/packages/scaffold/src/client.ts index c8133f4cc..46f6e3356 100644 --- a/packages/scaffold/src/client.ts +++ b/packages/scaffold/src/client.ts @@ -33,6 +33,7 @@ import { SIWEController, type SIWEControllerClient } from '@reown/appkit-siwe-re import { ConstantsUtil, ErrorUtil, + type ConnectorType, type ThemeMode, type ThemeVariables } from '@reown/appkit-common-react-native'; @@ -197,7 +198,7 @@ export class AppKitScaffold { }; protected getApprovedCaipNetworksData: (typeof NetworkController)['getApprovedCaipNetworksData'] = - () => NetworkController.getApprovedCaipNetworksData(); + (connectorType?: ConnectorType) => NetworkController.getApprovedCaipNetworksData(connectorType); protected resetNetwork: (typeof NetworkController)['resetNetwork'] = () => { NetworkController.resetNetwork(); diff --git a/packages/scaffold/src/modal/w3m-account-button/index.tsx b/packages/scaffold/src/modal/w3m-account-button/index.tsx index b11995fd7..5599924f8 100644 --- a/packages/scaffold/src/modal/w3m-account-button/index.tsx +++ b/packages/scaffold/src/modal/w3m-account-button/index.tsx @@ -7,7 +7,8 @@ import { ModalController, AssetUtil, ThemeController, - ApiController + ApiController, + AssetController } from '@reown/appkit-core-react-native'; import { AccountButton as AccountButtonUI, ThemeProvider } from '@reown/appkit-ui-react-native'; @@ -27,9 +28,10 @@ export function AccountButton({ balance, disabled, style, testID }: AccountButto profileName } = useSnapshot(AccountController.state); const { caipNetwork } = useSnapshot(NetworkController.state); + const { networkImages } = useSnapshot(AssetController.state); const { themeMode, themeVariables } = useSnapshot(ThemeController.state); - const networkImage = AssetUtil.getNetworkImage(caipNetwork); + const networkImage = AssetUtil.getNetworkImage(caipNetwork, networkImages); const showBalance = balance === 'show'; return ( diff --git a/packages/scaffold/src/modal/w3m-network-button/index.tsx b/packages/scaffold/src/modal/w3m-network-button/index.tsx index 353a18047..5aa25bb7e 100644 --- a/packages/scaffold/src/modal/w3m-network-button/index.tsx +++ b/packages/scaffold/src/modal/w3m-network-button/index.tsx @@ -3,6 +3,7 @@ import type { StyleProp, ViewStyle } from 'react-native'; import { AccountController, ApiController, + AssetController, AssetUtil, EventsController, ModalController, @@ -18,6 +19,7 @@ export interface NetworkButtonProps { export function NetworkButton({ disabled, style }: NetworkButtonProps) { const { isConnected } = useSnapshot(AccountController.state); + const { networkImages } = useSnapshot(AssetController.state); const { caipNetwork } = useSnapshot(NetworkController.state); const { loading } = useSnapshot(ModalController.state); const { themeMode, themeVariables } = useSnapshot(ThemeController.state); @@ -33,7 +35,7 @@ export function NetworkButton({ disabled, style }: NetworkButtonProps) { return ( { TransactionsController.fetchTransactions(AccountController.state.address); diff --git a/packages/scaffold/src/partials/w3m-account-tokens/index.tsx b/packages/scaffold/src/partials/w3m-account-tokens/index.tsx index 26db07f9f..9ac266fec 100644 --- a/packages/scaffold/src/partials/w3m-account-tokens/index.tsx +++ b/packages/scaffold/src/partials/w3m-account-tokens/index.tsx @@ -9,6 +9,7 @@ import { import { useSnapshot } from 'valtio'; import { AccountController, + AssetController, AssetUtil, NetworkController, RouterController @@ -31,7 +32,8 @@ export function AccountTokens({ style }: Props) { const [refreshing, setRefreshing] = useState(false); const { tokenBalance } = useSnapshot(AccountController.state); const { caipNetwork } = useSnapshot(NetworkController.state); - const networkImage = AssetUtil.getNetworkImage(caipNetwork); + const { networkImages } = useSnapshot(AssetController.state); + const networkImage = AssetUtil.getNetworkImage(caipNetwork, networkImages); const onRefresh = useCallback(async () => { setRefreshing(true); diff --git a/packages/scaffold/src/partials/w3m-selector-modal/index.tsx b/packages/scaffold/src/partials/w3m-selector-modal/index.tsx index 37c8c94e9..52c6e85a4 100644 --- a/packages/scaffold/src/partials/w3m-selector-modal/index.tsx +++ b/packages/scaffold/src/partials/w3m-selector-modal/index.tsx @@ -13,7 +13,7 @@ import { useTheme } from '@reown/appkit-ui-react-native'; import styles from './styles'; -import { AssetUtil, NetworkController } from '@reown/appkit-core-react-native'; +import { AssetController, AssetUtil, NetworkController } from '@reown/appkit-core-react-native'; interface SelectorModalProps { title?: string; @@ -46,7 +46,8 @@ export function SelectorModal({ }: SelectorModalProps) { const Theme = useTheme(); const { caipNetwork } = useSnapshot(NetworkController.state); - const networkImage = AssetUtil.getNetworkImage(caipNetwork); + const { networkImages } = useSnapshot(AssetController.state); + const networkImage = AssetUtil.getNetworkImage(caipNetwork, networkImages); const renderSeparator = () => { return ; diff --git a/packages/scaffold/src/views/w3m-account-default-view/index.tsx b/packages/scaffold/src/views/w3m-account-default-view/index.tsx index cb5ca3a7f..4503284bb 100644 --- a/packages/scaffold/src/views/w3m-account-default-view/index.tsx +++ b/packages/scaffold/src/views/w3m-account-default-view/index.tsx @@ -18,7 +18,8 @@ import { type AppKitFrameProvider, ConstantsUtil, SwapController, - OnRampController + OnRampController, + AssetController } from '@reown/appkit-core-react-native'; import { Avatar, @@ -52,7 +53,8 @@ export function AccountDefaultView() { const { connectedSocialProvider } = useSnapshot(ConnectionController.state); const { features, isOnRampEnabled } = useSnapshot(OptionsController.state); const { history } = useSnapshot(RouterController.state); - const networkImage = AssetUtil.getNetworkImage(caipNetwork); + const { networkImages } = useSnapshot(AssetController.state); + const networkImage = AssetUtil.getNetworkImage(caipNetwork, networkImages); const showCopy = OptionsController.isClipboardAvailable(); const isAuth = connectedConnector === 'AUTH'; const showBalance = balance && !isAuth; diff --git a/packages/scaffold/src/views/w3m-account-view/index.tsx b/packages/scaffold/src/views/w3m-account-view/index.tsx index 14e19d858..8ecbb7387 100644 --- a/packages/scaffold/src/views/w3m-account-view/index.tsx +++ b/packages/scaffold/src/views/w3m-account-view/index.tsx @@ -13,6 +13,7 @@ import { import { AccountController, ApiController, + AssetController, AssetUtil, ModalController, NetworkController, @@ -28,6 +29,7 @@ export function AccountView() { const Theme = useTheme(); const { padding } = useCustomDimensions(); const { caipNetwork } = useSnapshot(NetworkController.state); + const { networkImages } = useSnapshot(AssetController.state); const { address, profileName, profileImage, preferredAccountType } = useSnapshot( AccountController.state ); @@ -74,7 +76,7 @@ export function AccountView() { ]} > (false); const [showRetry, setShowRetry] = useState(false); @@ -115,8 +119,8 @@ export function NetworkSwitchView() { {error && ( diff --git a/packages/scaffold/src/views/w3m-networks-view/index.tsx b/packages/scaffold/src/views/w3m-networks-view/index.tsx index 30bdd0299..dc6b12217 100644 --- a/packages/scaffold/src/views/w3m-networks-view/index.tsx +++ b/packages/scaffold/src/views/w3m-networks-view/index.tsx @@ -1,3 +1,4 @@ +import { useSnapshot } from 'valtio'; import { ScrollView, View } from 'react-native'; import { CardSelect, @@ -16,7 +17,8 @@ import { type CaipNetwork, EventsController, CoreHelperUtil, - NetworkUtil + NetworkUtil, + AssetController } from '@reown/appkit-core-react-native'; import { useCustomDimensions } from '../../hooks/useCustomDimensions'; import styles from './styles'; @@ -24,6 +26,7 @@ import styles from './styles'; export function NetworksView() { const { caipNetwork, requestedCaipNetworks, approvedCaipNetworkIds, supportsAllNetworks } = NetworkController.state; + const { networkImages } = useSnapshot(AssetController.state); const imageHeaders = ApiController._getApiHeaders(); const { maxWidth: width, padding } = useCustomDimensions(); const numColumns = 4; @@ -69,7 +72,7 @@ export function NetworksView() { testID={`w3m-network-switch-${network.name ?? network.id}`} name={network.name ?? 'Unknown'} type="network" - imageSrc={AssetUtil.getNetworkImage(network)} + imageSrc={AssetUtil.getNetworkImage(network, networkImages)} imageHeaders={imageHeaders} disabled={!supportsAllNetworks && !approvedCaipNetworkIds?.includes(network.id)} selected={caipNetwork?.id === network.id} diff --git a/packages/scaffold/src/views/w3m-onramp-view/index.tsx b/packages/scaffold/src/views/w3m-onramp-view/index.tsx index 2de305fe2..3eae31b87 100644 --- a/packages/scaffold/src/views/w3m-onramp-view/index.tsx +++ b/packages/scaffold/src/views/w3m-onramp-view/index.tsx @@ -10,7 +10,8 @@ import { NetworkController, AssetUtil, SnackController, - ConstantsUtil + ConstantsUtil, + AssetController } from '@reown/appkit-core-react-native'; import { Button, @@ -50,12 +51,13 @@ export function OnRampView() { initialLoading } = useSnapshot(OnRampController.state) as OnRampControllerState; const { caipNetwork } = useSnapshot(NetworkController.state); + const { networkImages } = useSnapshot(AssetController.state); const [searchValue, setSearchValue] = useState(''); const [isCurrencyModalVisible, setIsCurrencyModalVisible] = useState(false); const [isPaymentMethodModalVisible, setIsPaymentMethodModalVisible] = useState(false); const purchaseCurrencyCode = purchaseCurrency?.currencyCode?.split('_')[0] ?? purchaseCurrency?.currencyCode; - const networkImage = AssetUtil.getNetworkImage(caipNetwork); + const networkImage = AssetUtil.getNetworkImage(caipNetwork, networkImages); const getQuotes = useCallback(() => { if (OnRampController.canGenerateQuote()) { diff --git a/packages/scaffold/src/views/w3m-swap-select-token-view/index.tsx b/packages/scaffold/src/views/w3m-swap-select-token-view/index.tsx index 0a7168004..00da436c0 100644 --- a/packages/scaffold/src/views/w3m-swap-select-token-view/index.tsx +++ b/packages/scaffold/src/views/w3m-swap-select-token-view/index.tsx @@ -13,6 +13,7 @@ import { } from '@reown/appkit-ui-react-native'; import { + AssetController, AssetUtil, NetworkController, RouterController, @@ -30,7 +31,8 @@ export function SwapSelectTokenView() { const Theme = useTheme(); const { caipNetwork } = useSnapshot(NetworkController.state); const { sourceToken, suggestedTokens } = useSnapshot(SwapController.state); - const networkImage = AssetUtil.getNetworkImage(caipNetwork); + const { networkImages } = useSnapshot(AssetController.state); + const networkImage = AssetUtil.getNetworkImage(caipNetwork, networkImages); const [tokenSearch, setTokenSearch] = useState(''); const isSourceToken = RouterController.state.data?.swapTarget === 'sourceToken'; diff --git a/packages/scaffold/src/views/w3m-unsupported-chain-view/index.tsx b/packages/scaffold/src/views/w3m-unsupported-chain-view/index.tsx index f2074e505..13e4309da 100644 --- a/packages/scaffold/src/views/w3m-unsupported-chain-view/index.tsx +++ b/packages/scaffold/src/views/w3m-unsupported-chain-view/index.tsx @@ -11,13 +11,15 @@ import { NetworkController, NetworkUtil, type CaipNetwork, - type NetworkControllerState + type NetworkControllerState, + AssetController } from '@reown/appkit-core-react-native'; import styles from './styles'; export function UnsupportedChainView() { const { caipNetwork, supportsAllNetworks, approvedCaipNetworkIds, requestedCaipNetworks } = useSnapshot(NetworkController.state) as NetworkControllerState; + const { networkImages } = useSnapshot(AssetController.state); const [disconnecting, setDisconnecting] = useState(false); const networks = CoreHelperUtil.sortNetworks(approvedCaipNetworkIds, requestedCaipNetworks); @@ -59,7 +61,7 @@ export function UnsupportedChainView() { key={item.id} icon="networkPlaceholder" iconBackgroundColor="gray-glass-010" - imageSrc={AssetUtil.getNetworkImage(item)} + imageSrc={AssetUtil.getNetworkImage(item, networkImages)} imageHeaders={imageHeaders} onPress={() => onNetworkPress(item)} testID="button-network" diff --git a/packages/scaffold/src/views/w3m-wallet-compatible-networks-view/index.tsx b/packages/scaffold/src/views/w3m-wallet-compatible-networks-view/index.tsx index 3695bc470..2028557d8 100644 --- a/packages/scaffold/src/views/w3m-wallet-compatible-networks-view/index.tsx +++ b/packages/scaffold/src/views/w3m-wallet-compatible-networks-view/index.tsx @@ -4,6 +4,7 @@ import { FlexView, Text, Banner, NetworkImage } from '@reown/appkit-ui-react-nat import { AccountController, ApiController, + AssetController, AssetUtil, NetworkController } from '@reown/appkit-core-react-native'; @@ -13,6 +14,7 @@ import styles from './styles'; export function WalletCompatibleNetworks() { const { padding } = useCustomDimensions(); const { preferredAccountType } = useSnapshot(AccountController.state); + const { networkImages } = useSnapshot(AssetController.state); const isSmartAccount = preferredAccountType === 'smartAccount' && NetworkController.checkIfSmartAccountEnabled(); const approvedNetworks = isSmartAccount @@ -32,7 +34,7 @@ export function WalletCompatibleNetworks() { padding={['s', 's', 's', 's']} > network?.imageId) .slice(0, 5) - .map(AssetUtil.getNetworkImage) + .map(network => AssetUtil.getNetworkImage(network, AssetController.state.networkImages)) .filter(Boolean) as string[]; const label = UiUtil.getTruncateString({ diff --git a/packages/scaffold/src/views/w3m-wallet-send-preview-view/components/preview-send-details.tsx b/packages/scaffold/src/views/w3m-wallet-send-preview-view/components/preview-send-details.tsx index d71df1740..c0cdd4179 100644 --- a/packages/scaffold/src/views/w3m-wallet-send-preview-view/components/preview-send-details.tsx +++ b/packages/scaffold/src/views/w3m-wallet-send-preview-view/components/preview-send-details.tsx @@ -1,4 +1,5 @@ -import { AssetUtil, type CaipNetwork } from '@reown/appkit-core-react-native'; +import { useSnapshot } from 'valtio'; +import { AssetController, AssetUtil, type CaipNetwork } from '@reown/appkit-core-react-native'; import { BorderRadius, FlexView, @@ -26,6 +27,7 @@ export function PreviewSendDetails({ style }: PreviewSendDetailsProps) { const Theme = useTheme(); + const { networkImages } = useSnapshot(AssetController.state); const formattedName = UiUtil.getTruncateString({ string: name ?? '', @@ -41,7 +43,7 @@ export function PreviewSendDetails({ truncate: 'middle' }); - const networkImage = AssetUtil.getNetworkImage(caipNetwork); + const networkImage = AssetUtil.getNetworkImage(caipNetwork, networkImages); return ( (''); const [filteredTokens, setFilteredTokens] = useState(tokenBalance ?? []); diff --git a/packages/ui/src/composites/wui-card-select/index.tsx b/packages/ui/src/composites/wui-card-select/index.tsx index fd4f50458..3e9a5b3a6 100644 --- a/packages/ui/src/composites/wui-card-select/index.tsx +++ b/packages/ui/src/composites/wui-card-select/index.tsx @@ -100,5 +100,5 @@ function _CardSelect({ } export const CardSelect = memo(_CardSelect, (prevProps, nextProps) => { - return prevProps.name === nextProps.name; + return prevProps.name === nextProps.name && prevProps.imageSrc === nextProps.imageSrc; }); diff --git a/packages/ui/src/composites/wui-network-image/index.tsx b/packages/ui/src/composites/wui-network-image/index.tsx index ee3ee9ac8..0403e3f9b 100644 --- a/packages/ui/src/composites/wui-network-image/index.tsx +++ b/packages/ui/src/composites/wui-network-image/index.tsx @@ -1,9 +1,8 @@ -import { Path, Svg, Image, Defs, Pattern } from 'react-native-svg'; +import { Path, Svg, Image, Defs, Pattern, G } from 'react-native-svg'; import type { StyleProp, ViewStyle } from 'react-native'; import { useTheme } from '../../hooks/useTheme'; import type { SizeType } from '../../utils/TypesUtil'; -import { Icon } from '../../components/wui-icon'; -import { FlexView } from '../../layout/wui-flex'; +import NetworkPlaceholderSvg from '../../assets/svg/NetworkPlaceholder'; import { PathLg, PathNormal, PathSmall, PathXS } from './styles'; export interface NetworkImageProps { @@ -31,6 +30,13 @@ const sizeToHeight = { xs: 20 }; +const sizeToIconSize = { + lg: 24, + md: 16, + sm: 14, + xs: 12 +}; + export function NetworkImage({ imageSrc, imageHeaders, @@ -44,42 +50,52 @@ export function NetworkImage({ const Theme = useTheme(); const svgStroke = selected ? Theme['accent-100'] : Theme['gray-glass-010']; const opacity = disabled ? 0.5 : 1; + const containerSize = sizeToHeight[size]; + const iconSize = sizeToIconSize[size]; return ( - - - {imageSrc ? ( - - ) : ( - + + - - - )} - - - {!imageSrc && } - + + + + + + ) : ( + <> + + + + + + )} ); } diff --git a/packages/wagmi/src/client.ts b/packages/wagmi/src/client.ts index 5c4a4aace..88b30d1c6 100644 --- a/packages/wagmi/src/client.ts +++ b/packages/wagmi/src/client.ts @@ -111,20 +111,19 @@ export class AppKit extends AppKitScaffold { } }, - async getApprovedCaipNetworksData() { - const walletChoice = await StorageUtil.getConnectedConnector(); + async getApprovedCaipNetworksData(connectorType?: ConnectorType) { const walletConnectType = PresetsUtil.ConnectorTypesMap[ConstantsUtil.WALLET_CONNECT_CONNECTOR_ID]!; const authType = PresetsUtil.ConnectorTypesMap[ConstantsUtil.AUTH_CONNECTOR_ID]!; - if (walletChoice?.includes(walletConnectType)) { + if (connectorType === walletConnectType) { const connector = wagmiConfig.connectors.find( c => c.id === ConstantsUtil.WALLET_CONNECT_CONNECTOR_ID ); return getWalletConnectCaipNetworks(connector); - } else if (authType) { + } else if (connectorType === authType) { return getAuthCaipNetworks(); } @@ -443,11 +442,12 @@ export class AppKit extends AppKitScaffold { const caipAddress: CaipAddress = `${ConstantsUtil.EIP155}:${chainId}:${address}`; this.setIsConnected(isConnected); this.setCaipAddress(caipAddress); + const connectorType = PresetsUtil.ConnectorTypesMap[connector?.id ?? '']; await Promise.all([ this.syncProfile(address, chainId), this.syncBalance(address, chainId), this.syncConnectedWalletInfo(connector), - this.getApprovedCaipNetworksData() + this.getApprovedCaipNetworksData(connectorType) ]); this.hasSyncedConnectedAccount = true; } else if (!isConnected && !isConnecting && !isReconnecting && this.hasSyncedConnectedAccount) { diff --git a/yarn.lock b/yarn.lock index b7cb41ac2..82078e817 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10617,6 +10617,15 @@ __metadata: languageName: node linkType: hard +"available-typed-arrays@npm:^1.0.7": + version: 1.0.7 + resolution: "available-typed-arrays@npm:1.0.7" + dependencies: + possible-typed-array-names: "npm:^1.0.0" + checksum: d07226ef4f87daa01bd0fe80f8f310982e345f372926da2e5296aecc25c41cab440916bbaa4c5e1034b453af3392f67df5961124e4b586df1e99793a1374bdb2 + languageName: node + linkType: hard + "babel-core@npm:^7.0.0-bridge.0": version: 7.0.0-bridge.0 resolution: "babel-core@npm:7.0.0-bridge.0" @@ -11415,6 +11424,16 @@ __metadata: languageName: node linkType: hard +"call-bind-apply-helpers@npm:^1.0.0, call-bind-apply-helpers@npm:^1.0.1, call-bind-apply-helpers@npm:^1.0.2": + version: 1.0.2 + resolution: "call-bind-apply-helpers@npm:1.0.2" + dependencies: + es-errors: "npm:^1.3.0" + function-bind: "npm:^1.1.2" + checksum: 47bd9901d57b857590431243fea704ff18078b16890a6b3e021e12d279bbf211d039155e27d7566b374d49ee1f8189344bac9833dec7a20cdec370506361c938 + languageName: node + linkType: hard + "call-bind@npm:^1.0.0, call-bind@npm:^1.0.2": version: 1.0.2 resolution: "call-bind@npm:1.0.2" @@ -11438,6 +11457,28 @@ __metadata: languageName: node linkType: hard +"call-bind@npm:^1.0.8": + version: 1.0.8 + resolution: "call-bind@npm:1.0.8" + dependencies: + call-bind-apply-helpers: "npm:^1.0.0" + es-define-property: "npm:^1.0.0" + get-intrinsic: "npm:^1.2.4" + set-function-length: "npm:^1.2.2" + checksum: a13819be0681d915144467741b69875ae5f4eba8961eb0bf322aab63ec87f8250eb6d6b0dcbb2e1349876412a56129ca338592b3829ef4343527f5f18a0752d4 + languageName: node + linkType: hard + +"call-bound@npm:^1.0.3, call-bound@npm:^1.0.4": + version: 1.0.4 + resolution: "call-bound@npm:1.0.4" + dependencies: + call-bind-apply-helpers: "npm:^1.0.2" + get-intrinsic: "npm:^1.3.0" + checksum: f4796a6a0941e71c766aea672f63b72bc61234c4f4964dc6d7606e3664c307e7d77845328a8f3359ce39ddb377fed67318f9ee203dea1d47e46165dcf2917644 + languageName: node + linkType: hard + "caller-callsite@npm:^2.0.0": version: 2.0.0 resolution: "caller-callsite@npm:2.0.0" @@ -12891,6 +12932,17 @@ __metadata: languageName: node linkType: hard +"dunder-proto@npm:^1.0.1": + version: 1.0.1 + resolution: "dunder-proto@npm:1.0.1" + dependencies: + call-bind-apply-helpers: "npm:^1.0.1" + es-errors: "npm:^1.3.0" + gopd: "npm:^1.2.0" + checksum: 199f2a0c1c16593ca0a145dbf76a962f8033ce3129f01284d48c45ed4e14fea9bbacd7b3610b6cdc33486cef20385ac054948fefc6272fcce645c09468f93031 + languageName: node + linkType: hard + "duplexify@npm:^4.1.2": version: 4.1.2 resolution: "duplexify@npm:4.1.2" @@ -13239,6 +13291,13 @@ __metadata: languageName: node linkType: hard +"es-define-property@npm:^1.0.1": + version: 1.0.1 + resolution: "es-define-property@npm:1.0.1" + checksum: 3f54eb49c16c18707949ff25a1456728c883e81259f045003499efba399c08bad00deebf65cccde8c0e07908c1a225c9d472b7107e558f2a48e28d530e34527c + languageName: node + linkType: hard + "es-errors@npm:^1.3.0": version: 1.3.0 resolution: "es-errors@npm:1.3.0" @@ -13260,6 +13319,15 @@ __metadata: languageName: node linkType: hard +"es-object-atoms@npm:^1.0.0, es-object-atoms@npm:^1.1.1": + version: 1.1.1 + resolution: "es-object-atoms@npm:1.1.1" + dependencies: + es-errors: "npm:^1.3.0" + checksum: 65364812ca4daf48eb76e2a3b7a89b3f6a2e62a1c420766ce9f692665a29d94fe41fe88b65f24106f449859549711e4b40d9fb8002d862dfd7eb1c512d10be0c + languageName: node + linkType: hard + "es-set-tostringtag@npm:^2.0.1": version: 2.0.1 resolution: "es-set-tostringtag@npm:2.0.1" @@ -13271,6 +13339,18 @@ __metadata: languageName: node linkType: hard +"es-set-tostringtag@npm:^2.1.0": + version: 2.1.0 + resolution: "es-set-tostringtag@npm:2.1.0" + dependencies: + es-errors: "npm:^1.3.0" + get-intrinsic: "npm:^1.2.6" + has-tostringtag: "npm:^1.0.2" + hasown: "npm:^2.0.2" + checksum: ef2ca9ce49afe3931cb32e35da4dcb6d86ab02592cfc2ce3e49ced199d9d0bb5085fc7e73e06312213765f5efa47cc1df553a6a5154584b21448e9fb8355b1af + languageName: node + linkType: hard + "es-shim-unscopables@npm:^1.0.0": version: 1.0.0 resolution: "es-shim-unscopables@npm:1.0.0" @@ -14721,6 +14801,15 @@ __metadata: languageName: node linkType: hard +"for-each@npm:^0.3.5": + version: 0.3.5 + resolution: "for-each@npm:0.3.5" + dependencies: + is-callable: "npm:^1.2.7" + checksum: 0e0b50f6a843a282637d43674d1fb278dda1dd85f4f99b640024cfb10b85058aac0cc781bf689d5fe50b4b7f638e91e548560723a4e76e04fe96ae35ef039cee + languageName: node + linkType: hard + "foreground-child@npm:^3.1.0": version: 3.1.1 resolution: "foreground-child@npm:3.1.1" @@ -14754,14 +14843,16 @@ __metadata: languageName: node linkType: hard -"form-data@npm:^3.0.1": - version: 3.0.1 - resolution: "form-data@npm:3.0.1" +"form-data@npm:3.0.4": + version: 3.0.4 + resolution: "form-data@npm:3.0.4" dependencies: asynckit: "npm:^0.4.0" combined-stream: "npm:^1.0.8" - mime-types: "npm:^2.1.12" - checksum: 1ccc3ae064a080a799923f754d49fcebdd90515a8924f0f54de557540b50e7f1fe48ba5f2bd0435a5664aa2d49729107e6aaf2155a9abf52339474c5638b4485 + es-set-tostringtag: "npm:^2.1.0" + hasown: "npm:^2.0.2" + mime-types: "npm:^2.1.35" + checksum: 2451043b3e931653ce9690ba051b0bf1b5855a63029279bd7bdf8d02e4b5b42f4582b23ed3637df27a0d21bac2013c37d165ec9486e1af2470c13114aee83acc languageName: node linkType: hard @@ -14995,6 +15086,24 @@ __metadata: languageName: node linkType: hard +"get-intrinsic@npm:^1.2.6, get-intrinsic@npm:^1.3.0": + version: 1.3.0 + resolution: "get-intrinsic@npm:1.3.0" + dependencies: + call-bind-apply-helpers: "npm:^1.0.2" + es-define-property: "npm:^1.0.1" + es-errors: "npm:^1.3.0" + es-object-atoms: "npm:^1.1.1" + function-bind: "npm:^1.1.2" + get-proto: "npm:^1.0.1" + gopd: "npm:^1.2.0" + has-symbols: "npm:^1.1.0" + hasown: "npm:^2.0.2" + math-intrinsics: "npm:^1.1.0" + checksum: 52c81808af9a8130f581e6a6a83e1ba4a9f703359e7a438d1369a5267a25412322f03dcbd7c549edaef0b6214a0630a28511d7df0130c93cfd380f4fa0b5b66a + languageName: node + linkType: hard + "get-package-type@npm:^0.1.0": version: 0.1.0 resolution: "get-package-type@npm:0.1.0" @@ -15016,6 +15125,16 @@ __metadata: languageName: node linkType: hard +"get-proto@npm:^1.0.1": + version: 1.0.1 + resolution: "get-proto@npm:1.0.1" + dependencies: + dunder-proto: "npm:^1.0.1" + es-object-atoms: "npm:^1.0.0" + checksum: 9224acb44603c5526955e83510b9da41baf6ae73f7398875fba50edc5e944223a89c4a72b070fcd78beb5f7bdda58ecb6294adc28f7acfc0da05f76a2399643c + languageName: node + linkType: hard + "get-stream@npm:^4.0.0": version: 4.1.0 resolution: "get-stream@npm:4.1.0" @@ -15234,6 +15353,13 @@ __metadata: languageName: node linkType: hard +"gopd@npm:^1.2.0": + version: 1.2.0 + resolution: "gopd@npm:1.2.0" + checksum: 50fff1e04ba2b7737c097358534eacadad1e68d24cccee3272e04e007bed008e68d2614f3987788428fd192a5ae3889d08fb2331417e4fc4a9ab366b2043cead + languageName: node + linkType: hard + "graceful-fs@npm:^4.1.11, graceful-fs@npm:^4.1.2, graceful-fs@npm:^4.1.3, graceful-fs@npm:^4.1.5, graceful-fs@npm:^4.1.6, graceful-fs@npm:^4.2.0, graceful-fs@npm:^4.2.11, graceful-fs@npm:^4.2.4, graceful-fs@npm:^4.2.6, graceful-fs@npm:^4.2.9": version: 4.2.11 resolution: "graceful-fs@npm:4.2.11" @@ -15317,6 +15443,13 @@ __metadata: languageName: node linkType: hard +"has-symbols@npm:^1.1.0": + version: 1.1.0 + resolution: "has-symbols@npm:1.1.0" + checksum: dde0a734b17ae51e84b10986e651c664379018d10b91b6b0e9b293eddb32f0f069688c841fb40f19e9611546130153e0a2a48fd7f512891fb000ddfa36f5a20e + languageName: node + linkType: hard + "has-tostringtag@npm:^1.0.0": version: 1.0.0 resolution: "has-tostringtag@npm:1.0.0" @@ -15326,6 +15459,15 @@ __metadata: languageName: node linkType: hard +"has-tostringtag@npm:^1.0.2": + version: 1.0.2 + resolution: "has-tostringtag@npm:1.0.2" + dependencies: + has-symbols: "npm:^1.0.3" + checksum: a8b166462192bafe3d9b6e420a1d581d93dd867adb61be223a17a8d6dad147aa77a8be32c961bb2f27b3ef893cae8d36f564ab651f5e9b7938ae86f74027c48c + languageName: node + linkType: hard + "has@npm:^1.0.3": version: 1.0.3 resolution: "has@npm:1.0.3" @@ -15345,7 +15487,7 @@ __metadata: languageName: node linkType: hard -"hasown@npm:^2.0.0": +"hasown@npm:^2.0.0, hasown@npm:^2.0.2": version: 2.0.2 resolution: "hasown@npm:2.0.2" dependencies: @@ -15768,7 +15910,7 @@ __metadata: languageName: node linkType: hard -"inherits@npm:2, inherits@npm:2.0.4, inherits@npm:^2.0.1, inherits@npm:^2.0.3, inherits@npm:^2.0.4, inherits@npm:~2.0.3": +"inherits@npm:2, inherits@npm:2.0.4, inherits@npm:^2.0.3, inherits@npm:^2.0.4, inherits@npm:~2.0.3": version: 2.0.4 resolution: "inherits@npm:2.0.4" checksum: 4e531f648b29039fb7426fb94075e6545faa1eb9fe83c29f0b6d9e7263aceb4289d2d4557db0d428188eeb449cc7c5e77b0a0b2c4e248ff2a65933a0dee49ef2 @@ -16233,6 +16375,15 @@ __metadata: languageName: node linkType: hard +"is-typed-array@npm:^1.1.14": + version: 1.1.15 + resolution: "is-typed-array@npm:1.1.15" + dependencies: + which-typed-array: "npm:^1.1.16" + checksum: 415511da3669e36e002820584e264997ffe277ff136643a3126cc949197e6ca3334d0f12d084e83b1994af2e9c8141275c741cf2b7da5a2ff62dd0cac26f76c4 + languageName: node + linkType: hard + "is-unc-path@npm:^1.0.0": version: 1.0.0 resolution: "is-unc-path@npm:1.0.0" @@ -17808,6 +17959,13 @@ __metadata: languageName: node linkType: hard +"math-intrinsics@npm:^1.1.0": + version: 1.1.0 + resolution: "math-intrinsics@npm:1.1.0" + checksum: 7579ff94e899e2f76ab64491d76cf606274c874d8f2af4a442c016bd85688927fcfca157ba6bf74b08e9439dc010b248ce05b96cc7c126a354c3bae7fcb48b7f + languageName: node + linkType: hard + "md5-file@npm:^3.2.3": version: 3.2.3 resolution: "md5-file@npm:3.2.3" @@ -18428,7 +18586,7 @@ __metadata: languageName: node linkType: hard -"mime-types@npm:^2.1.12, mime-types@npm:^2.1.27, mime-types@npm:^2.1.31, mime-types@npm:~2.1.24, mime-types@npm:~2.1.34": +"mime-types@npm:^2.1.27, mime-types@npm:^2.1.31, mime-types@npm:^2.1.35, mime-types@npm:~2.1.24, mime-types@npm:~2.1.34": version: 2.1.35 resolution: "mime-types@npm:2.1.35" dependencies: @@ -19954,6 +20112,13 @@ __metadata: languageName: node linkType: hard +"possible-typed-array-names@npm:^1.0.0": + version: 1.1.0 + resolution: "possible-typed-array-names@npm:1.1.0" + checksum: c810983414142071da1d644662ce4caebce890203eb2bc7bf119f37f3fe5796226e117e6cca146b521921fa6531072674174a3325066ac66fce089a53e1e5196 + languageName: node + linkType: hard + "postcss-modules-extract-imports@npm:^3.0.0": version: 3.0.0 resolution: "postcss-modules-extract-imports@npm:3.0.0" @@ -21491,7 +21656,7 @@ __metadata: languageName: node linkType: hard -"safe-buffer@npm:5.2.1, safe-buffer@npm:^5.0.1, safe-buffer@npm:^5.1.0, safe-buffer@npm:~5.2.0": +"safe-buffer@npm:5.2.1, safe-buffer@npm:^5.1.0, safe-buffer@npm:^5.2.1, safe-buffer@npm:~5.2.0": version: 5.2.1 resolution: "safe-buffer@npm:5.2.1" checksum: 6501914237c0a86e9675d4e51d89ca3c21ffd6a31642efeba25ad65720bce6921c9e7e974e5be91a786b25aa058b5303285d3c15dbabf983a919f5f630d349f3 @@ -21728,7 +21893,7 @@ __metadata: languageName: node linkType: hard -"set-function-length@npm:^1.2.1": +"set-function-length@npm:^1.2.1, set-function-length@npm:^1.2.2": version: 1.2.2 resolution: "set-function-length@npm:1.2.2" dependencies: @@ -21756,15 +21921,16 @@ __metadata: languageName: node linkType: hard -"sha.js@npm:^2.4.11": - version: 2.4.11 - resolution: "sha.js@npm:2.4.11" +"sha.js@npm:2.4.12": + version: 2.4.12 + resolution: "sha.js@npm:2.4.12" dependencies: - inherits: "npm:^2.0.1" - safe-buffer: "npm:^5.0.1" + inherits: "npm:^2.0.4" + safe-buffer: "npm:^5.2.1" + to-buffer: "npm:^1.2.0" bin: - sha.js: ./bin.js - checksum: b7a371bca8821c9cc98a0aeff67444a03d48d745cb103f17228b96793f455f0eb0a691941b89ea1e60f6359207e36081d9be193252b0f128e0daf9cfea2815a5 + sha.js: bin.js + checksum: 9d36bdd76202c8116abbe152a00055ccd8a0099cb28fc17c01fa7bb2c8cffb9ca60e2ab0fe5f274ed6c45dc2633d8c39cf7ab050306c231904512ba9da4d8ab1 languageName: node linkType: hard @@ -22744,6 +22910,17 @@ __metadata: languageName: node linkType: hard +"to-buffer@npm:^1.2.0": + version: 1.2.1 + resolution: "to-buffer@npm:1.2.1" + dependencies: + isarray: "npm:^2.0.5" + safe-buffer: "npm:^5.2.1" + typed-array-buffer: "npm:^1.0.3" + checksum: bbf07a2a7d6ff9e3ffe503c689176c7149cf3ec25887ce7c4aa5c4841a8845cc71121cd7b4a4769957f823b3f31dbf6b1be6e0a5955798ad864bf2245ee8b5e4 + languageName: node + linkType: hard + "to-fast-properties@npm:^2.0.0": version: 2.0.0 resolution: "to-fast-properties@npm:2.0.0" @@ -23089,6 +23266,17 @@ __metadata: languageName: node linkType: hard +"typed-array-buffer@npm:^1.0.3": + version: 1.0.3 + resolution: "typed-array-buffer@npm:1.0.3" + dependencies: + call-bound: "npm:^1.0.3" + es-errors: "npm:^1.3.0" + is-typed-array: "npm:^1.1.14" + checksum: 1105071756eb248774bc71646bfe45b682efcad93b55532c6ffa4518969fb6241354e4aa62af679ae83899ec296d69ef88f1f3763657cdb3a4d29321f7b83079 + languageName: node + linkType: hard + "typed-array-byte-length@npm:^1.0.0": version: 1.0.0 resolution: "typed-array-byte-length@npm:1.0.0" @@ -24079,6 +24267,21 @@ __metadata: languageName: node linkType: hard +"which-typed-array@npm:^1.1.16": + version: 1.1.19 + resolution: "which-typed-array@npm:1.1.19" + dependencies: + available-typed-arrays: "npm:^1.0.7" + call-bind: "npm:^1.0.8" + call-bound: "npm:^1.0.4" + for-each: "npm:^0.3.5" + get-proto: "npm:^1.0.1" + gopd: "npm:^1.2.0" + has-tostringtag: "npm:^1.0.2" + checksum: 702b5dc878addafe6c6300c3d0af5983b175c75fcb4f2a72dfc3dd38d93cf9e89581e4b29c854b16ea37e50a7d7fca5ae42ece5c273d8060dcd603b2404bbb3f + languageName: node + linkType: hard + "which@npm:^2.0.1, which@npm:^2.0.2": version: 2.0.2 resolution: "which@npm:2.0.2"