From 06dd12932c20ab782ad62ae05fe48084fbd31cd6 Mon Sep 17 00:00:00 2001
From: Or Antonio Orsatti <109456266+ororsatti@users.noreply.github.com>
Date: Wed, 13 Nov 2024 03:17:18 +0200
Subject: [PATCH] Display frogcrypto btn always (#2169)

#### refrence

<img width="444" alt="Screenshot 2024-11-13 at 7 58 31"
src="https://github.com/user-attachments/assets/d66ba36b-6cbd-4fa2-b469-d913630b501a">

#### with pods:
<img width="466" alt="Screenshot 2024-11-13 at 7 59 07"
src="https://github.com/user-attachments/assets/9a56942c-b950-496a-b270-2df530547484">

#### no pods:
<img width="446" alt="Screenshot 2024-11-13 at 7 59 37"
src="https://github.com/user-attachments/assets/6f4b08ed-600e-4023-b7a8-3325d181704f">
---
 .../screens/ZappScreens/ZappButton.tsx        |  2 +-
 .../screens/Home/NoUpcomingTicketsState.tsx   | 48 +++++++++++++++++--
 2 files changed, 46 insertions(+), 4 deletions(-)

diff --git a/apps/passport-client/components/screens/ZappScreens/ZappButton.tsx b/apps/passport-client/components/screens/ZappScreens/ZappButton.tsx
index 7ea2af6c6a..a2f54e3338 100644
--- a/apps/passport-client/components/screens/ZappScreens/ZappButton.tsx
+++ b/apps/passport-client/components/screens/ZappScreens/ZappButton.tsx
@@ -1,5 +1,5 @@
 import styled from "styled-components";
-export const ZAPP_BUTTON_HEIGHT = 80;
+export const ZAPP_BUTTON_HEIGHT = 60;
 export const ZappButton = styled.div`
   display: flex;
   width: 100%;
diff --git a/apps/passport-client/new-components/screens/Home/NoUpcomingTicketsState.tsx b/apps/passport-client/new-components/screens/Home/NoUpcomingTicketsState.tsx
index fdcc11f58c..47878e09e6 100644
--- a/apps/passport-client/new-components/screens/Home/NoUpcomingTicketsState.tsx
+++ b/apps/passport-client/new-components/screens/Home/NoUpcomingTicketsState.tsx
@@ -9,19 +9,23 @@ import {
 } from "react";
 import { useSearchParams } from "react-router-dom";
 import styled from "styled-components";
-import { useDispatch, usePCDCollection } from "../../../src/appHooks";
+import { useDispatch, usePCDCollection, useSelf } from "../../../src/appHooks";
 import { BANNER_HEIGHT, MAX_WIDTH_SCREEN } from "../../../src/sharedConstants";
 import { nextFrame } from "../../../src/util";
 import { PodsCollectionList } from "../../shared/Modals/PodsCollectionBottomModal";
 import { Typography } from "../../shared/Typography";
 import { hideScrollCSS, replaceDotWithSlash } from "../../shared/utils";
 import { ScrollIndicator } from "./ScrollIndicator";
+import { ZappButtonsContainer } from "../../../components/screens/ZappScreens/ZappButtonsContainer";
+import { ZappButton } from "../../../components/screens/ZappScreens/ZappButton";
+import { appConfig } from "../../../src/appConfig";
+import { ZappFullScreen } from "../../../components/screens/ZappScreens/ZappFullScreen";
 
 const EMPTY_CARD_CONTAINER_HEIGHT = 220;
 const EmptyCardContainer = styled.div<{ longVersion: boolean }>`
   display: flex;
   height: ${({ longVersion }): string =>
-    longVersion ? "min(80vh, 549px)" : EMPTY_CARD_CONTAINER_HEIGHT + "px"};
+    longVersion ? "min(70vh, 499px)" : EMPTY_CARD_CONTAINER_HEIGHT + "px"};
   justify-content: center;
   align-items: center;
   border-radius: 16px;
@@ -97,8 +101,10 @@ export const NoUpcomingEventsState = ({
   const [expandedGroupsIds, setExpandedGroupsIds] = useState<
     Record<string, boolean>
   >({});
-  const [params] = useSearchParams();
+  const [params, setParams] = useSearchParams();
   const listContainerRef = useRef<HTMLDivElement>(null);
+  const [zappUrl, setZappUrl] = useState("");
+  const self = useSelf();
 
   // New function to check scrollability
   const checkScrollability = (): void => {
@@ -149,6 +155,18 @@ export const NoUpcomingEventsState = ({
     checkScrollability();
   }, [noPods, params, setExpandedGroupsIds]);
 
+  if (zappUrl) {
+    return (
+      <ZappFullScreen
+        url={zappUrl}
+        onReturn={() => {
+          setZappUrl("");
+          params.delete("folder");
+          setParams(params);
+        }}
+      />
+    );
+  }
   return (
     <OuterContainer>
       <EmptyCardContainer longVersion={noPods}>
@@ -189,6 +207,30 @@ export const NoUpcomingEventsState = ({
           </div>
         </InnerContainer>
       </EmptyCardContainer>
+      {Object.keys(appConfig.embeddedZapps).length > 0 && (
+        <ZappButtonsContainer>
+          {Object.entries(appConfig.embeddedZapps).map(([zappName, url]) => (
+            <ZappButton
+              key={zappName}
+              onClick={() => {
+                setZappUrl(url);
+                setParams({ folder: zappName });
+              }}
+            >
+              <iframe
+                style={{
+                  width: "100%",
+                  height: "100%"
+                }}
+                src={new URL(
+                  `button/${self?.semaphore_v4_commitment ?? ""}`,
+                  url
+                ).toString()}
+              />
+            </ZappButton>
+          ))}
+        </ZappButtonsContainer>
+      )}
       {isLandscape ||
         (!noPods && (
           <ListContainer