fix: Hide fee in pay now if can relay

safe-global · Feb 9, 2024 · 1333b55 · 1333b55
1 parent 99cb71d
commit 1333b55
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 4 deletions.
diff --git a/src/components/new-safe/create/steps/ReviewStep/index.tsx b/src/components/new-safe/create/steps/ReviewStep/index.tsx
@@ -246,7 +246,7 @@ const ReviewStep = ({ data, onSubmit, onBack, setStep }: StepRenderProps<NewSafe
         <>
           <Divider />
           <Box className={layoutCss.row}>
-            <PayNowPayLater totalFee={totalFee} payMethod={payMethod} setPayMethod={setPayMethod} />
+            <PayNowPayLater totalFee={totalFee} canRelay={canRelay} payMethod={payMethod} setPayMethod={setPayMethod} />
           </Box>
         </>
       )}

diff --git a/src/features/counterfactual/PayNowPayLater.tsx b/src/features/counterfactual/PayNowPayLater.tsx
@@ -22,10 +22,12 @@ export const enum PayMethod {
 
 const PayNowPayLater = ({
   totalFee,
+  canRelay,
   payMethod,
   setPayMethod,
 }: {
   totalFee: string
+  canRelay: boolean
   payMethod: PayMethod
   setPayMethod: Dispatch<SetStateAction<PayMethod>>
 }) => {
@@ -67,8 +69,14 @@ const PayNowPayLater = ({
             label={
               <>
                 <Typography className={css.radioTitle}>Pay now</Typography>
-                <Typography variant="body2" color="text.secondary">
-                  &asymp; {totalFee} {chain?.nativeCurrency.symbol}
+                <Typography className={css.radioSubtitle} variant="body2" color="text.secondary">
+                  {canRelay ? (
+                    'Sponsored free transaction'
+                  ) : (
+                    <>
+                      &asymp; {totalFee} {chain?.nativeCurrency.symbol}
+                    </>
+                  )}
                 </Typography>
               </>
             }
@@ -83,7 +91,7 @@ const PayNowPayLater = ({
             label={
               <>
                 <Typography className={css.radioTitle}>Pay later</Typography>
-                <Typography variant="body2" color="text.secondary">
+                <Typography className={css.radioSubtitle} variant="body2" color="text.secondary">
                   with the first transaction
                 </Typography>
               </>

diff --git a/src/features/counterfactual/styles.module.css b/src/features/counterfactual/styles.module.css
@@ -21,6 +21,10 @@
   font-weight: bold;
 }
 
+.active .radioSubtitle {
+  color: var(--color-text-primary);
+}
+
 @media (max-width: 400px) {
   .radioGroup {
     flex-direction: column;