synapsecns · abtestingalpha · Apr 4, 2024 · Feb 14, 2024 · Feb 14, 2024 · Feb 14, 2024
@@ -7,7 +7,6 @@
 
 # testing
 /coverage
-/cypress/visual-states/*
 
 # next.js
 /.next/

@@ -2,76 +2,33 @@ import { useEffect, useState } from 'react'
 import { useDispatch } from 'react-redux'
 import { useAccount } from 'wagmi'
 import { switchNetwork } from '@wagmi/core'
-import { useConnectModal } from '@rainbow-me/rainbowkit'
 import { ConnectButton } from '@rainbow-me/rainbowkit'
+import { LoaderIcon } from 'react-hot-toast'
 
 import { setFromChainId } from '@/slices/bridge/reducer'
-import { useBridgeState } from '@/slices/bridge/hooks'
 import { CHAINS_BY_ID } from '@/constants/chains'
-import {
-  getNetworkButtonBgClassNameActive,
-  getNetworkButtonBorderActive,
-  getNetworkButtonBorderHover,
-  getNetworkHover,
-} from '@/styles/chains'
-import { LoaderIcon } from 'react-hot-toast'
+import { getNetworkButtonBorderHover, getNetworkHover } from '@/styles/chains'
+import { joinClassNames } from '@/utils/joinClassNames'
 
-export const ConnectedIndicator = () => {
-  return (
-    <button
-      data-test-id="connected-button"
-      className={`
-        flex items-center justify-center
-        text-base text-white px-3 py-1 rounded-lg
-        text-center transform-gpu transition-all duration-75
-        border border-solid border-transparent
-        hover:cursor-default
-        h-8
-      `}
-    >
-      <div className="flex flex-row text-sm">
-        <div
-          className={`
-            my-auto ml-auto mr-2 w-2 h-2
-            bg-green-500 rounded-full
-            `}
-        />
-        Connected
-      </div>
-    </button>
-  )
-}
-
-const DisconnectedIndicator = () => {
-  const { openConnectModal } = useConnectModal()
-  const { fromChainId } = useBridgeState()
-  const chain = CHAINS_BY_ID[fromChainId]
+const Indicator = ({ className }) => (
+  <span
+    className={`w-2 h-2 rounded-full ${
+      className.match(/^border-/) ? `border` : ''
+    } ${className}`}
+  />
+)
 
+export const ConnectedIndicator = () => {
+  const className = joinClassNames({
+    flex: 'flex items-center gap-2',
+    space: 'px-3 py-1 rounded-full',
+    hover: 'hover:opacity-80',
+    font: 'text-sm',
+  })
   return (
-    <button
-      data-test-id="disconnected-button"
-      className={`
-        flex items-center justify-center
-        text-base text-white px-3 py-1 rounded-md
-        text-center transform-gpu transition-all duration-75
-        border border-solid border-transparent
-        h-8
-        ${getNetworkHover(chain?.color)}
-        ${getNetworkButtonBgClassNameActive(chain?.color)}
-        ${getNetworkButtonBorderActive(chain?.color)}
-        ${getNetworkButtonBorderHover(chain?.color)}
-      `}
-      onClick={openConnectModal}
-    >
-      <div className="flex flex-row text-sm">
-        <div
-          className={`
-            my-auto ml-auto mr-2 w-2 h-2
-            bg-red-500 rounded-full
-            `}
-        />
-        Disconnected
-      </div>
+    <button data-test-id="connected-button" disabled className={className}>
+      <Indicator className="bg-green-500 dark:bg-green-400" />
+      Connected
     </button>
   )
 }
@@ -97,45 +54,33 @@ export const ConnectToNetworkButton = ({ chainId }: { chainId: number }) => {
     }
   }
 
+  const className = joinClassNames({
+    flex: 'flex items-center gap-2',
+    space: 'px-3 py-1 rounded-full',
+    border: 'border border-transparent',
+    font: 'text-sm',
+    bgHover: getNetworkHover(chain?.color),
+    borderHover: getNetworkButtonBorderHover(chain?.color),
+    active: 'hover:active:opacity-80',
+  })
+
   return (
     <button
       data-test-id="connect-button"
-      className={`
-        flex items-center justify-center
-        text-base text-white px-3 py-1 rounded-lg
-        text-center transform-gpu transition-all duration-75
-        border border-solid border-transparent
-        h-8
-        ${getNetworkHover(chain?.color)}
-        ${getNetworkButtonBgClassNameActive(chain?.color)}
-        ${getNetworkButtonBorderActive(chain?.color)}
-        ${getNetworkButtonBorderHover(chain?.color)}
-      `}
+      className={className}
       onClick={handleConnectNetwork}
     >
       {isConnecting ? (
-        <div className="flex flex-row text-sm">
-          <div
-            className={`
-              my-auto ml-auto mr-2 text-transparent w-2 h-2
-              border border-green-300 border-solid rounded-full
-            `}
-          />
-          <div className="flex items-center space-x-2">
-            <div>Connecting</div>
-            <LoaderIcon />
-          </div>
-        </div>
+        <>
+          <Indicator className="border-green-500 dark:border-green-400" />
+          Connecting
+          <LoaderIcon />
+        </>
       ) : (
-        <div className="flex flex-row text-sm">
-          <div
-            className={`
-              my-auto ml-auto mr-2 text-transparent w-2 h-2
-              border border-indigo-300 border-solid rounded-full
-            `}
-          />
+        <>
+          <Indicator className="border-indigo-500 dark:border-indigo-300" />
           Switch Network
-        </div>
+        </>
       )}
     </button>
   )
@@ -149,6 +94,16 @@ export function ConnectWalletButton() {
     setClientReady(true)
   }, [])
 
+  const className = joinClassNames({
+    flex: 'flex items-center gap-2',
+    space: 'px-3 py-1 rounded-full',
+    border: 'border border-transparent',
+    hover:
+      'hover:bg-fuchsia-50 hover:border-fuchsia-500 hover:dark:bg-fuchsia-950',
+    font: 'text-sm',
+    active: 'active:opacity-80',
+  })
+
   return (
     <div data-test-id="">
       {clientReady && (
@@ -159,18 +114,8 @@ export function ConnectWalletButton() {
                 {(() => {
                   if (!mounted || !account || !chain || !address) {
                     return (
-                      <button
-                        className={`
-                          flex items-center text-sm text-white mr-2
-                        `}
-                        onClick={openConnectModal}
-                      >
-                        <div
-                          className={`
-                            my-auto ml-auto mr-2 text-transparent w-2 h-2
-                            border border-indigo-300 border-solid rounded-full
-                          `}
-                        />
+                      <button className={className} onClick={openConnectModal}>
+                        <Indicator className="border-fuchsia-500" />
                         Connect Wallet
                       </button>
                     )

@@ -10,9 +10,9 @@ import {
 } from './components/TransactionExplorerLink'
 import { getExplorerAddressUrl, getExplorerTxUrl } from '@/constants/urls'
 import { DISCORD_URL } from '@/constants/urls'
-import Button from '../../ui/tailwind/Button'
+import Button from '@/components/ui/tailwind/Button'
 import SynapseLogo from '@assets/icons/syn.svg'
-import DiscordIcon from '../../icons/DiscordIcon'
+import DiscordIcon from '@/components/icons/DiscordIcon'
 import { DownArrow } from '@/components/icons/DownArrow'
 
 export const TransactionOptions = ({

@@ -43,7 +43,7 @@ const ConnectedButton = () => {
         <div
           className={`
             my-auto ml-auto mr-2 w-2 h-2
-            bg-green-500 rounded-full
+            bg-green-400 rounded-full
           `}
         />
         Connected
@@ -89,7 +89,7 @@ const ConnectButton = ({ chainId }: { chainId: number }) => {
           <div
             className={`
               my-auto ml-auto mr-2 text-transparent w-2 h-2
-              border border-green-300 border-solid rounded-full
+              border border-green-400 border-solid rounded-full
             `}
           />
           Connecting...

@@ -16,7 +16,7 @@ import { PortfolioAssetActionButton } from './PortfolioAssetActionButton'
 import { trimTrailingZeroesAfterDecimal } from '@/utils/trimTrailingZeroesAfterDecimal'
 
 const handleFocusOnBridgeInput = () => {
-  inputRef.current.focus()
+  inputRef.current?.focus()
 }
 
 type PortfolioTokenAssetProps = {

@@ -9,17 +9,25 @@ import { EMPTY_BRIDGE_QUOTE } from '@/constants/bridge'
 import { CHAINS_BY_ID } from '@constants/chains'
 import * as CHAINS from '@constants/chains/master'
 
-const BridgeExchangeRateInfo = () => {
+export const BridgeExchangeRateInfo = () => {
+  /* TODO:
+   * Upgrade to collapsable element
+   * Use dark:border-zinc-800 in <section> className
+   */
+
   return (
-    <div className="py-3.5 px-1 space-y-3 text-sm md:px-6 tracking-wide">
-      <TimeEstimate />
-      <section className="p-2 space-y-1 text-sm border rounded-sm border-[#504952] text-secondary font-light">
+    <details open className="mt-1 mb-2 text-sm">
+      <summary className="block px-1 mb-2 text-right cursor-default pointer-events-none">
+        <TimeEstimate />
+      </summary>
+      <section className="block p-2 leading-relaxed border rounded border-zinc-300 dark:border-separator">
+        {' '}
         <GasDropLabel />
         <Router />
         <Slippage />
         <DestinationAddress />
       </section>
-    </div>
+    </details>
   )
 }
 
