From 5fd5988b3581fbdf1c1e3483b1345626f1594227 Mon Sep 17 00:00:00 2001
From: Justin Chen <justin@setprotocol.com>
Date: Sun, 12 Nov 2023 02:07:39 +0300
Subject: [PATCH] Fix up more styling

---
 client/src/components/Swap/OnRamp.tsx  | 17 ---------------
 client/src/components/modals/Modal.tsx | 30 ++++++++++++++++++++++++--
 2 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/client/src/components/Swap/OnRamp.tsx b/client/src/components/Swap/OnRamp.tsx
index 10b53b829..089f4a6b3 100644
--- a/client/src/components/Swap/OnRamp.tsx
+++ b/client/src/components/Swap/OnRamp.tsx
@@ -9,8 +9,6 @@ import {
   usePrepareContractWrite,
   useWaitForTransaction
 } from 'wagmi'
-import { useWindowSize } from "@uidotdev/usehooks";
-import Confetti from 'react-confetti';
 
 import { RowBetween } from '../layouts/Row'
 import { ThemedText } from '../../theme/text'
@@ -46,7 +44,6 @@ export const OnRamp: React.FC<OnRampProps> = ({
   } = useSmartContracts();
   const { refetchIntentHash } = useOnRamperIntents();
   const { refetchUsdcBalance } = useBalances();
-  const size = useWindowSize();
 
   /*
    * State
@@ -54,7 +51,6 @@ export const OnRamp: React.FC<OnRampProps> = ({
 
   const [shouldConfigureRampWrite, setShouldConfigureRampWrite] = useState<boolean>(false);
   const [shouldFetchVerifyProof, setShouldFetchVerifyProof] = useState<boolean>(false);
-  const [showConfetti, setShowConfetti] = useState<boolean>(false);
   const [tx, setTx] = useState<string | null>(null);
 
   // ----- transaction state -----
@@ -123,11 +119,6 @@ export const OnRamp: React.FC<OnRampProps> = ({
 
       refetchUsdcBalance?.();
       refetchIntentHash?.();
-
-      setShowConfetti(true);
-      setTimeout(() => {
-        setShowConfetti(false);
-      }, 5000);
     },
   });
 
@@ -177,14 +168,6 @@ export const OnRamp: React.FC<OnRampProps> = ({
   return (
     <Container>
       <TitleContainer>
-        {showConfetti ? (
-          <Confetti
-            recycle={false}
-            numberOfPieces={500}
-            width={size.width ?? undefined}
-            height={document.documentElement.scrollHeight}
-          />
-        ) : null}
         <RowBetween style={{ paddingBottom: '1.5rem' }}>
           <div style={{ flex: 0.5 }}>
             <button
diff --git a/client/src/components/modals/Modal.tsx b/client/src/components/modals/Modal.tsx
index 965b7aed2..eec100b7c 100644
--- a/client/src/components/modals/Modal.tsx
+++ b/client/src/components/modals/Modal.tsx
@@ -1,8 +1,9 @@
 import React, { useEffect, useMemo, useState } from "react";
 import styled from 'styled-components';
 import { ArrowLeft } from 'react-feather';
-import { useNavigate } from 'react-router-dom';
 import { CircuitType } from '@zkp2p/circuits-circom/scripts/generate_input';
+import Confetti from 'react-confetti';
+import { useWindowSize } from '@uidotdev/usehooks';
 
 import { ThemedText } from '../../theme/text'
 import { LabeledSwitch } from "../common/LabeledSwitch";
@@ -53,6 +54,7 @@ export const Modal: React.FC<ModalProps> = ({
    */
 
   const { isProvingTypeFast } = useProofGenSettings();
+  const size = useWindowSize();
 
   /*
    * State
@@ -61,6 +63,7 @@ export const Modal: React.FC<ModalProps> = ({
   const [shouldShowProofAndSignals, setShouldShowProofAndSignals] = useState<boolean>(false);
 
   const [ctaButtonTitle, setCtaButtonTitle] = useState<string>("");
+  const [showConfetti, setShowConfetti] = useState<boolean>(true);
 
   /*
    * Handlers
@@ -241,10 +244,29 @@ export const Modal: React.FC<ModalProps> = ({
     return verificationStepRows;
   };
 
+  useEffect(() => {
+    if (transactionAddress?.length) {
+      setShowConfetti(true);
+      setTimeout(() => {
+        setShowConfetti(false);
+      }, 5000);
+    }
+  }, [transactionAddress])
+
   return (
     <ModalAndOverlayContainer>
       <Overlay onClick={handleOverlayClick}/>
 
+      {showConfetti ? (
+        <ConfettiContainer>
+          <Confetti
+            recycle={false}
+            numberOfPieces={500}
+            width={size.width ?? undefined}
+            height={document.documentElement.scrollHeight}
+          />
+        </ConfettiContainer>
+        ) : null}
       <ModalContainer>
         <TitleCenteredRow>
           <button
@@ -300,7 +322,7 @@ export const Modal: React.FC<ModalProps> = ({
 
         {transactionAddress?.length ? (
           <Link
-            href={`https://goerli.etherscan.io/address/${transactionAddress}`}
+            href={`https://goerli.etherscan.io/tx/${transactionAddress}`}
             target="_blank"
             rel="noopener noreferrer">
               <ThemedText.LabelSmall textAlign="left">
@@ -367,3 +389,7 @@ const Link = styled.a`
     text-decoration: underline;
   }
 `;
+
+const ConfettiContainer = styled.div`
+  z-index: 20;
+`;