Add tooltips indicating that swaps are disabled on custom networks (#…

…3205) Closes #3191 https://user-images.githubusercontent.com/94649004/228350805-14f99e70-f788-4dbf-ba53-08870ed4faca.mov ### To Test - [x] Add a custom network with a balance on it. - [x] Check to make sure a swaps disabled tooltip shows up in the 3 places discussed in #3191 ## Testing Env ``` SUPPORT_CUSTOM_NETWORKS=true SUPPORT_CUSTOM_RPCS=true ``` Latest build: [extension-builds-3205](https://github.com/tahowallet/extension/suites/12366561860/artifacts/656810172) (as of Thu, 20 Apr 2023 11:15:51 GMT).
tahowallet · Apr 20, 2023 · 588fdad · 588fdad
2 parents cbfe36d + cac225e
commit 588fdad
Show file tree

Hide file tree

Showing 7 changed files with 156 additions and 16 deletions.
diff --git a/ui/_locales/en/messages.json b/ui/_locales/en/messages.json
@@ -786,6 +786,8 @@
     "totalAccountBalance": "Total account balance",
     "send": "Send",
     "swap": "Swap",
+    "swapDisabledOne": "Swaps aren't supported",
+    "swapDisabledTwo": "on this network",
     "receive": "Receive",
     "secureSeed": "First, secure your recovery seed",
     "sendAsset": "Send Asset",

