TW-1474: Support Mises browser (#1167)

* TW-1474: Support Mises browser. + IS_MISES_BROWSER + Minor UI fixes * TW-1474: Support Mises browser. Fix Accounts dropdown * TW-1474: Support Mises browser. -- Unnecessary scroll in overlays
madfish-solutions · alex-tsx · Aug 5, 2024 · Jul 22, 2024 · Jul 26, 2024 · Jul 29, 2024
commit b9b8dca2bf3963385bed11d3180501a0bd4fb7ac
diff --git a/src/app/atoms/AccountTypeBadge.tsx b/src/app/atoms/AccountTypeBadge.tsx
@@ -16,7 +16,7 @@ const AccountTypeBadge = memo<AccountTypeBadgeProps>(({ account, darkTheme = fal
   return title ? (
     <span
       className={clsx(
-        'rounded border px-1 py-px ml-2 leading-none font-medium',
+        'rounded border px-1 py-px leading-none font-medium',
         darkTheme ? 'border-gray-500 text-gray-500' : 'border-black text-black'
       )}
       style={{ fontSize: '0.44rem' }}

diff --git a/src/app/layouts/PageLayout.tsx b/src/app/layouts/PageLayout.tsx
@@ -23,6 +23,7 @@ import ContentContainer from 'app/layouts/ContentContainer';
 import { useOnboardingProgress } from 'app/pages/Onboarding/hooks/useOnboardingProgress.hook';
 import { AdvertisingBanner } from 'app/templates/advertising/advertising-banner/advertising-banner';
 import { AdvertisingOverlay } from 'app/templates/advertising/advertising-overlay/advertising-overlay';
+import { IS_MISES_BROWSER } from 'lib/env';
 import { T } from 'lib/i18n';
 import { NotificationsBell } from 'lib/notifications/components/bell';
 import { useTempleClient } from 'lib/temple/front';
@@ -47,7 +48,13 @@ const PageLayout: FC<PageLayoutProps> = ({ children, contentContainerStyle, ...t
 
   return (
     <>
-      <DocBg bgClassName="bg-primary-orange" />
+      {
+        /*
+          Mises browser has an issue with <html>'s height - not reaching 100% no matter what CSS,
+          unless it is expanded by content. We at least won't color it to not highlight that.
+        */
+        !IS_MISES_BROWSER && <DocBg bgClassName="bg-primary-orange" />
+      }
 
       <div className={clsx(fullPage && 'pb-20', 'relative')}>
         <Header />

diff --git a/src/app/layouts/PageLayout/Header.tsx b/src/app/layouts/PageLayout/Header.tsx
@@ -57,12 +57,7 @@ const Control: FC = () => {
         <NetworkSelect />
       </div>
 
-      <Popper
-        placement="left-start"
-        strategy="fixed"
-        style={{ pointerEvents: 'none' }}
-        popup={props => <AccountDropdown {...props} />}
-      >
+      <Popper placement="bottom-end" strategy="fixed" popup={props => <AccountDropdown {...props} />}>
         {({ ref, opened, toggleOpened }) => (
           <Button
             ref={ref}

diff --git a/src/app/layouts/PageLayout/Header/AccountDropdown/AccountItem.tsx b/src/app/layouts/PageLayout/Header/AccountDropdown/AccountItem.tsx
@@ -27,7 +27,7 @@ export const AccountItem: React.FC<AccountItemProps> = ({ account, selected, gas
   const classNameMemo = useMemo(
     () =>
       classNames(
-        'block w-full p-2 flex items-center',
+        'w-full p-2 flex items-center',
         'text-white text-shadow-black overflow-hidden',
         'transition ease-in-out duration-200',
         selected && 'shadow',
@@ -58,7 +58,7 @@ export const AccountItem: React.FC<AccountItemProps> = ({ account, selected, gas
           <HashShortView hash={publicKeyHash} />
         </div>
 
-        <div className="flex flex-wrap items-center">
+        <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
           <Balance address={publicKeyHash}>
             {bal => (
               <span className="text-xs leading-tight flex items-baseline text-gray-500">

diff --git a/src/app/layouts/PageLayout/Header/AccountDropdown/index.tsx b/src/app/layouts/PageLayout/Header/AccountDropdown/index.tsx
@@ -152,15 +152,7 @@ const AccountDropdown: FC<AccountDropdownProps> = ({ opened, setOpened }) => {
   }, [opened, searchValue]);
 
   return (
-    <DropdownWrapper
-      opened={opened}
-      design="dark"
-      className="origin-top-right p-2 w-64"
-      style={{
-        transform: 'translate(3.25rem, 3.25rem)',
-        pointerEvents: 'all'
-      }}
-    >
+    <DropdownWrapper opened={opened} design="dark" className="origin-top-right p-2 w-64">
       <div className="flex items-center mb-2">
         <h3 className="flex items-center text-sm text-white opacity-20">
           <T id="accounts" />

diff --git a/src/app/layouts/PageLayout/NewsletterOverlay/NewsletterOverlay.tsx b/src/app/layouts/PageLayout/NewsletterOverlay/NewsletterOverlay.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useMemo, useState } from 'react';
+import React, { memo, useMemo, useState } from 'react';
 
 import classNames from 'clsx';
 import { useForm } from 'react-hook-form';
@@ -32,7 +32,7 @@ const validationSchema = object().shape({
   email: string().required('Required field').email('Must be a valid email')
 });
 
-export const NewsletterOverlay: FC = () => {
+export const NewsletterOverlay = memo(() => {
   const dispatch = useDispatch();
   const { popup } = useAppEnv();
   const { pathname } = useLocation();
@@ -53,11 +53,6 @@ export const NewsletterOverlay: FC = () => {
   const [isLoading, setIsLoading] = useState(false);
   const [successSubscribing, setSuccessSubscribing] = useState(false);
 
-  const popupClassName = useMemo(
-    () => (popup ? 'inset-0 p-4' : 'top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2'),
-    [popup]
-  );
-
   const close = () => void dispatch(shouldShowNewsletterModalAction(false));
 
   const onSubmit = () => {
@@ -90,61 +85,58 @@ export const NewsletterOverlay: FC = () => {
     return null;
 
   return (
-    <>
-      <div className="fixed left-0 right-0 top-0 bottom-0 opacity-20 bg-gray-700 z-40"></div>
-      <form onSubmit={handleSubmit(onSubmit)}>
-        <ContentContainer
-          className={classNames('fixed z-40 overflow-y-scroll', popupClassName)}
-          style={{ maxWidth: '37.5rem', maxHeight: 'calc(100vh - 50px)' }}
-          padding={false}
+    <div className="fixed inset-0 z-40 flex flex-col items-center justify-center bg-gray-700 bg-opacity-20">
+      <ContentContainer
+        className={classNames('overflow-y-scroll py-4', popup ? 'h-full px-4' : 'px-5')}
+        padding={false}
+      >
+        <form
+          onSubmit={handleSubmit(onSubmit)}
+          className={classNames(
+            'relative flex flex-col justify-center text-center bg-orange-100 shadow-lg bg-no-repeat rounded-md',
+            popup ? 'p-4' : 'px-13 py-18'
+          )}
+          style={{ height: popup ? '100%' : '700px' }}
         >
-          <div
-            className={classNames(
-              'flex flex-col justify-center text-center bg-orange-100 shadow-lg bg-no-repeat rounded-md',
-              popup ? 'p-4' : 'px-13 py-18'
-            )}
-            style={{ height: popup ? '100%' : '700px' }}
-          >
-            <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()}
-                  name="email"
-                  className="w-full max-h-13 p-4 rounded-md border text-sm text-gray-910"
-                  placeholder="example@mail.com"
-                  {...setTestID(NewsletterOverlaySelectors.emailInput)}
-                />
-                {!isValid && <div className="mt-1 text-xs text-left text-red-700">{errors.email?.message}</div>}
-              </div>
-
-              <button
-                disabled={!isValid}
-                type="submit"
-                className={classNames(
-                  'w-full h-12 flex items-center justify-center font-semibold rounded-md text-base px-16 py-3 text-white',
-                  isValid ? 'bg-orange-500' : 'bg-blue-100'
-                )}
-                {...setTestID(NewsletterOverlaySelectors.subscribeButton)}
-              >
-                {buttonContent}
-              </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()}
+                name="email"
+                className="w-full max-h-13 p-4 rounded-md border text-sm text-gray-910"
+                placeholder="example@mail.com"
+                {...setTestID(NewsletterOverlaySelectors.emailInput)}
+              />
+              {!isValid && <div className="mt-1 text-xs text-left text-red-700">{errors.email?.message}</div>}
             </div>
+
+            <button
+              disabled={!isValid}
+              type="submit"
+              className={classNames(
+                'w-full h-12 flex items-center justify-center font-semibold rounded-md text-base px-16 py-3 text-white',
+                isValid ? 'bg-orange-500' : 'bg-blue-100'
+              )}
+              {...setTestID(NewsletterOverlaySelectors.subscribeButton)}
+            >
+              {buttonContent}
+            </button>
           </div>
-        </ContentContainer>
-      </form>
-    </>
+        </form>
+      </ContentContainer>
+    </div>
   );
-};
+});
diff --git a/src/app/layouts/PageLayout/OnRampOverlay/OnRampOverlay.tsx b/src/app/layouts/PageLayout/OnRampOverlay/OnRampOverlay.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useMemo } from 'react';
+import React, { memo } from 'react';
 
 import classNames from 'clsx';
 import { useDispatch } from 'react-redux';
@@ -24,32 +24,26 @@ import { OnRampOverlaySelectors } from './OnRampOverlay.selectors';
 import { OnRampSmileButton } from './OnRampSmileButton/OnRampSmileButton';
 import { getWertLink } from './utils/getWertLink.util';
 
-export const OnRampOverlay: FC = () => {
+export const OnRampOverlay = memo(() => {
   const dispatch = useDispatch();
   const { publicKeyHash } = useAccount();
   const { popup } = useAppEnv();
   const isOnRampPossibility = useOnRampPossibilitySelector();
   const { onboardingCompleted } = useOnboardingProgress();
 
-  const popupClassName = useMemo(
-    () => (popup ? 'inset-0 p-4' : 'top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2'),
-    [popup]
-  );
   const close = () => void dispatch(setOnRampPossibilityAction(false));
 
   if (!isOnRampPossibility || !onboardingCompleted) return null;
 
   return (
-    <>
-      <div className="fixed left-0 right-0 top-0 bottom-0 opacity-20 bg-gray-700 z-50"></div>
+    <div className="fixed inset-0 z-40 flex flex-col items-center justify-center bg-gray-700 bg-opacity-20">
       <ContentContainer
-        className={classNames('fixed z-50 overflow-y-auto', popupClassName)}
-        style={{ maxWidth: '37.5rem', maxHeight: popup ? undefined : 'calc(100vh - 50px)' }}
+        className={classNames('overflow-y-scroll py-4', popup ? 'h-full px-4' : 'px-5')}
         padding={false}
       >
         <div
           className={classNames(
-            'flex flex-col text-center bg-white shadow-lg bg-no-repeat rounded-md p-6',
+            'relative flex flex-col text-center bg-white shadow-lg bg-no-repeat rounded-md p-6',
             popup && 'h-full'
           )}
           style={{
@@ -129,6 +123,6 @@ export const OnRampOverlay: FC = () => {
           </p>
         </div>
       </ContentContainer>
-    </>
+    </div>
   );
-};
+});
diff --git a/src/app/pages/Welcome/Welcome.tsx b/src/app/pages/Welcome/Welcome.tsx
@@ -51,21 +51,18 @@ const Welcome: FC = () => {
   return (
     <div
       className={classNames(
-        'min-h-screen',
         'w-full max-w-screen-md mx-auto',
-        'px-4',
-        'flex flex-col items-center justify-center'
+        'min-h-screen flex flex-col items-center justify-center',
+        'px-4 pt-4 pb-36'
       )}
     >
-      <div className={classNames('-mt-32 mb-6', 'text-2xl text-gray-600 font-light')}>
+      <div className="mb-6 text-2xl text-gray-600 font-light">
         <T id="welcomeTo" />
       </div>
 
-      <div className="flex items-center mb-8">
-        <Logo hasTitle style={{ height: 70 }} />
-      </div>
+      <Logo hasTitle style={{ height: 70 }} />
 
-      <div className={classNames('w-full', 'my-4', 'flex items-stretch')}>
+      <div className={classNames('w-full mt-8 mb-4 flex items-stretch')}>
         {SIGNS.map(({ key, linkTo, filled, Icon, titleI18nKey, descriptionI18nKey, testID }) => (
           <div key={key} className={classNames('w-1/2', 'p-4')}>
             <Link
@@ -81,40 +78,30 @@ const Welcome: FC = () => {
               )}
               testID={testID}
             >
-              <div className={classNames('absolute inset-0', 'p-1')}>
+              <div className="absolute inset-0 p-1">
                 <div
                   className={classNames(
-                    'w-full h-full',
+                    'w-full h-full py-4 px-6',
                     'overflow-hidden rounded-md',
-                    'px-10 py-4',
-                    'flex flex-col',
+                    'flex flex-col justify-center',
                     filled ? 'text-white' : 'shadow-inner bg-primary-orange-lighter text-primary-orange',
                     'text-shadow-black-orange'
                   )}
                 >
-                  <div className={classNames('flex-1', 'flex flex-col items-center justify-end')}>
-                    <Icon className="transform scale-125 stroke-current" />
-                  </div>
+                  <Icon className="self-center transform scale-125 stroke-current" />
 
-                  <T id={titleI18nKey}>
-                    {message => <h1 className="pb-1 text-xl font-semibold text-center">{message}</h1>}
-                  </T>
+                  <h1 className="text-xl font-semibold text-center">
+                    <T id={titleI18nKey} />
+                  </h1>
 
-                  <div className="flex-1">
-                    <T id={descriptionI18nKey}>
-                      {message => (
-                        <p
-                          className={classNames(
-                            'my-1 text-center',
-                            'text-xs',
-                            filled ? 'text-primary-orange-lighter' : 'text-primary-orange'
-                          )}
-                        >
-                          {message}
-                        </p>
-                      )}
-                    </T>
-                  </div>
+                  <p
+                    className={classNames(
+                      'mt-2 text-center text-xs',
+                      filled ? 'text-primary-orange-lighter' : 'text-primary-orange'
+                    )}
+                  >
+                    <T id={descriptionI18nKey} />
+                  </p>
                 </div>
               </div>
             </Link>

diff --git a/src/lib/env.ts b/src/lib/env.ts
@@ -2,6 +2,10 @@ import PackageJSON from '../../package.json';
 
 export const APP_VERSION = PackageJSON.version;
 
+/** Only Mises browser among supported vendors counts as a mobile platform */
+// @ts-expect-error
+export const IS_MISES_BROWSER = navigator.userAgentData?.mobile ?? false;
+
 export const IS_DEV_ENV = process.env.NODE_ENV === 'development';
 
 const IS_DEV_GITHUB_ACTION_RUN_ENV = process.env.GITHUB_ACTION_RUN_ENV === 'development';