Merge branch 'development-2' into TW-1343-epic-evm-arch-prep

package.json

@@ -235,6 +235,6 @@
     "follow-redirects": "^1.15.4"
   },
   "optionalDependencies": {
-    "@temple-wallet/extension-ads": "^6.1.0"
+    "@temple-wallet/extension-ads": "^6.3.2"
   }
 }

src/app/atoms/FormSubmitButton.tsx

@@ -31,16 +31,12 @@ export const FormSubmitButton: FC<FormSubmitButtonProps> = ({
   const classNameMemo = useMemo(
     () =>
       clsx(
-        'relative flex items-center justify-center gap-x-2',
-        'text-primary-orange-lighter font-semibold border-2',
-        'transition duration-200 ease-in-out',
+        'relative gap-x-2',
+        'text-primary-orange-lighter border-2',
+        buildFormSubmitButtonCommonClassName(disabled, loading),
         rounder ? 'rounded-md' : 'rounded',
         small ? 'px-6 text-sm' : 'px-8 text-base leading-5',
         !unsetHeight && (slim ? 'h-9 py-1.5' : 'h-12 py-2'),
-        disabled ? 'bg-gray-400 border-gray-400' : 'bg-primary-orange border-primary-orange',
-        loading || disabled
-          ? 'opacity-75 pointer-events-none'
-          : 'opacity-90 hover:opacity-100 focus:opacity-100 shadow-sm hover:shadow focus:shadow',
         className
       ),
     [disabled, loading, className, small, slim, unsetHeight, rounder]
@@ -56,3 +52,13 @@ export const FormSubmitButton: FC<FormSubmitButtonProps> = ({
     </Button>
   );
 };
+
+export const buildFormSubmitButtonCommonClassName = (disabled?: boolean, loading?: boolean) =>
+  clsx(
+    'flex items-center justify-center font-semibold',
+    'transition duration-200 ease-in-out',
+    disabled ? 'bg-gray-400 border-gray-400' : 'bg-primary-orange border-primary-orange',
+    loading || disabled
+      ? 'opacity-75 pointer-events-none'
+      : 'opacity-90 hover:opacity-100 focus:opacity-100 shadow-sm hover:shadow focus:shadow'
+  );

src/app/layouts/PageLayout/NewsletterOverlay/NewsletterOverlay.tsx

@@ -5,10 +5,8 @@ import { useForm } from 'react-hook-form';
 import { useDispatch } from 'react-redux';
 import { object, string } from 'yup';
 
-import { Button } from 'app/atoms';
 import Spinner from 'app/atoms/Spinner/Spinner';
 import { useAppEnv } from 'app/env';
-import { ReactComponent as CloseIcon } from 'app/icons/close.svg';
 import { LAYOUT_CONTAINER_CLASSNAME } from 'app/layouts/containers';
 import { useOnboardingProgress } from 'app/pages/Onboarding/hooks/useOnboardingProgress.hook';
 import { shouldShowNewsletterModalAction } from 'app/store/newsletter/newsletter-actions';
@@ -17,8 +15,11 @@ import { useOnRampPossibilitySelector } from 'app/store/settings/selectors';
 import { setTestID } from 'lib/analytics';
 import { newsletterApi } from 'lib/apis/newsletter';
 import { useYupValidationResolver } from 'lib/form/use-yup-validation-resolver';
-import { T, t } from 'lib/i18n/react';
+import { t } from 'lib/i18n/react';
 import { useLocation } from 'lib/woozie';
+import { HOME_PAGE_PATH } from 'lib/woozie/config';
+
+import { OverlayCloseButton } from '../OverlayCloseButton';
 
 import NewsletterImage from './NewsletterImage.png';
 import { NewsletterOverlaySelectors } from './NewsletterOverlay.selectors';
@@ -31,8 +32,6 @@ const validationSchema = object().shape({
   email: string().required('Required field').email('Must be a valid email')
 });
 
-const HOME_PAGE_PATH = '/';
-
 export const NewsletterOverlay: FC = () => {
   const dispatch = useDispatch();
   const { popup } = useAppEnv();
@@ -58,7 +57,7 @@ export const NewsletterOverlay: FC = () => {
     () => (popup ? 'inset-0 p-4' : 'top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2'),
     [popup]
   );
-  const closeButtonClassName = useMemo(() => (popup ? 'top-8 right-8' : 'top-4 right-4'), [popup]);
+
   const close = () => void dispatch(shouldShowNewsletterModalAction(false));
 
   const onSubmit = () => {
@@ -106,30 +105,20 @@ export const NewsletterOverlay: FC = () => {
             )}
             style={{ height: popup ? '100%' : '700px' }}
           >
-            <Button
-              className={classNames(
-                'absolute w-24 h-9 uppercase bg-blue-500',
-                'font-inter text-white',
-                'text-sm font-medium rounded',
-                'flex flex-row justify-center items-center self-end',
-                'hover:opacity-90',
-                closeButtonClassName
-              )}
-              onClick={close}
-              testID={NewsletterOverlaySelectors.closeButton}
-            >
-              <T id="close" />
-              <CloseIcon className="ml-2 h-4 w-auto stroke-current stroke-2" />
-            </Button>
+            <OverlayCloseButton testID={NewsletterOverlaySelectors.closeButton} onClick={close} />
+
             <img
               src={NewsletterImage}
               style={{ maxHeight: '375px', maxWidth: '496px' }}
               className="mb-4"
               alt="Newsletter"
             />
+
             <div className="flex flex-col w-full max-w-sm mx-auto">
               <h1 className="mb-1 font-inter text-base text-gray-910 text-left">{t('subscribeToNewsletter')}</h1>
+
               <span className="mb-1 text-xs text-left text-gray-600">{t('keepLatestNews')}</span>
+
               <div className="w-full mb-4">
                 <input
                   ref={register()}
@@ -140,6 +129,7 @@ export const NewsletterOverlay: FC = () => {
                 />
                 {!isValid && <div className="mt-1 text-xs text-left text-red-700">{errors.email?.message}</div>}
               </div>
+
               <button
                 disabled={!isValid}
                 type="submit"

src/app/layouts/PageLayout/OnRampOverlay/OnRampOverlay.tsx

@@ -2,10 +2,9 @@ import React, { FC, useMemo } from 'react';
 
 import classNames from 'clsx';
 
-import { Anchor, Button } from 'app/atoms';
+import { Anchor } from 'app/atoms';
 import { useAppEnv } from 'app/env';
 import { ReactComponent as ArrowRightIcon } from 'app/icons/arrow-right.svg';
-import { ReactComponent as CloseIcon } from 'app/icons/close.svg';
 import { ReactComponent as SmileWithDollarIcon } from 'app/icons/smile-with-dollar.svg';
 import { ReactComponent as SmileWithGlassesIcon } from 'app/icons/smile-with-glasses.svg';
 import { ReactComponent as SmileIcon } from 'app/icons/smile.svg';
@@ -17,6 +16,8 @@ import { useOnRampPossibilitySelector } from 'app/store/settings/selectors';
 import { T } from 'lib/i18n/react';
 import { useAccountAddressForTezos } from 'temple/front';
 
+import { OverlayCloseButton } from '../OverlayCloseButton';
+
 import OnRampOverlayBgPopupImg from './assets/on-ramp-overlay-bg-popup.png';
 import OnRampOverlayBgImg from './assets/on-ramp-overlay-bg.png';
 import { OnRampOverlaySelectors } from './OnRampOverlay.selectors';
@@ -54,24 +55,12 @@ export const OnRampOverlay: FC = () => {
             backgroundImage: `url(${popup ? OnRampOverlayBgPopupImg : OnRampOverlayBgImg})`
           }}
         >
-          <Button
-            className={classNames(
-              'w-24 h-9 uppercase bg-blue-500',
-              'font-inter text-white',
-              'text-sm font-medium rounded',
-              'flex flex-row justify-center items-center self-end',
-              'hover:opacity-90 relative'
-            )}
-            style={{ top: '-0.75rem', right: '-0.75rem' }}
-            onClick={close}
-            testID={OnRampOverlaySelectors.closeButton}
-          >
-            <T id="close" />
-            <CloseIcon className="ml-2 h-4 w-auto stroke-current stroke-2" />
-          </Button>
+          <OverlayCloseButton testID={OnRampOverlaySelectors.closeButton} onClick={close} />
+
           <h1 className="font-inter font-normal text-gray-910 mt-25" style={{ fontSize: '1.438rem' }}>
             <T id="jumpInTezos" />
           </h1>
+
           <p
             className={classNames('font-inter font-normal text-gray-700 mt-4', !popup && 'px-10')}
             style={{ fontSize: '1.063rem' }}
@@ -85,6 +74,7 @@ export const OnRampOverlay: FC = () => {
               ]}
             />
           </p>
+
           <div className={classNames('flex flex-row justify-between mt-8', !popup && 'px-14')}>
             <OnRampSmileButton
               href={getWertLink(publicKeyHash, 50)}
@@ -110,6 +100,7 @@ export const OnRampOverlay: FC = () => {
               testID={OnRampOverlaySelectors.twoHundredDollarButton}
             />
           </div>
+
           <Anchor
             href={getWertLink(publicKeyHash)}
             className={classNames(
@@ -126,6 +117,7 @@ export const OnRampOverlay: FC = () => {
             <T id="customAmount" />
             <ArrowRightIcon className="ml-2 h-3 w-auto stroke-current stroke-2" />
           </Anchor>
+
           <p
             className={classNames(
               'font-inter font-normal mt-auto px-5 text-xs text-gray-600',

src/app/layouts/PageLayout/OverlayCloseButton.tsx

@@ -0,0 +1,21 @@
+import React, { memo } from 'react';
+
+import { Button } from 'app/atoms';
+import { ReactComponent as ExIcon } from 'app/icons/x.svg';
+import { TestIDProps } from 'lib/analytics';
+
+interface Props extends TestIDProps {
+  onClick: EmptyFn;
+}
+
+export const OverlayCloseButton = memo<Props>(({ testID, testIDProperties, onClick }) => (
+  <Button
+    type="button"
+    className="absolute z-1 top-3 right-3 p-2 flex items-center bg-gray-200 hover:bg-gray-300 rounded hover:opacity-90"
+    onClick={onClick}
+    testID={testID}
+    testIDProperties={testIDProperties}
+  >
+    <ExIcon className="h-4 w-4 text-gray-600 stroke-current" />
+  </Button>
+));