From 7a73dbb4ba5f5e24f0d6c1f2e8a6b6acd6f83815 Mon Sep 17 00:00:00 2001
From: Raul Glogovetan <raul@glogovetan.com>
Date: Thu, 4 Apr 2024 21:14:37 +0300
Subject: [PATCH] Add: basic wrong connected network implementation

---
 .../UserNavigation/UserNavigation.tsx         | 19 ++++++++-
 .../partials/NetworkName/NetworkName.tsx      | 39 +++++++++++++++----
 .../partials/NetworkName/types.ts             |  4 ++
 .../shared/Extensions/Tooltip/Tooltip.tsx     |  3 ++
 .../shared/Extensions/Tooltip/types.ts        |  1 +
 5 files changed, 58 insertions(+), 8 deletions(-)

diff --git a/src/components/common/Extensions/UserNavigation/UserNavigation.tsx b/src/components/common/Extensions/UserNavigation/UserNavigation.tsx
index 8386451c785..9f166b2d26a 100644
--- 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
index 7cc67958be1..1e1f68ed5b7 100644
--- 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
index 0de7983e25f..d84a475feb9 100644
--- 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
index c71f0f6193d..031f48159c1 100644
--- 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
index 4f49bde80a8..190162e4427 100644
--- 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;