From e72ba3ea2beee0739e679b156b59aae7e774e3e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@daubenschuetz.de>
Date: Mon, 3 Feb 2025 15:03:05 +0100
Subject: [PATCH] Add passkeys login to iOS app

---
 src/public/news.css      |  8 ------
 src/web/src/Bell.jsx     | 54 +++++++++++++++++++++++++++++++++++++++-
 src/web/src/Passkeys.jsx |  1 -
 3 files changed, 53 insertions(+), 10 deletions(-)

diff --git a/src/public/news.css b/src/public/news.css
index 4bf05f10..679faf43 100644
--- a/src/public/news.css
+++ b/src/public/news.css
@@ -16,14 +16,6 @@
    --table-bg-mobile: rgb(255, 255, 250);
    --visited-link: #828282;
  }
-html.kiwi-ios-app .bottom-nav,
-html.kiwi-ios-app .vote-button-container,
-html.kiwi-ios-app .site-explainer {
-  display: none !important;
-}
-html.kiwi-ios-app .content-container {
-  margin-left: 11px;
-}
  .scroll-margin-base, .scroll-margin-with-image {
    scroll-margin-top: 100px;
  }
diff --git a/src/web/src/Bell.jsx b/src/web/src/Bell.jsx
index 4e87f192..4d2d287d 100644
--- a/src/web/src/Bell.jsx
+++ b/src/web/src/Bell.jsx
@@ -3,13 +3,61 @@ import { useEffect, useState } from "react";
 import { WagmiConfig, useAccount } from "wagmi";
 import { RainbowKitProvider } from "@rainbow-me/rainbowkit";
 import { eligible } from "@attestate/delegator2";
+import SwipeableDrawer from "@mui/material/SwipeableDrawer";
 
 import { Connector, TextConnectButton } from "./Navigation.jsx";
+import { RestoreDialogue } from "./Passkeys.jsx";
 import { fetchNotifications } from "./API.mjs";
-import { getLocalAccount, getCookie } from "./session.mjs";
+import { isIOS, getLocalAccount, getCookie } from "./session.mjs";
 import { client, chains } from "./client.mjs";
 import { dynamicPrefetch } from "./main.jsx";
 
+const IOSAppLogin = ({ allowlist, delegations, toast }) => {
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+  const PasskeysLogin = RestoreDialogue(allowlist, delegations, toast);
+
+  return (
+    <>
+      <button
+        onClick={() => setIsDrawerOpen(true)}
+        style={{
+          padding: "8px 0",
+          border: "none",
+          borderRadius: "2px",
+          backgroundColor: "#E2F266",
+          color: "black",
+          fontSize: "8pt",
+          cursor: "pointer",
+          width: "100%",
+        }}
+      >
+        Login
+      </button>
+
+      <SwipeableDrawer
+        anchor="bottom"
+        open={isDrawerOpen}
+        onClose={() => setIsDrawerOpen(false)}
+        onOpen={() => setIsDrawerOpen(true)}
+        disableBackdropTransition={!isIOS()}
+        disableDiscovery={isIOS()}
+      >
+        <div
+          style={{
+            height: "100%",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            padding: "3rem 0",
+          }}
+        >
+          <PasskeysLogin />
+        </div>
+      </SwipeableDrawer>
+    </>
+  );
+};
+
 let wasTitleSet = false;
 const Bell = (props) => {
   let address;
@@ -81,8 +129,12 @@ const Bell = (props) => {
   ) {
     return null;
   }
+  const isIOSApp = document.documentElement.classList.contains("kiwi-ios-app");
 
   if (!getCookie("identity") || !isEligible) {
+    if (isIOSApp) {
+      return <IOSAppLogin {...props} />;
+    }
     return (
       <TextConnectButton
         className={props.mobile ? "mobile-bell" : "bell-button"}
diff --git a/src/web/src/Passkeys.jsx b/src/web/src/Passkeys.jsx
index 660903cb..a00a5352 100644
--- a/src/web/src/Passkeys.jsx
+++ b/src/web/src/Passkeys.jsx
@@ -105,7 +105,6 @@ export const RestoreDialogue = (allowlist, delegations, toast) => {
             alignItems: "center",
             fontSize: "15px",
             gap: "4px",
-            border: "1px solid #828282",
             borderRadius: "2px",
             padding: "0.4rem 0.75rem",
             display: "flex",