Design review fixes

src/components/Forms/FormikInput.tsx

@@ -66,7 +66,7 @@ export const FormikInput: FC<
         isInvalid={isError}
         errorBorderColor="red.300"
         placeholder={placeholder}
-        _placeholder={{ color: "hsla(0, 0%, 100%, 30%)" }}
+        _placeholder={{ color: "hsla(0, 0%, 100%, 40%)" }}
         _readOnly={{
           bg: "hsla(0, 0%, 20%, 30%)",
           borderColor: "hsl(0, 0%, 20%)",

src/components/Modal/TransactionModal/TransactionIsWaitingForConfirmation.tsx

@@ -25,5 +25,6 @@ const TransactionIsWaitingForConfirmation: FC<Props> = ({
 
 export default withBaseModal(
   TransactionIsWaitingForConfirmation,
-  "Waiting for confirmations"
+  "Waiting for confirmations",
+  true
 )

src/components/Modal/withBaseModal.tsx

@@ -12,7 +12,8 @@ import { BaseModalProps } from "../../types"
 
 function withBaseModal<T extends BaseModalProps>(
   WrappedModalContent: ComponentType<T>,
-  label?: string
+  label?: string,
+  removeCloseButton?: boolean
 ) {
   return (props: T) => {
     return (
@@ -42,7 +43,9 @@ function withBaseModal<T extends BaseModalProps>(
                 {label}
               </Text>
             ) : null}
-            <ModalCloseButton ml="auto" position="relative" inset={0} />
+            {removeCloseButton ? null : (
+              <ModalCloseButton ml="auto" position="relative" inset={0} />
+            )}
           </ModalHeader>
           <WrappedModalContent {...props} />
         </ModalContent>

src/components/Toast/Toast.tsx

@@ -11,6 +11,7 @@ import {
   Flex,
   Icon,
   Box,
+  ComponentWithAs,
 } from "@chakra-ui/react"
 import { FC, useEffect, useState } from "react"
 import { setTimeout, clearTimeout } from "../../utils/setTimeout"
@@ -34,7 +35,7 @@ export interface ToastProps {
   isDismissable?: boolean
   orientation?: "horizontal" | "vertical"
   position?: PositionType
-  icon?: IconType
+  icon?: IconType | ComponentWithAs<"svg">
 }
 type AlertProps = ToastProps &
   Omit<AlertPropsBase, "position" | "variant"> &
@@ -56,8 +57,8 @@ const getPositioningProps = (position: PositionType) => {
 }
 
 const getMaxWidth = (position: PositionType, isDismissable: boolean) => {
-  if (position === "center" && isDismissable) {
-    return "toast-width"
+  if (isDismissable && position === "center") {
+    return "toast-width-dismissable"
   }
   if (position !== "center") {
     return "toast-width-aside"
@@ -133,7 +134,11 @@ const Toast: FC<AlertProps> = ({
                     <AlertDescription
                       lineHeight={5}
                       color="hsl(0, 0%, 56%)"
-                      whiteSpace="normal"
+                      whiteSpace={
+                        orientation === "horizontal" || position === "center"
+                          ? "nowrap"
+                          : "normal"
+                      }
                     >
                       {description ?? title}
                     </AlertDescription>

src/pages/Landing/components/LandingPagePartnersSection.tsx

@@ -1,7 +1,7 @@
 import { ComponentProps, FC } from "react"
 import { Flex, Text, Image } from "@chakra-ui/react"
 import aerodromeLogoSrc from "../../../static/images/aerodrome-logo.svg"
-import fxdxLogoSrc from "../../../static/images/fxdx-logo.svg"
+import curveLogoSrc from "../../../static/images/curve-logo.svg"
 import balancerLogoSrc from "../../../static/images/balancer-logo.svg"
 import LandingPageContentWrapper from "./LandingPageContentWrapper"
 
@@ -10,14 +10,14 @@ const partnersData = [
     name: "Aerodrome",
     imageSrc: aerodromeLogoSrc,
   },
-  {
-    name: "fxdx",
-    imageSrc: fxdxLogoSrc,
-  },
   {
     name: "Balancer",
     imageSrc: balancerLogoSrc,
   },
+  {
+    name: "Curve",
+    imageSrc: curveLogoSrc,
+  },
 ]
 
 const LandingPagePartnersSection: FC<

src/pages/tBTC/Bridge/DepositDetails.tsx

@@ -31,7 +31,7 @@ export const DepositDetails: PageComponent = () => {
     depositDetails: { isFetching, data, error },
   } = useTbtcState()
   const [isSafelyCloseInfoToastVisible, setIsSafelyCloseInfoToastVisible] =
-    useState(depositDetailsStep !== "bitcoin-confirmations")
+    useState(!!depositDetailsStep)
 
   useSubscribeToOptimisticMintingRequestedEvent(depositKey)
   useSubscribeToOptimisticMintingFinalizedEvent(depositKey)
@@ -115,7 +115,7 @@ export const DepositDetails: PageComponent = () => {
               position="right"
             />
           )}
-          <VStack spacing={0}>
+          {depositDetailsStep !== "completed" && (
             <VStack
               align="flex-start"
               alignSelf="stretch"
@@ -135,23 +135,19 @@ export const DepositDetails: PageComponent = () => {
                 <BodyLg color="hsla(0, 0%, 100%, 50%)">tBTC</BodyLg>
               </HStack>
             </VStack>
-            <StepSwitcher
-              step={mintingProgressStep}
-              confirmations={confirmations}
-              requiredConfirmations={requiredConfirmations}
-              optimisticMintingRequestedTxHash={
-                optimisticMintingRequestedTxHash
-              }
-              optimisticMintingFinalizedTxHash={
-                optimisticMintingFinalizedTxHash
-              }
-              btcTxHash={btcDepositTxHash}
-              updateStep={setMintingProgressStep}
-              amount={amount}
-              thresholdNetworkFee={thresholdNetworkFee}
-              mintingFee={mintingFee}
-            />
-          </VStack>
+          )}
+          <StepSwitcher
+            step={mintingProgressStep}
+            confirmations={confirmations}
+            requiredConfirmations={requiredConfirmations}
+            optimisticMintingRequestedTxHash={optimisticMintingRequestedTxHash}
+            optimisticMintingFinalizedTxHash={optimisticMintingFinalizedTxHash}
+            btcTxHash={btcDepositTxHash}
+            updateStep={setMintingProgressStep}
+            amount={amount}
+            thresholdNetworkFee={thresholdNetworkFee}
+            mintingFee={mintingFee}
+          />
         </>
       )}
     </>

src/pages/tBTC/Bridge/Minting/KnowledgeBaseLinks.tsx

@@ -99,7 +99,12 @@ export const KnowledgeBaseLinks: FC<KnowledgeBaseLinksProps> = ({
   ].filter(Boolean) as BridgeProcessResourcesItemProps[]
 
   return (
-    <VStack align="stretch" spacing={{ base: 4, lg: 52 }} {...restProps}>
+    <VStack
+      align="stretch"
+      w="full"
+      spacing={{ base: 4, lg: 52 }}
+      {...restProps}
+    >
       {depositKey ? <DepositTransactionHistory items={transactions} /> : null}
       <BridgeProcessResources items={resources} />
     </VStack>

src/pages/tBTC/Bridge/Minting/MakeDeposit.tsx

@@ -23,6 +23,8 @@ import withOnlyConnectedWallet from "../../../../components/withOnlyConnectedWal
 import { ViewInBlockExplorerProps } from "../../../../components/ViewInBlockExplorer"
 import { Copy as CopyIcon } from "../../../../static/icons/Copy"
 import { MintDurationTiers } from "../../../../components/MintDurationTiers"
+import { Toast } from "../../../../components/Toast"
+import { Hourglass as HourglassIcon } from "../../../../static/icons/Hourglass"
 
 const AddressRow: FC<
   { address: string; text: string } & Pick<ViewInBlockExplorerProps, "chain">
@@ -116,60 +118,69 @@ const MakeDepositComponent: FC<{
     useTbtcState()
 
   return (
-    <Box mx={{ base: 0, xl: 10 }}>
-      <BridgeProcessCardTitle
-        onPreviousStepClick={onPreviousStepClick}
-        badgeText="2/3"
-        title="Make your BTC deposit"
-        description={
-          <>
-            Use this generated address to send minimum{" "}
-            <Text as="span" color="white">
-              0.01&nbsp;BTC
-            </Text>
-            , to mint as tBTC. This address is a uniquely generated address
-            based on the data you provided.
-          </>
-        }
-        afterDescription={
-          <Badge variant="subtle" color="hsl(33, 93%, 54%)">
-            Action on Bitcoin
-          </Badge>
-        }
+    <>
+      <Toast
+        status="info"
+        icon={HourglassIcon}
+        title="Waiting for your deposit"
+        description="The system is continuously checking for your BTC deposits"
+        isDismissable={false}
       />
-      <BTCAddressSection mt={6} btcDepositAddress={btcDepositAddress} />
-      <MintDurationTiers
-        mt={6}
-        items={[
-          {
-            amount: 0.1,
-            rangeOperator: "less",
-            currency: "BTC",
-          },
-          {
-            amount: 1,
-            rangeOperator: "less",
-            currency: "BTC",
-          },
-          {
-            amount: 1,
-            rangeOperator: "greaterOrEqual",
-            currency: "BTC",
-          },
-        ]}
-      />
-      <Stack spacing={2} mt={6}>
-        <BodySm fontWeight="medium" color="brand.100" lineHeight={1.5}>
-          Provided Addresses Recap
-        </BodySm>
-        <AddressRow text="Base address" address={ethAddress} />
-        <AddressRow
-          text="BTC Recovery address"
-          address={btcRecoveryAddress}
-          chain="bitcoin"
+      <Box mx={{ base: 0, xl: 10 }}>
+        <BridgeProcessCardTitle
+          onPreviousStepClick={onPreviousStepClick}
+          badgeText="2/3"
+          title="Make your BTC deposit"
+          description={
+            <>
+              Use this generated address to send minimum{" "}
+              <Text as="span" color="white">
+                0.01&nbsp;BTC
+              </Text>
+              , to mint as tBTC. This address is a uniquely generated address
+              based on the data you provided.
+            </>
+          }
+          afterDescription={
+            <Badge variant="subtle" color="hsl(33, 93%, 54%)">
+              Action on Bitcoin
+            </Badge>
+          }
         />
-      </Stack>
-    </Box>
+        <BTCAddressSection mt={6} btcDepositAddress={btcDepositAddress} />
+        <MintDurationTiers
+          mt={6}
+          items={[
+            {
+              amount: 0.1,
+              rangeOperator: "less",
+              currency: "BTC",
+            },
+            {
+              amount: 1,
+              rangeOperator: "less",
+              currency: "BTC",
+            },
+            {
+              amount: 1,
+              rangeOperator: "greaterOrEqual",
+              currency: "BTC",
+            },
+          ]}
+        />
+        <Stack spacing={2} mt={6}>
+          <BodySm fontWeight="medium" color="brand.100" lineHeight={1.5}>
+            Provided Addresses Recap
+          </BodySm>
+          <AddressRow text="Base address" address={ethAddress} />
+          <AddressRow
+            text="BTC Recovery address"
+            address={btcRecoveryAddress}
+            chain="bitcoin"
+          />
+        </Stack>
+      </Box>
+    </>
   )
 }
 

src/pages/tBTC/Bridge/components/DepositDetailsStep.tsx

@@ -216,6 +216,7 @@ export const SuccessStep: FC<SuccessStepProps> = ({
         width={dimensions?.borderBox.width}
         height={dimensions?.borderBox.height}
         numberOfPieces={150}
+        gravity={0.05}
         drawShape={(ctx) => {
           // draw custom rectangular shapes with random sizes and opacity
           const width = randomRange(5, 20)

src/static/icons/Hourglass.tsx

@@ -0,0 +1,18 @@
+import { createIcon } from "@chakra-ui/icons"
+
+export const Hourglass = createIcon({
+  displayName: "Hourglass",
+  defaultProps: { color: "white" },
+  viewBox: "0 0 12 16",
+  path: (
+    <svg width="12" height="16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M4.00065 12.333H8.00065M2.40065 1.33301H9.60065C9.97402 1.33301 10.1607 1.33301 10.3033 1.40567C10.4288 1.46959 10.5307 1.57157 10.5947 1.69701C10.6673 1.83962 10.6673 2.02631 10.6673 2.39967V3.78269C10.6673 4.10881 10.6673 4.27187 10.6305 4.42532C10.5978 4.56137 10.5439 4.69142 10.4708 4.81072C10.3884 4.94528 10.2731 5.06058 10.0425 5.29118L8.08823 7.24543C7.82422 7.50944 7.69222 7.64144 7.64276 7.79366C7.59925 7.92756 7.59925 8.07179 7.64276 8.20569C7.69222 8.35791 7.82422 8.48991 8.08823 8.75392L10.0425 10.7082C10.2731 10.9388 10.3884 11.0541 10.4708 11.1886C10.5439 11.3079 10.5978 11.438 10.6305 11.574C10.6673 11.7275 10.6673 11.8905 10.6673 12.2167V13.5997C10.6673 13.973 10.6673 14.1597 10.5947 14.3023C10.5307 14.4278 10.4288 14.5298 10.3033 14.5937C10.1607 14.6663 9.97402 14.6663 9.60065 14.6663H2.40065C2.02728 14.6663 1.8406 14.6663 1.69799 14.5937C1.57255 14.5298 1.47056 14.4278 1.40665 14.3023C1.33398 14.1597 1.33398 13.973 1.33398 13.5997V12.2167C1.33398 11.8905 1.33398 11.7275 1.37082 11.574C1.40349 11.438 1.45736 11.3079 1.53046 11.1886C1.61292 11.0541 1.72822 10.9388 1.95882 10.7082L3.91307 8.75392C4.17708 8.48991 4.30909 8.35791 4.35855 8.20569C4.40205 8.07179 4.40205 7.92756 4.35855 7.79366C4.30909 7.64145 4.17708 7.50943 3.91307 7.24543L1.95882 5.29118C1.72822 5.06058 1.61292 4.94528 1.53046 4.81072C1.45736 4.69142 1.40349 4.56137 1.37082 4.42532C1.33398 4.27187 1.33398 4.10881 1.33398 3.78269V2.39967C1.33398 2.02631 1.33398 1.83962 1.40665 1.69701C1.47056 1.57157 1.57255 1.46959 1.69799 1.40567C1.8406 1.33301 2.02728 1.33301 2.40065 1.33301Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="square"
+        strokeLinejoin="round"
+      />
+    </svg>
+  ),
+})

src/theme/index.ts

@@ -21,7 +21,7 @@ export const customBreakpoints = {
 
 export const customSizes = {
   "content-max-width": "89.25rem", // 1428px
-  "toast-width": "34.375rem", // 550px
+  "toast-width-dismissable": "34.375rem", // 550px
   "toast-width-aside": "25rem", // 400px
 }