From ac4381695dead48616e7340f27098f4355b26b6a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Esteban=20Mi=C3=B1o?= Date: Wed, 20 Dec 2023 12:54:21 -0300 Subject: [PATCH] fix: custom chain inpage notification (#1248) Co-authored-by: Bruno Barbieri <1247834+brunobar79@users.noreply.github.com> --- src/core/state/rainbowChains/index.ts | 9 +++++++++ .../background/handlers/handleProviderRequest.ts | 9 +++++++++ src/entries/iframe/index.ts | 6 +++++- src/entries/iframe/notification.tsx | 15 ++++++++++++--- src/entries/inpage/index.ts | 4 +++- .../popup/components/ChainBadge/ChainBadge.tsx | 9 +++++---- 6 files changed, 43 insertions(+), 9 deletions(-) diff --git a/src/core/state/rainbowChains/index.ts b/src/core/state/rainbowChains/index.ts index f001e9e5f7..28e3a160b5 100644 --- a/src/core/state/rainbowChains/index.ts +++ b/src/core/state/rainbowChains/index.ts @@ -17,6 +17,7 @@ export interface RainbowChain { export interface RainbowChainsState { rainbowChains: Record; + getActiveChain: ({ chainId }: { chainId: number }) => Chain | undefined; addCustomRPC: ({ chain }: { chain: Chain }) => boolean; updateCustomRPC: ({ chain }: { chain: Chain }) => void; setActiveRPC: ({ @@ -58,6 +59,14 @@ const getInitialRainbowChains = () => { export const rainbowChainsStore = createStore( (set, get) => ({ rainbowChains: getInitialRainbowChains(), + getActiveChain: ({ chainId }) => { + const rainbowChains = get().rainbowChains; + const rainbowChain = rainbowChains[chainId]; + const chain = rainbowChain?.chains?.find( + (chain) => chain.rpcUrls.default.http[0] === rainbowChain.activeRpcUrl, + ); + return chain; + }, addCustomRPC: ({ chain }) => { const rainbowChains = get().rainbowChains; const rainbowChain = rainbowChains[chain.id] || { diff --git a/src/entries/background/handlers/handleProviderRequest.ts b/src/entries/background/handlers/handleProviderRequest.ts index 8f363b87f6..4524fe1710 100644 --- a/src/entries/background/handlers/handleProviderRequest.ts +++ b/src/entries/background/handlers/handleProviderRequest.ts @@ -18,6 +18,7 @@ import { appSessionsStore, notificationWindowStore, pendingRequestStore, + rainbowChainsStore, } from '~/core/state'; import { featureFlagsStore } from '~/core/state/currentSettings/featureFlags'; import { SessionStorage } from '~/core/storage'; @@ -468,8 +469,12 @@ export const handleProviderRequest = ({ const extensionUrl = chrome.runtime.getURL(''); const activeSession = getActiveSession({ host }); if (!supportedChainId || !activeSession) { + const chain = rainbowChainsStore + .getState() + .getActiveChain({ chainId: proposedChainId }); inpageMessenger?.send('wallet_switchEthereumChain', { chainId: proposedChainId, + chainName: chain?.name || 'NO NAME', status: !supportedChainId ? IN_DAPP_NOTIFICATION_STATUS.unsupported_network : IN_DAPP_NOTIFICATION_STATUS.no_active_session, @@ -486,8 +491,12 @@ export const handleProviderRequest = ({ chainId: proposedChainId, host, }); + const chain = rainbowChainsStore + .getState() + .getActiveChain({ chainId: proposedChainId }); inpageMessenger?.send('wallet_switchEthereumChain', { chainId: proposedChainId, + chainName: chain?.name, status: IN_DAPP_NOTIFICATION_STATUS.success, extensionUrl, host, diff --git a/src/entries/iframe/index.ts b/src/entries/iframe/index.ts index 3f67bd0d38..09029b414e 100644 --- a/src/entries/iframe/index.ts +++ b/src/entries/iframe/index.ts @@ -12,10 +12,12 @@ const DELAY_DURATION = 2000; export const injectNotificationIframe = async ({ chainId, + chainName, status, extensionUrl, }: { chainId: ChainId; + chainName?: string; status: IN_DAPP_NOTIFICATION_STATUS; extensionUrl: string; }) => { @@ -32,7 +34,9 @@ export const injectNotificationIframe = async ({ document.body.appendChild(notificationElement); const domContainer = document.getElementById(ELEMENT_ID) as Element; const root = createRoot(domContainer); - root.render(createElement(Notification, { chainId, status, extensionUrl })); + root.render( + createElement(Notification, { chainId, chainName, status, extensionUrl }), + ); setTimeout(() => { document?.getElementById(ELEMENT_ID)?.remove(); diff --git a/src/entries/iframe/notification.tsx b/src/entries/iframe/notification.tsx index 3d316cd6ef..1f91f26c80 100644 --- a/src/entries/iframe/notification.tsx +++ b/src/entries/iframe/notification.tsx @@ -18,6 +18,8 @@ import { ThemeProvider, } from '~/design-system'; +import { ChainBadge } from '../popup/components/ChainBadge/ChainBadge'; + const HTML_COLOR_SCHEME_PATTERN = /color-scheme:\s*(\w+);/; const ASSET_SOURCE = { @@ -51,10 +53,12 @@ export enum IN_DAPP_NOTIFICATION_STATUS { export const Notification = ({ chainId, + chainName, status, extensionUrl, }: { chainId: ChainId; + chainName?: string; status: IN_DAPP_NOTIFICATION_STATUS; extensionUrl: string; }) => { @@ -218,6 +222,7 @@ export const Notification = ({ @@ -299,7 +306,9 @@ const NotificationComponent = ({ width={24} height={24} /> - ) : null + ) : ( + + ) ) : ( { if (getDappHost(window.location.href) === host) { - injectNotificationIframe({ chainId, status, extensionUrl }); + injectNotificationIframe({ chainId, chainName, status, extensionUrl }); } }, ); diff --git a/src/entries/popup/components/ChainBadge/ChainBadge.tsx b/src/entries/popup/components/ChainBadge/ChainBadge.tsx index d6397dde0f..b6c64f0d7c 100644 --- a/src/entries/popup/components/ChainBadge/ChainBadge.tsx +++ b/src/entries/popup/components/ChainBadge/ChainBadge.tsx @@ -9,8 +9,9 @@ import OptimismBadge from 'static/assets/badges/optimismBadge@3x.png'; import PolygonBadge from 'static/assets/badges/polygonBadge@3x.png'; import ZoraBadge from 'static/assets/badges/zoraBadge@3x.png'; import { getCustomChainIconUrl } from '~/core/resources/assets/customNetworkAssets'; +import { rainbowChainsStore } from '~/core/state'; import { ChainId } from '~/core/types/chains'; -import { customChainIdsToAssetNames, getChain } from '~/core/utils/chains'; +import { customChainIdsToAssetNames } from '~/core/utils/chains'; import { Box, Text } from '~/design-system'; import { colors as emojiColors } from '~/entries/popup/utils/emojiAvatarBackgroundColors'; @@ -71,7 +72,7 @@ const ChainBadge = ({ !Object.keys(networkBadges).includes(`${chainId}`) && !customChainIdsToAssetNames[chainId] ) { - const chain = getChain({ chainId }); + const chain = rainbowChainsStore.getState().getActiveChain({ chainId }); return ( ( - chain.name || '', + chain?.name || '', emojiColors, ), }} @@ -102,7 +103,7 @@ const ChainBadge = ({ weight="bold" align="center" > - {chain.name.substring(0, 1).toUpperCase()} + {chain?.name.substring(0, 1).toUpperCase()}