Add: basic wrong connected network implementation

JoinColony · Apr 5, 2024 · 7a73dbb · 7a73dbb
1 parent d6975f6
commit 7a73dbb
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 8 deletions.
diff --git a/src/components/common/Extensions/UserNavigation/UserNavigation.tsx b/src/components/common/Extensions/UserNavigation/UserNavigation.tsx
@@ -1,7 +1,9 @@
 import { Cardholder, GearSix, List, X } from '@phosphor-icons/react';
 import React, { type FC } from 'react';
+import { defineMessages } from 'react-intl';
 import { usePopperTooltip } from 'react-popper-tooltip';
 
+import { DEFAULT_NETWORK_INFO } from '~constants';
 import { useAppContext } from '~context/AppContext/AppContext.ts';
 import { useMobile } from '~hooks/index.ts';
 import useDisableBodyScroll from '~hooks/useDisableBodyScroll/index.ts';
@@ -16,6 +18,13 @@ import { type UserNavigationProps } from './types.ts';
 
 const displayName = 'common.Extensions.UserNavigation';
 
+const MSG = defineMessages({
+  wrongNetwork: {
+    id: `${displayName}.unlockedToken`,
+    defaultMessage: `Your wallet is connected to a nework the app was not deployed to yet. ({networkName}).  Please switch your wallet to the "{correctNetworkName}" network.`,
+  },
+});
+
 const UserNavigation: FC<UserNavigationProps> = ({
   extra = null,
   userHub,
@@ -60,7 +69,15 @@ const UserNavigation: FC<UserNavigationProps> = ({
       {isWalletConnected ? (
         <div className="flex gap-1">
           {networkInfo && (
-            <NetworkName size={isMobile ? 18 : 16} networkInfo={networkInfo} />
+            <NetworkName
+              size={isMobile ? 18 : 16}
+              networkInfo={networkInfo}
+              error={networkInfo?.chainId !== DEFAULT_NETWORK_INFO.chainId}
+              errorMessage={formatText(MSG.wrongNetwork, {
+                networkName: networkInfo?.name,
+                correctNetworkName: DEFAULT_NETWORK_INFO.name,
+              })}
+            />
           )}
           {userHub}
         </div>

diff --git a/src/components/common/Extensions/UserNavigation/partials/NetworkName/NetworkName.tsx b/src/components/common/Extensions/UserNavigation/partials/NetworkName/NetworkName.tsx
@@ -1,20 +1,45 @@
+import clsx from 'clsx';
 import React, { type FC } from 'react';
 
+import { useMobile } from '~hooks/index.ts';
 import GanacheIcon from '~icons/GanacheIcon.tsx';
+import Tooltip from '~shared/Extensions/Tooltip/Tooltip.tsx';
 
 import { type NetworkNameProps } from './types.ts';
 
 const displayName = 'common.Extensions.UserNavigation.partials.NetworkName';
 
-const NetworkName: FC<NetworkNameProps> = ({ networkInfo, size = 14 }) => {
+const NetworkName: FC<NetworkNameProps> = ({
+  networkInfo,
+  size = 14,
+  error = false,
+  errorMessage,
+}) => {
   const Icon = networkInfo.icon || GanacheIcon;
+  const isMobile = useMobile();
+
   return (
-    <div className="flex min-h-[2.5rem] min-w-[2.625rem] items-center justify-center rounded-full border border-gray-200 bg-base-white px-[0.875rem] py-[0.625rem]">
-      <Icon size={size} />
-      <p className="ml-1 hidden text-gray-700 text-3 md:block">
-        {networkInfo.name}
-      </p>
-    </div>
+    <Tooltip
+      tooltipContent={errorMessage}
+      placement={isMobile ? 'bottom' : 'left'}
+      trigger={error ? 'hover' : null}
+      isError={error}
+    >
+      <div
+        className={clsx(
+          'flex min-h-[2.5rem] min-w-[2.625rem] items-center justify-center rounded-full border border-gray-200 bg-base-white px-[0.875rem] py-[0.625rem]',
+          {
+            'border-negative-400': error,
+            'cursor-pointer': error,
+          },
+        )}
+      >
+        <Icon size={size} />
+        <p className="ml-1 hidden text-gray-700 text-3 md:block">
+          {networkInfo.name}
+        </p>
+      </div>
+    </Tooltip>
   );
 };
 

diff --git a/src/components/common/Extensions/UserNavigation/partials/NetworkName/types.ts b/src/components/common/Extensions/UserNavigation/partials/NetworkName/types.ts
@@ -1,6 +1,10 @@
 import { type NetworkInfo } from '~constants/index.ts';
 
+import type React from 'react';
+
 export interface NetworkNameProps {
   networkInfo: NetworkInfo;
   size?: number;
+  error?: boolean;
+  errorMessage?: React.ReactNode;
 }
diff --git a/src/components/shared/Extensions/Tooltip/Tooltip.tsx b/src/components/shared/Extensions/Tooltip/Tooltip.tsx
@@ -19,6 +19,7 @@ const Tooltip: FC<PropsWithChildren<TooltipProps>> = ({
   trigger = 'hover',
   isOpen,
   isSuccess = false,
+  isError = false,
   isFullWidthContent,
   className,
   selectTriggerRef = (v) => v,
@@ -63,6 +64,7 @@ const Tooltip: FC<PropsWithChildren<TooltipProps>> = ({
               'tooltip-container',
               {
                 'bg-success-400': isSuccess,
+                'bg-negative-400': isError,
                 'bg-gray-900 [&_a]:underline': !isSuccess,
               },
             ),
@@ -74,6 +76,7 @@ const Tooltip: FC<PropsWithChildren<TooltipProps>> = ({
                 [tooltipClasses.tooltipArrow]: showArrow,
                 'tooltip-arrow': showArrow,
                 'text-success-400': isSuccess,
+                'text-negative-400': isError,
                 'text-gray-900': !isSuccess,
               }),
             })}

diff --git a/src/components/shared/Extensions/Tooltip/types.ts b/src/components/shared/Extensions/Tooltip/types.ts
@@ -12,6 +12,7 @@ export interface TooltipProps {
   showArrow?: boolean;
   isOpen?: boolean;
   isSuccess?: boolean;
+  isError?: boolean;
   isFullWidthContent?: boolean;
   className?: string;
   selectTriggerRef?: (ref: HTMLElement | null) => HTMLElement | null;