feat: redirect users to default page in case of default config

l2beat · Mar 26, 2024 · 0cb942e · 0cb942e
1 parent 4ede990
commit 0cb942e
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 3 deletions.
diff --git a/packages/frontend/src/view/components/oapp/OAppConfig.tsx b/packages/frontend/src/view/components/oapp/OAppConfig.tsx
@@ -1,7 +1,14 @@
-import { getPrettyChainName, OAppsResponse, OAppWithConfigs } from '@lz/libs'
+import {
+  ChainId,
+  getPrettyChainName,
+  OAppsResponse,
+  OAppWithConfigs,
+} from '@lz/libs'
 import cx from 'classnames'
 import { ReactNode, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
 
+import { LinkIcon } from '../../icons/LinkIcon'
 import { SolidMinusIcon } from '../../icons/MinusIcon'
 import { SolidPlusIcon } from '../../icons/PlusIcon'
 import { SimpleArrowIcon } from '../../icons/SimpleArrowIcon'
@@ -19,6 +26,7 @@ export function OAppConfig(props: {
   config: OAppWithConfigs['configurations'][number]
   defaults: OAppsResponse['defaultConfigurations']
 }) {
+  const navigate = useNavigate()
   const [isExpanded, setIsExpanded] = useState(!props.config.isDefault)
 
   const defaultForChain = props.defaults.find(
@@ -33,6 +41,16 @@ export function OAppConfig(props: {
     setIsExpanded(!isExpanded)
   }
 
+  function redirectToDefaults() {
+    navigate(
+      `/?chain=ethereum&remote-chain=${ChainId.getName(
+        props.config.targetChainId,
+      )}&version=V1`,
+    )
+  }
+
+  const { isDefault } = props.config
+
   const remap = createRemapping(props.config, defaultForChain.configuration)
 
   const relayer = remap('relayer')
@@ -60,9 +78,15 @@ export function OAppConfig(props: {
           <div>
             <button
               className="brightness-100 filter transition-all duration-300 hover:brightness-[120%]"
-              onClick={toggleExpand}
+              onClick={isDefault ? redirectToDefaults : toggleExpand}
             >
-              {isExpanded ? <SolidMinusIcon /> : <SolidPlusIcon />}
+              {isDefault ? (
+                <SolidLinkIcon />
+              ) : isExpanded ? (
+                <SolidMinusIcon />
+              ) : (
+                <SolidPlusIcon />
+              )}
             </button>
           </div>
         </div>
@@ -183,6 +207,14 @@ function SolidArrowRight() {
   )
 }
 
+function SolidLinkIcon() {
+  return (
+    <div className="flex h-5 w-5 items-center justify-center rounded bg-yellow-100">
+      <LinkIcon width={14} height={14} />
+    </div>
+  )
+}
+
 /**
  * Squashes default configuration with the current configuration.
  * `previousValue` is set to undefined if the configuration key is default.

diff --git a/packages/frontend/src/view/icons/LinkIcon.tsx b/packages/frontend/src/view/icons/LinkIcon.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+
+export function LinkIcon(props: React.SVGProps<SVGSVGElement>): JSX.Element {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="black"
+      stroke-width="2.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      {...props}
+    >
+      <path d="M15 3h6v6" />
+      <path d="M10 14 21 3" />
+      <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+    </svg>
+  )
+}