Transaction tracking

packages/synapse-interface/components/Custom/CustomBridge.tsx

@@ -43,6 +43,7 @@ import { USDC } from '@/constants/tokens/bridgeable'
 import { useMaintenance } from '@/components/Maintenance/Maintenance'
 import { cleanNumberInput } from '@/utils/cleanNumberInput'
 import { useConnectModal } from '@rainbow-me/rainbowkit'
+import { TransactionSummary } from './components/TransactionSummary'
 
 export const CustomBridge = () => {
   const dispatch = useAppDispatch()
@@ -325,6 +326,7 @@ export const CustomBridge = () => {
   return (
     <div className="flex flex-col w-full max-w-lg mx-auto lg:mx-0">
       <div className="flex flex-col space-y-3">
+        <TransactionSummary />
         {isConnected && (
           <div className="rounded-md bg-zinc-100 dark:bg-bgBase">
             <div className="flex items-center p-3 space-x-2 text-lg">

packages/synapse-interface/components/Custom/components/AnimatedProgressBar.tsx

@@ -0,0 +1,106 @@
+import { memo } from 'react'
+
+import { getTimeMinutesFromNow } from '../utils/getTimeMinutesFromNow'
+
+/**
+ * @param id unique identifier for progress bar instance
+ * @param startTime timestamp in seconds
+ * @param estDuration total duration in seconds
+ * @param isComplete completion status
+ */
+
+export const AnimatedProgressBar = memo(
+  ({
+    id,
+    startTime,
+    estDuration,
+    isComplete,
+  }: {
+    id: string
+    startTime: number
+    estDuration: number
+    isComplete: boolean
+  }) => {
+    const currentTime = getTimeMinutesFromNow(0)
+    const elapsedTime = currentTime - startTime
+    const remainingTime = estDuration - elapsedTime
+    const percentElapsed = (elapsedTime / estDuration) * 100
+
+    const duration = isComplete ? 0.5 : remainingTime
+
+    const synapsePurple = 'hsl(265deg 100% 75%)'
+    const tailwindGreen400 = 'rgb(74 222 128)'
+    const height = 3
+
+    const progressId = `progress-${id}`
+    const maskId = `mask-${id}`
+
+    return (
+      <svg
+        id="animated-progress-bar"
+        key={Date.now()}
+        width="100%"
+        height={height}
+        xmlns="http://www.w3.org/2000/svg"
+        className="rounded-sm"
+      >
+        <defs>
+          <linearGradient id={progressId} spreadMethod="reflect" x1="0" x2="1">
+            <stop stopColor={synapsePurple} />
+            <stop stopColor={synapsePurple} offset=".25" />
+            <stop stopColor={synapsePurple} stopOpacity=".67" offset=".75" />
+            <stop stopColor={synapsePurple} stopOpacity=".67" offset="1" />
+            <animate
+              attributeName="x1"
+              values="0%; -6%"
+              dur=".67s"
+              repeatCount="indefinite"
+            />
+            <animate
+              attributeName="x2"
+              values="3%; -3%"
+              dur=".67s"
+              repeatCount="indefinite"
+            />
+          </linearGradient>
+          <clipPath id={maskId}>
+            <rect height="100%">
+              <animate
+                attributeName="width"
+                values={`${percentElapsed}%; 100%`}
+                dur={duration}
+                fill="freeze"
+                calcMode={isComplete && 'spline'}
+                keySplines=".8 0 .2 1"
+              />
+            </rect>
+          </clipPath>
+        </defs>
+        <rect
+          width="100%"
+          height={height}
+          fill={`url(#${progressId})`}
+          clipPath={`url(#${maskId})`}
+        >
+          {isComplete && (
+            <animate
+              attributeName="fill"
+              values={`${synapsePurple}; hsl(185deg 100% 40%); ${tailwindGreen400}`}
+              keyTimes="0; .5; 1"
+              dur={duration}
+              fill="freeze"
+            />
+          )}
+        </rect>
+        {isComplete && (
+          <animate
+            attributeName="fill"
+            values={`${tailwindGreen400}`}
+            dur="0.1s"
+            fill="freeze"
+          />
+        )}
+      </svg>
+    )
+  }
+)

packages/synapse-interface/components/Custom/components/DropdownMenu.tsx

@@ -0,0 +1,44 @@
+import { useRef, useState } from 'react'
+
+import { DownArrow } from '@/components/icons/DownArrow'
+import useCloseOnOutsideClick from '@/utils/hooks/useCloseOnOutsideClick'
+import { useCloseOnEscape } from '@/utils/hooks/useCloseOnEscape'
+
+export const DropdownMenu = ({ menuTitleElement, children }) => {
+  const [open, setOpen] = useState<boolean>(false)
+  const ref = useRef(null)
+
+  const handleClick = () => {
+    setOpen(!open)
+  }
+
+  const closeDropdown = () => setOpen(false)
+
+  useCloseOnOutsideClick(ref, closeDropdown)
+  useCloseOnEscape(closeDropdown)
+
+  return (
+    <div className="relative" ref={ref}>
+      <div
+        onClick={handleClick}
+        className={`
+          flex place-items-center justify-center
+          px-2 py-1 rounded space-x-2 cursor-pointer
+        `}
+      >
+        {menuTitleElement}
+        <DownArrow />
+      </div>
+
+      {open && (
+        <ul
+          className={`
+            absolute z-50 mt-1 p-0 bg-zinc-100 dark:bg-bgBase rounded shadow popover -right-1 list-none text-left text-sm
+          `}
+        >
+          {children}
+        </ul>
+      )}
+    </div>
+  )
+}

packages/synapse-interface/components/Custom/components/MenuItem.tsx

@@ -0,0 +1,43 @@
+export const MenuItem = ({
+  text,
+  link,
+  onClick,
+}: {
+  text: string
+  link: string
+  onClick?: () => any
+}) => {
+  return (
+    <li
+      className={`
+      rounded cursor-pointer
+      border border-solid border-transparent
+      hover:border-[--synapse-focus]
+      active:opacity-40
+    `}
+    >
+      {onClick ? (
+        <div
+          onClick={onClick}
+          className={`
+            block pl-2 pr-3 py-2 whitespace-nowrap text-[--synapse-text-primary] no-underline after:content-['_↗'] after:text-xs after:text-[--synapse-secondary]
+          `}
+        >
+          {text}
+        </div>
+      ) : (
+        <a
+          href={link ?? ''}
+          onClick={onClick}
+          target="_blank"
+          rel="noreferrer"
+          className={`
+            block pl-2 pr-3 py-2 whitespace-nowrap text-[--synapse-text-primary] no-underline after:content-['_↗'] after:text-xs after:text-[--synapse-secondary]
+          `}
+        >
+          {text}
+        </a>
+      )}
+    </li>
+  )
+}

packages/synapse-interface/components/Custom/components/TimeRemaining.tsx

@@ -0,0 +1,38 @@
+import { useMemo } from 'react'
+
+export const TimeRemaining = ({
+  isComplete,
+  remainingTime,
+  isDelayed,
+  delayedTime,
+}: {
+  isComplete: boolean
+  remainingTime: number
+  isDelayed: boolean
+  delayedTime: number | null
+}) => {
+  if (isComplete) {
+    return <div>Complete!</div>
+  }
+
+  if (isDelayed) {
+    const delayedTimeInMin = Math.floor(delayedTime / 60)
+    const absoluteDelayedTime = Math.abs(delayedTimeInMin)
+    const showDelayedTime = delayedTimeInMin < -1
+    return (
+      <div>
+        Waiting... {showDelayedTime ? `(${absoluteDelayedTime}m)` : null}
+      </div>
+    )
+  }
+
+  const estTime = useMemo(() => {
+    if (remainingTime > 60) {
+      return Math.ceil(remainingTime / 60) + 'm remaining'
+    } else {
+      return remainingTime + 's remaining'
+    }
+  }, [remainingTime])
+
+  return <div>{estTime}</div>
+}