TW-1614: Temple Tap Airdrop. Layout

src/app/PageRouter.tsx

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

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 { 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,15 +112,16 @@ export const SpinnerSection: FC = () => (
   </div>
 );
 
-type ToolbarProps = {
+interface ToolbarProps {
   pageTitle?: ReactNode;
   hasBackAction?: boolean;
   step?: number;
   setStep?: (step: number) => void;
   adShow?: boolean;
   skip?: boolean;
   attention?: boolean;
-};
+  withBell?: boolean;
+}
 
 export let ToolbarElement: HTMLDivElement | null = null;
 
@@ -133,7 +135,8 @@ const Toolbar: FC<ToolbarProps> = ({
   setStep,
   adShow = false,
   skip,
-  attention
+  attention,
+  withBell
 }) => {
   const { historyPosition, pathname } = useLocation();
   const { fullPage } = useAppEnv();
@@ -232,9 +235,10 @@ const Toolbar: FC<ToolbarProps> = ({
 
       <div className="flex-1" />
 
-      {attention && (
-        <div className="flex items-center content-end absolute right-0">
-          <AdvertisingBanner />
+      {(attention || withBell) && (
+        <div className="flex items-center gap-x-2 content-end">
+          {attention && <AdvertisingBanner />}
+          {attention && <AirdropButton />}
           <NotificationsBell />
         </div>
       )}

src/app/pages/Home/Home.tsx

@@ -61,6 +61,7 @@ const Home = memo<Props>(({ assetSlug }) => {
         ) : null
       }
       attention={true}
+      withBell={true}
       adShow
     >
       {fullPage && (

src/app/pages/TempleTapAirdrop/index.tsx

@@ -0,0 +1,98 @@
+import React, { FC, memo, PropsWithChildren, useMemo } from 'react';
+
+import { Alert, Anchor } from 'app/atoms';
+import { ReactComponent as TelegramSvg } from 'app/icons/social-tg.svg';
+import { ReactComponent as XSocialSvg } from 'app/icons/social-x.svg';
+import PageLayout from 'app/layouts/PageLayout';
+import { useAccount } from 'lib/temple/front';
+import { TempleAccountType } from 'lib/temple/types';
+
+import BannerImgSrc from './banner.png';
+
+export const TempleTapAirdropPage = memo(() => {
+  const account = useAccount();
+
+  const canSign = useMemo(
+    () => [TempleAccountType.HD, TempleAccountType.Imported, TempleAccountType.Ledger].includes(account.type),
+    [account.type]
+  );
+
+  return (
+    <PageLayout pageTitle="Temple Tap Airdrop" withBell>
+      <div className="flex flex-col w-full max-w-sm mx-auto pb-6">
+        <img src={BannerImgSrc} alt="Banner" className="self-center h-28" />
+
+        <span className="mt-6 text-dark font-semibold" style={{ fontSize: 19 }}>
+          Airdrop criteria
+        </span>
+
+        <p className="mt-2 text-dark-gray text-sm">
+          All users who played Temple Tap are eligible to share the prize pool and receive a TKEY airdrop directly to
+          Tezos address.
+        </p>
+
+        <span className="mt-8 text-dark-gray text-base leading-tighter font-medium">How to receive TKEY?</span>
+
+        {canSign ? (
+          <BlockComp
+            title="Confirm address"
+            description="Enter your telegram @username to confirm your Tezos address in Temple Tap bot for future airdrop distribution"
+          >
+            <div className="text-xs leading-5 text-dark-gray">
+              <span>Your address: </span>
+              <span>{account.publicKeyHash}</span>
+            </div>
+          </BlockComp>
+        ) : (
+          <Alert description="Please, use a signer account first." className="mt-4" />
+        )}
+
+        <BlockComp
+          title="Stay tuned for news"
+          description="Follow us on social media to be the first to hear about airdrop updates!"
+        >
+          <div className="h-1" />
+
+          <SocialItem title="Temple Wallet on X" IconComp={XSocialSvg} followUrl="https://x.com/TempleWallet" />
+
+          <SocialItem title="MadFish Community" IconComp={TelegramSvg} followUrl="https://t.me/MadFishCommunity" />
+        </BlockComp>
+      </div>
+    </PageLayout>
+  );
+});
+
+interface BlockCompProps {
+  title: string;
+  description: string;
+}
+
+const BlockComp: FC<PropsWithChildren<BlockCompProps>> = ({ title, description, children }) => (
+  <div className="mt-4 flex flex-col p-4 bg-gray-100 rounded-xl">
+    <span className="text-sm font-semibold text-dark">{title}</span>
+
+    <p className="my-1 text-xs leading-5 text-gray-600">{description}</p>
+
+    {children}
+  </div>
+);
+
+interface SocialItemProps {
+  title: string;
+  IconComp: ImportedSVGComponent;
+  followUrl: string;
+}
+
+const SocialItem: FC<SocialItemProps> = ({ title, IconComp, followUrl }) => (
+  <div className="mt-2 flex items-center gap-x-3 py-3 px-4 bg-white rounded-xl">
+    <div className="w-10 h-10 p-3 bg-blue-150 rounded-full">
+      <IconComp className="w-4 h-4 stroke-current fill-current text-dark" />
+    </div>
+
+    <span className="flex-grow text-sm font-semibold text-dark">{title}</span>
+
+    <Anchor href={followUrl} className="p-2 text-sm leading-none font-semibold text-white bg-blue-550 rounded-lg">
+      Follow
+    </Anchor>
+  </div>
+);

src/app/templates/advertising/advertising-banner/advertising-banner.tsx

@@ -14,7 +14,7 @@ export const AdvertisingBanner: FC = () => {
 
   return (
     <Anchor
-      className="flex items-center justify-center mr-3"
+      className="flex items-center justify-center"
       style={{
         height: 28,
         paddingLeft: popup ? 4 : 8,

src/app/templates/temple-tap/AirdropButton.tsx

@@ -0,0 +1,21 @@
+import React, { memo } from 'react';
+
+import clsx from 'clsx';
+
+import { useAppEnv } from 'app/env';
+import { Link } from 'lib/woozie';
+
+export const AirdropButton = memo(() => {
+  const { popup } = useAppEnv();
+
+  return (
+    <Link to="/temple-tap-airdrop" className={clsx('h-7', popup && '-mr-2')}>
+      <img
+        src={`/misc/${popup ? 'airdrop-popup-btn.png' : 'airdrop-btn.png'}`}
+        alt="Temple Tap Airdrop"
+        className="pointer-events-none"
+        style={{ height: 35 }}
+      />
+    </Link>
+  );
+});

src/lib/notifications/components/bell.tsx

@@ -13,7 +13,7 @@ export const NotificationsBell = () => {
   return (
     <Link
       to="/notifications"
-      className="flex items-center justify-center mr-3"
+      className="flex items-center justify-center"
       style={{
         position: 'relative',
         height: 28,

tailwind.config.js

@@ -109,6 +109,7 @@ module.exports = {
           300: '#90cdf4',
           400: '#63b3ed',
           500: '#4299e1',
+          550: '#4299E1',
           600: '#3182ce',
           650: '#007AFF',
           700: '#2b6cb0',
@@ -163,7 +164,10 @@ module.exports = {
         'primary-orange-light': baseColors.orange[300],
         'primary-orange-dark': baseColors.orange[700],
         'primary-orange-lighter': baseColors.orange[100],
-        'primary-orange-darker': baseColors.orange[900]
+        'primary-orange-darker': baseColors.orange[900],
+        //
+        'dark': '#1B262C',
+        'dark-gray': '#4A5568'
       };
 
       return {
@@ -575,7 +579,10 @@ module.exports = {
         '2xs': '0.8125rem',
         ulg: '1.0625rem',
         '2xl-plus': '1.75rem',
-        '4xl-plus': '2.5rem'
+        '4xl-plus': '2.5rem',
+      },
+      lineHeight: {
+        tighter: 1.2
       },
       spacing: {
         '0.5px': '0.5px',