@@ -55,11 +63,11 @@ const Slippage = () => {
     useExchangeRateInfo(fromValue, exchangeRate)
   return (
     <div className="flex justify-between">
-      <div>Slippage</div>
+      <span className="text-zinc-500 dark:text-zinc-400">Slippage</span>
       {safeFromAmount !== '0' && !underFee ? (
         <span className={textColor}>{formattedPercentSlippage}</span>
       ) : (
-        <span className="">—</span>
+        <span className="">−</span>
       )}
     </div>
   )
@@ -71,8 +79,8 @@ const Router = () => {
   } = useBridgeState()
   return (
     <div className="flex justify-between">
-      <div>Router</div>
-      <div className="text-primaryTextColor">{bridgeModuleName}</div>
+      <span className="text-zinc-500 dark:text-zinc-400">Router</span>
+      {bridgeModuleName}
     </div>
   )
 }
@@ -100,14 +108,18 @@ const TimeEstimate = () => {
     !bridgeQuote ||
     bridgeQuote.outputAmount === EMPTY_BRIDGE_QUOTE.outputAmount
   ) {
-    showText = null
+    showText = (
+      <span className="text-zinc-500 dark:text-zinc-400">
+        Powered by Synapse
+      </span>
+    )
   }
 
   if (!fromToken) {
     showText = `Select origin token`
   }
 
