Release 1.32 (#1250)

Merge pull request #1250 from madfish-solutions/development

package.json

@@ -1,6 +1,6 @@
 {
   "name": "temple-wallet",
-  "version": "1.31.0",
+  "version": "1.32.0",
   "private": true,
   "scripts": {
     "start-run": "cross-env TS_NODE_PROJECT=\"webpack/tsconfig.json\" webpack --watch --stats errors-warnings",

src/app/PageRouter.tsx

@@ -32,6 +32,7 @@ import * as Woozie from 'lib/woozie';
 
 import { RewardsPage } from './pages/Rewards';
 import { StakingPage } from './pages/Staking';
+import { TempleTapAirdropPage } from './pages/TempleTapAirdrop';
 import { WithDataLoading } from './WithDataLoading';
 
 interface RouteContext {
@@ -100,6 +101,7 @@ const ROUTE_MAP = Woozie.createMap<RouteContext>([
   ['/notifications', onlyReady(() => <Notifications />)],
   ['/notifications/:id', onlyReady(({ id }) => <NotificationsItem id={Number(id) ?? 0} />)],
   ['/rewards', onlyReady(() => <RewardsPage />)],
+  ['/temple-tap-airdrop', onlyReady(onlyInFullPage(() => <TempleTapAirdropPage />))],
   ['*', () => <Woozie.Redirect to="/" />]
 ]);
 

src/app/hooks/use-swap.ts

@@ -16,14 +16,16 @@ export const useSwap = () => {
       fromRoute3Token: Route3Token,
       toRoute3Token: Route3Token,
       inputAmountAtomic: BigNumber,
-      minimumReceivedAtomic: BigNumber,
+      expectedReceivedAtomic: BigNumber,
+      slippageRatio: number,
       hops: Route3SwapHops | Route3LiquidityBakingHops
     ) =>
       getSwapTransferParams(
         fromRoute3Token,
         toRoute3Token,
         inputAmountAtomic,
-        minimumReceivedAtomic,
+        expectedReceivedAtomic,
+        slippageRatio,
         hops,
         tezos,
         publicKeyHash

src/app/layouts/PageLayout.tsx

@@ -22,6 +22,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 { AirdropButton } from 'app/templates/temple-tap/AirdropButton';
 import { IS_MISES_BROWSER } from 'lib/env';
 import { T } from 'lib/i18n';
 import { NotificationsBell } from 'lib/notifications/components/bell';
@@ -111,21 +112,32 @@ export const SpinnerSection: FC = () => (
   </div>
 );
 
-type ToolbarProps = {
+interface ToolbarProps {
   pageTitle?: ReactNode;
   hasBackAction?: boolean;
   step?: number;
   setStep?: (step: number) => void;
   skip?: boolean;
-  attention?: boolean;
-};
+  withBell?: boolean;
+  withAd?: boolean;
+  withAirdrop?: boolean;
+}
 
 export let ToolbarElement: HTMLDivElement | null = null;
 
 /** Defined for reference in code to highlight relation between multiple sticky elements & their sizes */
 export const TOOLBAR_IS_STICKY = true;
 
-const Toolbar: FC<ToolbarProps> = ({ pageTitle, hasBackAction = true, step, setStep, skip, attention }) => {
+const Toolbar: FC<ToolbarProps> = ({
+  pageTitle,
+  hasBackAction = true,
+  step,
+  setStep,
+  skip,
+  withBell,
+  withAd,
+  withAirdrop
+}) => {
   const { historyPosition, pathname } = useLocation();
   const { fullPage } = useAppEnv();
   const { setOnboardingCompleted } = useOnboardingProgress();
@@ -223,10 +235,11 @@ const Toolbar: FC<ToolbarProps> = ({ pageTitle, hasBackAction = true, step, setS
 
       <div className="flex-1" />
 
-      {attention && (
-        <div className="flex items-center content-end absolute right-0">
-          <AdvertisingBanner />
-          <NotificationsBell />
+      {(withAd || withAirdrop || withBell) && (
+        <div className="flex items-center gap-x-2 content-end">
+          {withAd && <AdvertisingBanner />}
+          {withAirdrop && <AirdropButton />}
+          {withBell && <NotificationsBell />}
         </div>
       )}
 

src/app/layouts/PageLayout/Header.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useMemo } from 'react';
+import React, { FC } from 'react';
 
 import classNames from 'clsx';
 
@@ -18,19 +18,22 @@ import styles from './Header.module.css';
 import { HeaderSelectors } from './Header.selectors';
 
 const Header: FC = () => {
-  const { fullPage } = useAppEnv();
+  const appEnv = useAppEnv();
   const { ready } = useTempleClient();
 
-  const logoStyles = useMemo(() => ({ height: fullPage ? 64 : 52, marginTop: 0, marginBottom: 0 }), [fullPage]);
-
   return (
-    <header className={classNames('bg-primary-orange', styles['inner-shadow'], fullPage && 'pb-20 -mb-20')}>
-      <ContentContainer className="pt-4 pb-3">
-        <div className={classNames('flex justify-between items-center', fullPage && 'px-4')}>
-          <Link to="/" className="flex-shrink-0 pr-4" testID={HeaderSelectors.templeLogoIcon}>
-            <Logo hasTitle={fullPage} white style={logoStyles} />
-          </Link>
-          <div className="flex items-stretch">{ready && <Control />}</div>
+    <header className={classNames('bg-primary-orange', styles['inner-shadow'], appEnv.fullPage && 'pb-20 -mb-20')}>
+      <ContentContainer className="py-4">
+        <div className={classNames(appEnv.fullPage && 'px-4')}>
+          <div className="flex items-stretch">
+            <Link to="/" className="flex-shrink-0 pr-4" testID={HeaderSelectors.templeLogoIcon}>
+              <div className="flex items-center">
+                <Logo hasTitle={appEnv.fullPage} fill="#FFFFFF" />
+              </div>
+            </Link>
+
+            {ready && <Control />}
+          </div>
         </div>
       </ContentContainer>
     </header>

src/app/layouts/SimplePageLayout.tsx

@@ -6,50 +6,43 @@ import DocBg from 'app/a11y/DocBg';
 import Logo from 'app/atoms/Logo';
 import { useAppEnv } from 'app/env';
 import ContentContainer from 'app/layouts/ContentContainer';
-import ChristmasBgPopupImg from 'app/misc/christmas-popup-bg.png';
-
-const logoStyles = { height: 64, marginTop: 0, marginBottom: 0 };
 
 interface SimplePageLayoutProps extends PropsWithChildren {
   title: ReactNode;
 }
 
 const SimplePageLayout: FC<SimplePageLayoutProps> = ({ title, children }) => {
-  const { popup } = useAppEnv();
+  const appEnv = useAppEnv();
 
   return (
     <>
-      {popup && <DocBg bgClassName="bg-primary-white" />}
-
-      <ContentContainer
-        className={classNames('min-h-screen flex flex-col', popup && 'bg-gray-100 bg-no-repeat bg-contain')}
-        style={popup ? { backgroundImage: `url(${ChristmasBgPopupImg})` } : undefined}
-      >
-        <div className="mt-12 mb-10 flex flex-col items-center justify-center">
-          <div className={classNames('flex items-center', popup && 'bg-gray-100')}>
-            <Logo hasTitle style={logoStyles} />
+      {!appEnv.fullPage && <DocBg bgClassName="bg-primary-white" />}
+
+      <ContentContainer className={classNames('min-h-screen', 'flex flex-col', !appEnv.fullPage && 'bg-primary-white')}>
+        <div className={classNames('mt-12 mb-10', 'flex flex-col items-center justify-center')}>
+          <div className="flex items-center">
+            <Logo hasTitle />
           </div>
 
-          <div
-            className={classNames(
-              'pt-2 text-center text-2xl font-normal leading-tight text-gray-700',
-              popup && 'bg-gray-100'
-            )}
-          >
+          <div className={classNames('mt-4', 'text-center', 'text-2xl font-light leading-tight', 'text-gray-700')}>
             {title}
           </div>
         </div>
 
         <div
           className={classNames(
-            popup ? '-mx-4 border-t border-gray-300' : 'w-full mx-auto max-w-md rounded-md',
-            'px-4 bg-white shadow-md'
+            appEnv.fullPage
+              ? classNames('w-full mx-auto max-w-md', 'rounded-md')
+              : classNames('-mx-4', 'border-t border-gray-200'),
+            'px-4',
+            'bg-white',
+            'shadow-md'
           )}
         >
           {children}
         </div>
 
-        <div className={classNames('flex-1', popup && '-mx-4 px-4 bg-white')} />
+        <div className={classNames('flex-1', !appEnv.fullPage && '-mx-4 px-4 bg-white')} />
       </ContentContainer>
     </>
   );