From 716330c591012a2b0951e7af6c6c9657bc848234 Mon Sep 17 00:00:00 2001
From: Bartek <bartlomiejkramek@outlook.com>
Date: Fri, 20 Dec 2024 13:44:53 +0100
Subject: [PATCH] feat: add fast withdrawal icon (#2157)

---
 .../public/images/LightningIcon.svg           |  3 +++
 .../TransferPanel/TransferPanelSummary.tsx    | 24 ++++++++++++-------
 2 files changed, 19 insertions(+), 8 deletions(-)
 create mode 100644 packages/arb-token-bridge-ui/public/images/LightningIcon.svg

diff --git a/packages/arb-token-bridge-ui/public/images/LightningIcon.svg b/packages/arb-token-bridge-ui/public/images/LightningIcon.svg
new file mode 100644
index 0000000000..b3b74ca881
--- /dev/null
+++ b/packages/arb-token-bridge-ui/public/images/LightningIcon.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.1901 5.33453C13.1145 5.16328 12.9451 5.05328 12.7576 5.05328H9.42318L11.2264 1.93008C11.3108 1.78382 11.3108 1.60382 11.2264 1.45696C11.142 1.3107 10.9858 1.2207 10.817 1.2207H7.12394C6.9552 1.2207 6.79957 1.3107 6.71457 1.45633L2.83324 8.15446C2.74824 8.30072 2.74824 8.48134 2.83261 8.62758C2.91699 8.77384 3.07324 8.86446 3.24261 8.86446H6.23635L4.35955 14.1463C4.28392 14.3588 4.36892 14.5951 4.56267 14.7107C4.63829 14.7557 4.72204 14.7776 4.80517 14.7776C4.93517 14.7776 5.06329 14.7238 5.1558 14.622L13.1077 5.84328C13.2333 5.70454 13.2652 5.50516 13.1895 5.33391L13.1901 5.33453ZM6.04316 12.2345L7.3519 8.55026C7.40315 8.40526 7.38128 8.24464 7.29253 8.11901C7.20378 7.99338 7.06002 7.91901 6.90628 7.91901H4.06308L7.39614 2.16714H9.99801L8.19481 5.29034C8.11044 5.4366 8.11044 5.6166 8.19481 5.76346C8.27918 5.90972 8.43544 5.99972 8.60418 5.99972H11.6911L6.04298 12.2354L6.04316 12.2345Z" fill="#FFD000"/>
+</svg>
diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelSummary.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelSummary.tsx
index 53015bc306..3761043fd8 100644
--- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelSummary.tsx
+++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelSummary.tsx
@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react'
 import { InformationCircleIcon } from '@heroicons/react/24/outline'
 import { twMerge } from 'tailwind-merge'
+import Image from 'next/image'
 
 import { formatAmount } from '../../util/NumberUtils'
 import { getNetworkName, isNetwork } from '../../util/networks'
@@ -20,6 +21,7 @@ import { NoteBox } from '../common/NoteBox'
 import { DISABLED_CHAIN_IDS } from './useTransferReadiness'
 import { useIsBatchTransferSupported } from '../../hooks/TransferPanel/useIsBatchTransferSupported'
 import { getConfirmationTime } from '../../util/WithdrawalUtils'
+import LightningIcon from '@/images/LightningIcon.svg'
 
 export type TransferPanelSummaryToken = {
   symbol: string
@@ -284,7 +286,7 @@ function ConfirmationTimeInfo({ chainId }: { chainId: number }) {
   return (
     <>
       <span className="whitespace-nowrap">Confirmation time:</span>
-      <span className="flex items-center font-medium">
+      <span className="flex flex-col items-start font-medium sm:flex-row sm:items-center">
         <span className="hidden sm:inline">
           {confirmationTimeInReadableFormat}
         </span>
@@ -292,13 +294,19 @@ function ConfirmationTimeInfo({ chainId }: { chainId: number }) {
           {confirmationTimeInReadableFormatShort}
         </span>
         {fastWithdrawalActive && (
-          <Tooltip
-            content={
-              'Fast Withdrawals relies on a committee of validators. In the event of a committee outage, your withdrawal falls back to the 7 day challenge period secured by Arbitrum Fraud Proofs.'
-            }
-          >
-            <InformationCircleIcon className="ml-1 h-3 w-3" />
-          </Tooltip>
+          <div className="flex items-center">
+            <Tooltip
+              content={
+                'Fast Withdrawals relies on a committee of validators. In the event of a committee outage, your withdrawal falls back to the 7 day challenge period secured by Arbitrum Fraud Proofs.'
+              }
+            >
+              <InformationCircleIcon className="h-3 w-3 sm:ml-1" />
+            </Tooltip>
+            <div className="ml-1 flex space-x-0.5 text-[#FFD000]">
+              <Image src={LightningIcon} alt="Lightning Icon" />
+              <span className="font-normal">FAST</span>
+            </div>
+          </div>
         )}
       </span>
     </>