fix: custom chain inpage notification (#1248)

Co-authored-by: Bruno Barbieri <1247834+brunobar79@users.noreply.github.com>
rainbow-me · Dec 20, 2023 · ac43816 · ac43816
1 parent d42ab14
commit ac43816
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 9 deletions.
diff --git 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<number, RainbowChain>;
+  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<RainbowChainsState>(
   (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
@@ -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
@@ -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
@@ -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 = ({
           <NotificationComponent
             siteTheme={siteTheme}
             chainId={chainId}
+            chainName={chainName}
             status={status}
             extensionUrl={extensionUrl}
             iframeLoaded={iframeLoaded}
@@ -231,13 +236,15 @@ export const Notification = ({
 
 const NotificationComponent = ({
   chainId,
+  chainName,
   siteTheme,
   status,
   extensionUrl,
   iframeLoaded,
   onDismiss,
 }: {
   chainId: ChainId;
+  chainName?: string;
   siteTheme: 'dark' | 'light';
   status: IN_DAPP_NOTIFICATION_STATUS;
   extensionUrl: string;
@@ -249,7 +256,7 @@ const NotificationComponent = ({
       case IN_DAPP_NOTIFICATION_STATUS.success:
         return {
           title: i18n.t(`injected_notifications.network_changed`),
-          description: ChainNameDisplay[chainId],
+          description: ChainNameDisplay[chainId] || chainName,
         };
       case IN_DAPP_NOTIFICATION_STATUS.unsupported_network:
         return {
@@ -263,7 +270,7 @@ const NotificationComponent = ({
           description: i18n.t('injected_notifications.no_active_session'),
         };
     }
-  }, [chainId, status]);
+  }, [chainId, chainName, status]);
 
   return iframeLoaded ? (
     <ThemeProvider theme={siteTheme}>
@@ -299,7 +306,9 @@ const NotificationComponent = ({
                       width={24}
                       height={24}
                     />
-                  ) : null
+                  ) : (
+                    <ChainBadge chainId={chainId} size={24} />
+                  )
                 ) : (
                   <Box
                     height="full"

diff --git a/src/entries/inpage/index.ts b/src/entries/inpage/index.ts
@@ -52,17 +52,19 @@ if (shouldInjectProvider()) {
     'wallet_switchEthereumChain',
     async ({
       chainId,
+      chainName,
       status,
       extensionUrl,
       host,
     }: {
       chainId: ChainId;
+      chainName?: string;
       status: IN_DAPP_NOTIFICATION_STATUS;
       extensionUrl: string;
       host: string;
     }) => {
       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
@@ -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 (
       <Box
         borderRadius="round"
@@ -81,7 +82,7 @@ const ChainBadge = ({
           borderRadius: iconSize,
           boxShadow,
           backgroundColor: pseudoRandomArrayItemFromString<string>(
-            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()}
           </Text>
         </Box>
       </Box>