diff --git a/apps/next/src/pages/_app.tsx b/apps/next/src/pages/_app.tsx
index 7fd8f94550..7396fca403 100644
--- a/apps/next/src/pages/_app.tsx
+++ b/apps/next/src/pages/_app.tsx
@@ -37,6 +37,8 @@ import { CreatorChannelsMembersScreen } from "app/screens/creator-channels-membe
import { CreatorChannelsMessageReactionsScreen } from "app/screens/creator-channels-message-reactions";
import { CreatorChannelsSettingsScreen } from "app/screens/creator-channels-settings";
import { CreatorChannelsShareScreen } from "app/screens/creator-channles-share";
+import { InviteCreatorTokenScreen } from "app/screens/creator-token/invite-creator-token";
+import { ReviewCreatorTokenScreen } from "app/screens/creator-token/review-creator-token";
import { DetailsScreen } from "app/screens/details";
import { DropScreen } from "app/screens/drop";
import { DropEditDetailsScreen } from "app/screens/drop-edit-details";
@@ -54,7 +56,6 @@ import { PayoutsSetupScreen } from "app/screens/payouts/setup";
import { QRCodeShareScreen } from "app/screens/qr-code-share";
import { RaffleScreen } from "app/screens/raffle";
import { ReportScreen } from "app/screens/report";
-import { ReviewCreatorTokenScreen } from "app/screens/review-creator-token";
import { AddEmailScreen } from "app/screens/settings-add-email";
import { VerifyPhoneNumberScreen } from "app/screens/settings-verify-phone-number";
import { prevRouteRef } from "app/utilities";
@@ -255,6 +256,7 @@ function App({ Component, pageProps, router }: AppProps) {
+
diff --git a/apps/next/tailwind.config.js b/apps/next/tailwind.config.js
index 86b52d4540..42c1d514a6 100644
--- a/apps/next/tailwind.config.js
+++ b/apps/next/tailwind.config.js
@@ -89,6 +89,10 @@ module.exports = {
"zoom-in": "zoom-in 250ms",
},
},
+ letterSpacing: {
+ "extra-wide": "0.2em",
+ "ultra-wide": "0.3em",
+ },
},
plugins: [
require("nativewind/tailwind/css"),
diff --git a/packages/app/components/creator-token/assets/invite.tsx b/packages/app/components/creator-token/assets/invite.tsx
new file mode 100644
index 0000000000..774ff900c9
--- /dev/null
+++ b/packages/app/components/creator-token/assets/invite.tsx
@@ -0,0 +1,244 @@
+import * as React from "react";
+
+import Svg, {
+ SvgProps,
+ LinearGradient,
+ Stop,
+ ClipPath,
+ Rect,
+ Mask,
+ Path,
+ G,
+} from "react-native-svg";
+
+/* SVGR has dropped some elements not supported by react-native-svg: filter */
+const SvgComponent = (props: SvgProps) => (
+
+);
+export default SvgComponent;
diff --git a/packages/app/components/creator-token/invite-creator-token.tsx b/packages/app/components/creator-token/invite-creator-token.tsx
new file mode 100644
index 0000000000..92d67de779
--- /dev/null
+++ b/packages/app/components/creator-token/invite-creator-token.tsx
@@ -0,0 +1,129 @@
+import { Controller } from "react-hook-form";
+
+import { Button } from "@showtime-xyz/universal.button";
+import { Fieldset } from "@showtime-xyz/universal.fieldset";
+import { useIsDarkMode } from "@showtime-xyz/universal.hooks";
+import { ArrowRight, ChevronRight } from "@showtime-xyz/universal.icon";
+import { Pressable } from "@showtime-xyz/universal.pressable";
+import { useRouter } from "@showtime-xyz/universal.router";
+import { ScrollView } from "@showtime-xyz/universal.scroll-view";
+import { colors } from "@showtime-xyz/universal.tailwind";
+import { Text } from "@showtime-xyz/universal.text";
+import { View } from "@showtime-xyz/universal.view";
+
+import InviteCreatorTokenHeader from "./assets/invite";
+
+const data = [
+ {
+ id: 1,
+ code: "AFD43A",
+ },
+ {
+ id: 2,
+ code: "DAA43A",
+ },
+];
+
+const claimedData = [
+ {
+ id: 1,
+ date: "2021-09-01",
+ username: "am",
+ },
+ {
+ id: 2,
+ date: "2021-09-01",
+ username: "hirbod",
+ },
+ {
+ id: 3,
+ date: "2021-09-01",
+ username: "maxiricha",
+ },
+];
+
+export const InviteCreatorToken = () => {
+ const isDark = useIsDarkMode();
+ const router = useRouter();
+ return (
+
+
+
+
+
+
+
+ Invite a friend, get their token
+
+
+
+ You have{" "}
+
+ {data.length} {data.length > 1 ? "invites" : "invite"}
+ {" "}
+ left. Share or email invites below to earn your friends' creator
+ tokens.
+
+
+ {data.map((item) => (
+
+
+
+
+ {item.code}
+
+
+
+ Copy code
+
+
+
+
+ ))}
+
+
+ Claimed
+ {claimedData.map((item) => (
+ {
+ router.push(`/@${item.username}`);
+ }}
+ >
+
+
+
+ Referral of @{item.username}
+
+
+
+ 1 Token rewarded on {item.date}
+
+
+
+
+
+
+
+
+ ))}
+
+
+
+
+ );
+};
diff --git a/packages/app/navigation/linking.ts b/packages/app/navigation/linking.ts
index d37b703399..15d8101bf2 100644
--- a/packages/app/navigation/linking.ts
+++ b/packages/app/navigation/linking.ts
@@ -67,6 +67,7 @@ export const linking: LinkingOptions = {
followers: "profile/followers",
following: "profile/following",
reviewCreatorToken: "profile/review-creator-token",
+ inviteCreatorToken: "profile/invite-creator-token",
settings: "settings",
spotifyAuth: "spotifyAuth",
addEmail: "settings/add-email",