diff --git a/ui/components/Shared/SharedIconRouterLink.tsx b/ui/components/Shared/SharedIconRouterLink.tsx
@@ -5,10 +5,27 @@ type Props = {
   path: string
   state: { [key: string]: unknown }
   iconClass: string
+  disabled?: boolean
 }
 
 export default function SharedIconRouterLink(props: Props): ReactElement {
-  const { path, state, iconClass } = props
+  const { path, state, iconClass, disabled } = props
+
+  if (disabled) {
+    return (
+      // @TODO Make accessible
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
+      <div
+        onClick={(e) => {
+          e.preventDefault()
+          e.stopPropagation()
+        }}
+        className="icon_wrapper"
+      >
+        <i className={`disabled_asset_icon ${iconClass}`} />
+      </div>
+    )
+  }
 
   return (
     <Link
@@ -19,7 +36,7 @@ export default function SharedIconRouterLink(props: Props): ReactElement {
       className="router_link_container"
     >
       <div className="icon_wrapper">
-        <i className={`asset_icon ${iconClass}`} />
+        <i className={`asset_icon hoverable ${iconClass}`} />
       </div>
       <style jsx global>{`
         .router_link_container {
@@ -30,6 +47,12 @@ export default function SharedIconRouterLink(props: Props): ReactElement {
           display: flex;
           padding: 0.5em;
         }
+        .disabled_asset_icon {
+          mask-size: cover;
+          background-color: var(--green-60);
+          width: 12px;
+          height: 12px;
+        }
         .router_link_container:hover {
           background-color: var(--hunter-green);
           color: var(--trophy-gold);

diff --git a/ui/components/Shared/SharedSquareButton.tsx b/ui/components/Shared/SharedSquareButton.tsx
@@ -15,18 +15,32 @@ type Props = {
   icon: string
   iconColor: ColorDetails
   textColor: ColorDetails
+  disabled?: boolean
   size: number
   ariaLabel?: string
   children: React.ReactNode
   onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void
 }
 
 export default function SharedSquareButton(props: Props): ReactElement {
-  const { icon, iconColor, textColor, size, ariaLabel, children, onClick } =
-    props
+  const {
+    icon,
+    iconColor,
+    textColor,
+    size,
+    ariaLabel,
+    children,
+    disabled,
+    onClick,
+  } = props
 
   return (
-    <button type="button" aria-label={ariaLabel} onClick={onClick}>
+    <button
+      type="button"
+      className={!disabled ? "hoverable" : undefined}
+      aria-label={ariaLabel}
+      onClick={onClick}
+    >
       <div className="icon_wrap">
         <div className="icon" />
       </div>
@@ -46,7 +60,7 @@ export default function SharedSquareButton(props: Props): ReactElement {
             align-items: center;
             gap: 4px;
           }
-          button:hover {
+          .hoverable:hover {
             color: ${textColor.hoverColor};
           }
           .content_wrap {
@@ -62,7 +76,7 @@ export default function SharedSquareButton(props: Props): ReactElement {
             background-color: ${iconColor.color};
             transition: background-color 0.2s;
           }
-          button:hover .icon_wrap {
+          .hoverable:hover .icon_wrap {
             background-color: ${iconColor.hoverColor};
           }
           .icon {

diff --git a/ui/components/Shared/SharedTooltip.tsx b/ui/components/Shared/SharedTooltip.tsx
@@ -8,6 +8,7 @@ interface Props {
   verticalPosition?: VerticalPosition
   horizontalPosition?: HorizontalPosition
   horizontalShift?: number
+  verticalShift?: number
   width?: number
   height?: number
   type?: "default" | "dark"
@@ -40,12 +41,16 @@ function getHorizontalPosition(
   }
 }
 
-function getVerticalPosition(vertical: VerticalPosition, height: number) {
+function getVerticalPosition(
+  vertical: VerticalPosition,
+  height: number,
+  verticalShift: number
+) {
   switch (vertical) {
     case "bottom":
-      return `top: ${height}px; margin-top: 5px;`
+      return `top: ${height - verticalShift}px; margin-top: 5px;`
     case "top":
-      return `bottom: ${height}px; margin-bottom: 5px;`
+      return `bottom: ${height - verticalShift}px; margin-bottom: 5px;`
     default:
       return ""
   }
@@ -57,6 +62,7 @@ export default function SharedTooltip(props: Props): ReactElement {
     verticalPosition = "bottom",
     horizontalPosition = "center",
     horizontalShift = 0,
+    verticalShift = 0,
     width,
     height = 20,
     type = "default",
@@ -127,7 +133,7 @@ export default function SharedTooltip(props: Props): ReactElement {
             border-radius: 3px;
             padding: 12px;
             z-index: 20;
-            ${getVerticalPosition(verticalPosition, height)}
+            ${getVerticalPosition(verticalPosition, height, verticalShift)}
             ${width !== undefined
               ? getHorizontalPosition(
                   horizontalPosition,

diff --git a/ui/components/Wallet/AssetListItem/CommonAssetListItem.tsx b/ui/components/Wallet/AssetListItem/CommonAssetListItem.tsx
@@ -17,6 +17,7 @@ import styles from "./styles"
 import SharedIconRouterLink from "../../Shared/SharedIconRouterLink"
 import { useBackgroundSelector } from "../../../hooks"
 import { trimWithEllipsis } from "../../../utils/textUtils"
+import SharedTooltip from "../../Shared/SharedTooltip"
 
 type CommonAssetListItemProps = {
   assetAmount: CompleteAssetAmount<SwappableAsset>
@@ -32,7 +33,7 @@ export default function CommonAssetListItem(
   props: CommonAssetListItemProps
 ): ReactElement {
   const { t } = useTranslation("translation", {
-    keyPrefix: "wallet.trustedAssets",
+    keyPrefix: "wallet",
   })
   const {
     assetAmount,
@@ -110,15 +111,15 @@ export default function CommonAssetListItem(
                 }}
                 className="untrusted_asset_icon"
               >
-                {t("notTrusted")}
+                {t("trustedAssets.notTrusted")}
               </button>
             )}
             <SharedIconRouterLink
               path="/send"
               state={assetAmount.asset}
               iconClass="asset_icon_send"
             />
-            {NETWORKS_SUPPORTING_SWAPS.has(selectedNetwork.chainID) && (
+            {NETWORKS_SUPPORTING_SWAPS.has(selectedNetwork.chainID) ? (
               <SharedIconRouterLink
                 path="/swap"
                 state={{
@@ -127,6 +128,33 @@ export default function CommonAssetListItem(
                 }}
                 iconClass="asset_icon_swap"
               />
+            ) : (
+              <SharedTooltip
+                type="dark"
+                width={180}
+                horizontalPosition="left"
+                verticalPosition="bottom"
+                horizontalShift={30}
+                verticalShift={-20}
+                IconComponent={() => (
+                  <div className="button_wrap">
+                    <SharedIconRouterLink
+                      path="/swap"
+                      disabled
+                      state={{
+                        symbol: assetAmount.asset.symbol,
+                        contractAddress,
+                      }}
+                      iconClass="asset_icon_swap"
+                    />
+                  </div>
+                )}
+              >
+                <div className="centered_tooltip">
+                  <div>{t("swapDisabledOne")}</div>
+                  <div>{t("swapDisabledTwo")}</div>
+                </div>
+              </SharedTooltip>
             )}
           </>
         </div>
@@ -142,6 +170,12 @@ export default function CommonAssetListItem(
           letter-spacing: 0.42px;
           line-height: 16px;
         }
+        .centered_tooltip {
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+        }
       `}</style>
     </Link>
   )

diff --git a/ui/components/Wallet/WalletAccountBalanceControl.tsx b/ui/components/Wallet/WalletAccountBalanceControl.tsx
@@ -16,6 +16,7 @@ import SharedSlideUpMenu from "../Shared/SharedSlideUpMenu"
 import Receive from "../../pages/Receive"
 import ReadOnlyNotice from "../Shared/ReadOnlyNotice"
 import SharedSquareButton from "../Shared/SharedSquareButton"
+import SharedTooltip from "../Shared/SharedTooltip"
 
 type ActionButtonsProps = {
   onReceive: () => void
@@ -46,7 +47,7 @@ function ActionButtons(props: ActionButtonsProps): ReactElement {
               {t("send")}
             </SharedSquareButton>
           </div>
-          {NETWORKS_SUPPORTING_SWAPS.has(currentNetwork.chainID) && (
+          {NETWORKS_SUPPORTING_SWAPS.has(currentNetwork.chainID) ? (
             <div className="button_wrap">
               <SharedSquareButton
                 icon="icons/s/swap.svg"
@@ -60,6 +61,35 @@ function ActionButtons(props: ActionButtonsProps): ReactElement {
                 {t("swap")}
               </SharedSquareButton>
             </div>
+          ) : (
+            <SharedTooltip
+              type="dark"
+              width={180}
+              horizontalPosition="center"
+              verticalPosition="bottom"
+              verticalShift={-30}
+              horizontalShift={30}
+              IconComponent={() => (
+                <div className="button_wrap">
+                  <SharedSquareButton
+                    icon="icons/s/swap.svg"
+                    ariaLabel={t("swap")}
+                    iconColor={{
+                      color: "#3A6565",
+                      hoverColor: "#3A6565",
+                    }}
+                    disabled
+                  >
+                    {t("swap")}
+                  </SharedSquareButton>
+                </div>
+              )}
+            >
+              <div className="centered_tooltip">
+                <div>{t("swapDisabledOne")}</div>
+                <div>{t("swapDisabledTwo")}</div>
+              </div>
+            </SharedTooltip>
           )}
           <div className="button_wrap">
             <SharedSquareButton
@@ -110,6 +140,13 @@ function ActionButtons(props: ActionButtonsProps): ReactElement {
             width: 50px;
             text-align: center;
           }
+          .centered_tooltip {
+            display: flex;
+            font-size: 14px;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+          }
         `}
       </style>
     </div>

diff --git a/ui/pages/SingleAsset.tsx b/ui/pages/SingleAsset.tsx
@@ -154,7 +154,7 @@ export default function SingleAsset(): ReactElement {
                 >
                   {t("shared.send")}
                 </SharedButton>
-                {NETWORKS_SUPPORTING_SWAPS.has(currentNetwork.chainID) && (
+                {NETWORKS_SUPPORTING_SWAPS.has(currentNetwork.chainID) ? (
                   <SharedButton
                     type="primary"
                     size="medium"
@@ -166,6 +166,30 @@ export default function SingleAsset(): ReactElement {
                   >
                     {t("shared.swap")}
                   </SharedButton>
+                ) : (
+                  <SharedTooltip
+                    type="dark"
+                    width={180}
+                    horizontalPosition="center"
+                    verticalPosition="bottom"
+                    horizontalShift={80}
+                    verticalShift={-20}
+                    IconComponent={() => (
+                      <SharedButton
+                        type="primary"
+                        size="medium"
+                        isDisabled
+                        iconSmall="swap"
+                      >
+                        {t("shared.swap")}
+                      </SharedButton>
+                    )}
+                  >
+                    <div className="centered_tooltip">
+                      <div>{t("wallet.swapDisabledOne")}</div>
+                      <div>{t("wallet.swapDisabledTwo")}</div>
+                    </div>
+                  </SharedTooltip>
                 )}
               </>
             ) : (