refactor(synapse-interface): bridge display settings logic (#2908)

* refactor: clean bridge settings ui logic * Clean ternary
synapsecns · Jul 23, 2024 · ae69d71 · ae69d71
1 parent bda3181
commit ae69d71
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 26 deletions.
diff --git a/packages/synapse-interface/components/StateManagedBridge/SettingsToggle.tsx b/packages/synapse-interface/components/StateManagedBridge/SettingsToggle.tsx
@@ -0,0 +1,20 @@
+import { SettingsIcon } from '../icons/SettingsIcon'
+
+export const SettingsToggle = ({
+  showSettingsToggle,
+}: {
+  showSettingsToggle: boolean
+}) => {
+  return (
+    <>
+      {showSettingsToggle ? (
+        <>
+          <SettingsIcon className="w-5 h-5 mr-2" />
+          <span>Settings</span>
+        </>
+      ) : (
+        <span>Close</span>
+      )}
+    </>
+  )
+}
diff --git a/packages/synapse-interface/pages/state-managed-bridge/index.tsx b/packages/synapse-interface/pages/state-managed-bridge/index.tsx
@@ -21,7 +21,7 @@ import { SwitchButton } from '@/components/buttons/SwitchButton'
 import { PageHeader } from '@/components/PageHeader'
 import SettingsSlideOver from '@/components/StateManagedBridge/SettingsSlideOver'
 import Button from '@/components/ui/tailwind/Button'
-import { SettingsIcon } from '@/components/icons/SettingsIcon'
+import { SettingsToggle } from '@/components/StateManagedBridge/SettingsToggle'
 import { BridgeCard } from '@/components/ui/BridgeCard'
 import { ConfirmDestinationAddressWarning } from '@/components/StateManagedBridge/BridgeWarnings'
 import { EMPTY_BRIDGE_QUOTE_ZERO } from '@/constants/bridge'
@@ -560,39 +560,25 @@ const StateManagedBridge = () => {
             title="Bridge"
             subtitle="Send your assets across chains."
           />
-          <div>
-            <Button
-              className="flex items-center p-3 text-opacity-75 bg-bgLight hover:bg-bgLighter text-secondaryTextColor hover:text-white"
-              onClick={() => {
-                if (showSettingsSlideOver === true) {
-                  dispatch(setShowSettingsSlideOver(false))
-                } else {
-                  dispatch(setShowSettingsSlideOver(true))
-                }
-              }}
-            >
-              {!showSettingsSlideOver ? (
-                <>
-                  <SettingsIcon className="w-5 h-5 mr-2" />
-                  <span>Settings</span>
-                </>
-              ) : (
-                <span>Close</span>
-              )}
-            </Button>
-          </div>
+          <Button
+            className="flex items-center p-3 text-opacity-75 bg-bgLight hover:bg-bgLighter text-secondaryTextColor hover:text-white"
+            onClick={() =>
+              dispatch(setShowSettingsSlideOver(!showSettingsSlideOver))
+            }
+          >
+            <SettingsToggle showSettingsToggle={!showSettingsSlideOver} />
+          </Button>
         </div>
         <BridgeCard bridgeRef={bridgeDisplayRef}>
           {maintenanceCountdownProgressInstances.map((instance) => (
             <>{instance.MaintenanceCountdownProgressBar}</>
           ))}
 
-          {showSettingsSlideOver && (
-            <div className="min-h-[472px] ">
+          {showSettingsSlideOver ? (
+            <div className="min-h-[472px]">
               <SettingsSlideOver key="settings" />
             </div>
-          )}
-          {!showSettingsSlideOver && (
+          ) : (
             <>
               <InputContainer />
               <SwitchButton