feat: implement import ui in creator channels header

showtime-xyz · Oct 13, 2023 · d106bf6 · d106bf6
1 parent 65185dc
commit d106bf6
Showing 1 changed file with 34 additions and 2 deletions.
diff --git a/packages/app/components/creator-channels/components/messages-header.tsx b/packages/app/components/creator-channels/components/messages-header.tsx
@@ -2,7 +2,11 @@ import { useCallback } from "react";
 import { Platform } from "react-native";
 
 import { useIsDarkMode } from "@showtime-xyz/universal.hooks";
-import { ArrowLeft, Settings } from "@showtime-xyz/universal.icon";
+import {
+  AccessTicket,
+  ArrowLeft,
+  Settings,
+} from "@showtime-xyz/universal.icon";
 import { Pressable } from "@showtime-xyz/universal.pressable";
 import { useRouter } from "@showtime-xyz/universal.router";
 import { colors } from "@showtime-xyz/universal.tailwind";
@@ -40,6 +44,26 @@ export const MessagesHeader = (props: HeaderProps) => {
     );
   }, [props.channelId, router]);
 
+  const inviteAllowlist = useCallback(() => {
+    const as = "/creator-token/import-allowlist";
+    router.push(
+      Platform.select({
+        native: as,
+        web: {
+          pathname: router.pathname,
+          query: {
+            ...router.query,
+            creatorTokensImportAllowlistModal: true,
+          },
+        } as any,
+      }),
+      Platform.select({ native: as, web: router.asPath }),
+      {
+        shallow: true,
+      }
+    );
+  }, [router]);
+
   return (
     <LeanView
       tw="web:pt-2 web:md:py-5 android:pt-4 flex-row items-center border-gray-200 px-2.5 pb-2 dark:border-gray-800 md:border-b"
@@ -93,7 +117,15 @@ export const MessagesHeader = (props: HeaderProps) => {
                   color={isDark ? colors.gray["100"] : colors.gray[500]}
                 />
               </Pressable>
-            ) : null}
+            ) : (
+              <Pressable onPress={inviteAllowlist}>
+                <AccessTicket
+                  height={Platform.OS === "web" ? 20 : 24}
+                  width={Platform.OS === "web" ? 20 : 24}
+                  color={isDark ? colors.gray["100"] : colors.gray[500]}
+                />
+              </Pressable>
+            )}
             <Pressable onPress={props.onPressShare}>
               <View tw="items-center justify-center overflow-hidden rounded-full bg-indigo-600 px-3 py-1.5 text-center ">
                 <LeanText tw="web:text-xs text-sm font-bold text-white">