-  return <div className="text-right text-secondary">{showText}</div>
+  return showText
 }
 
 const GasDropLabel = () => {
@@ -141,15 +153,15 @@ const GasDropLabel = () => {
   }
 
   return (
-    <div className="flex items-center text-secondary">
-      <span className="">Will also receive {formattedGasDropAmount} </span>
-      <span className="ml-1 font-medium text-white">
-        {symbol}{' '}
-        <span className="font-normal ">
-          {airdropInDollars && `($${airdropInDollars})`}
-        </span>
+    <>
+      <span className="text-zinc-500 dark:text-zinc-400">
+        Will also receive {formattedGasDropAmount}
       </span>
-    </div>
+      <span>
+        {' '}
+        {symbol} {airdropInDollars && `($${airdropInDollars})`}
+      </span>
+    </>
   )
 }
 
@@ -165,7 +177,7 @@ const useExchangeRateInfo = (fromValue, exchangeRate) => {
 
   const textColor: string = useMemo(() => {
     if (numExchangeRate >= 1) {
-      return 'text-green-300'
+      return 'text-green-500'
     } else if (numExchangeRate > 0.975) {
       return 'text-amber-500'
     } else {
@@ -199,5 +211,3 @@ const getAirdropInDollars = (
     return undefined
   }
 }
-
-export default BridgeExchangeRateInfo
@@ -94,7 +94,7 @@ export const BridgeTransactionButton = ({
     }
   } else if (!fromChainId) {
     buttonProperties = {
-      label: 'Please select Origin network',
+      label: 'Please select Origin Network',
       onClick: null,
     }
   } else if (!toChainId) {
@@ -136,7 +136,7 @@ export const BridgeTransactionButton = ({
     }
   } else if (destinationAddress && !isAddress(destinationAddress)) {
     buttonProperties = {
-      label: 'Invalid destination address',
+      label: 'Invalid Destination address',
     }
   } else if (showDestinationWarning && !isDestinationWarningAccepted) {
     buttonProperties = {