diff --git a/src/components/InviteCode/InviteCard.tsx b/src/components/InviteCode/InviteCard.tsx index 3ac7789..05bbf32 100644 --- a/src/components/InviteCode/InviteCard.tsx +++ b/src/components/InviteCode/InviteCard.tsx @@ -1,17 +1,29 @@ import { HeaderText } from '../Text' +import { InviteCodeProps } from '../../layouts/inviteCode' import { MjmlSpacer, MjmlText } from 'mjml-react' -import { TokenProps } from '../../layouts/inviteCode' import Button from '../Button' import Card from '../Card' import TwitterBlock from './TwitterBlock' import colors from '../../styles/colors' -import env from '../../env' +import openKetlInviteCode from '../../helpers/openKetlInviteCode' +import openKetlWaitlist from '../../helpers/openKetlWaitlist' import values from '../../styles/values' -export default function InviteCard(props: TokenProps) { - const { attestationType, email, secret, twitterHandle } = props - const domain = email.split('@')[1] - const linkToKetlEmailVerification = `${env.KETL_ADDRESS}/email/${domain}/${secret}` +export default function InviteCard({ + attestationType, + inviteCode, + passedWaitlist, + twitterMetadata, + value, +}: InviteCodeProps) { + const ketlLinkToVerification = passedWaitlist + ? openKetlWaitlist({ + attestationType, + inviteCode, + passed: passedWaitlist, + value, + }) + : openKetlInviteCode({ email: value, inviteCode }) return ( @@ -19,7 +31,7 @@ export default function InviteCard(props: TokenProps) { - + @@ -30,7 +42,7 @@ export default function InviteCard(props: TokenProps) { lineHeight={values.px18} mjClass="font-accent text-tertiary-dark" > - {secret} + {inviteCode} @@ -55,10 +67,10 @@ export default function InviteCard(props: TokenProps) { (DO NOT Screenshot or share your invite code with anyone else) - {!!twitterHandle && ( + {!!twitterMetadata && passedWaitlist && ( )} diff --git a/src/components/InviteCode/TwitterBlock.tsx b/src/components/InviteCode/TwitterBlock.tsx index 049cba2..34a2385 100644 --- a/src/components/InviteCode/TwitterBlock.tsx +++ b/src/components/InviteCode/TwitterBlock.tsx @@ -5,17 +5,19 @@ import colors from '../../styles/colors' import openKetlWaitlist from '../../helpers/openKetlWaitlist' import values from '../../styles/values' +interface TwitterBlockProps { + attestationType: AttestationType + value: string +} + export default function TwitterBlock({ attestationType, - twitterHandle, -}: { - attestationType: AttestationType - twitterHandle: string -}) { + value, +}: TwitterBlockProps) { const ketlAppTwitterVerification = openKetlWaitlist({ attestationType, passed: true, - value: twitterHandle, + value, verificationType: VerificationType.twitter, }) @@ -31,8 +33,8 @@ export default function TwitterBlock({ lineHeight={values.px16} mjClass="font-primary" > - You may also activate your ketl account using the X (twitter) account @ - {twitterHandle} + You may also activate your ketl account using the X (twitter) account + you used to sign up. - - Activate your ketl account using the X (twitter) account you used to - sign up - - - - - - - - - - You’re ready to begin with X account @{twitterHandle} - - - ) -} diff --git a/src/helpers/openKetlInviteCode.tsx b/src/helpers/openKetlInviteCode.tsx new file mode 100644 index 0000000..0b4f293 --- /dev/null +++ b/src/helpers/openKetlInviteCode.tsx @@ -0,0 +1,11 @@ +import env from '../env' + +interface InviteCodeProps { + email: string + inviteCode: string +} + +export default function ({ email, inviteCode }: InviteCodeProps) { + const domain = email.split('@')[1] + return `${env.KETL_ADDRESS}/email/${domain}/${inviteCode}` +} diff --git a/src/helpers/openKetlWaitlist.tsx b/src/helpers/openKetlWaitlist.tsx index ac94bbb..cf67db1 100644 --- a/src/helpers/openKetlWaitlist.tsx +++ b/src/helpers/openKetlWaitlist.tsx @@ -8,10 +8,12 @@ export interface OpenKetlProps { verificationType?: VerificationType waitlistContext?: boolean passed?: boolean + inviteCode?: string } export default function ({ attestationType, + inviteCode = '', passed = false, value = 'null', verificationType = VerificationType.email, @@ -24,5 +26,5 @@ export default function ({ env.KETL_ADDRESS }/waitlist/${verificationType}/${attestation}/${value}/${jumpToContextPage}/${Number( passed - )}` + )}/${inviteCode}` } diff --git a/src/layouts/inviteCode.tsx b/src/layouts/inviteCode.tsx index b8eb4a0..14c36b7 100644 --- a/src/layouts/inviteCode.tsx +++ b/src/layouts/inviteCode.tsx @@ -19,11 +19,12 @@ import InviteCard from '../components/InviteCode/InviteCard' import colors from '../styles/colors' import values from '../styles/values' -export interface TokenProps { +export interface InviteCodeProps { attestationType: AttestationType - secret: string - email: string - twitterHandle?: string + inviteCode: string + value: string + passedWaitlist: boolean + twitterMetadata?: { username: string; id: string } } const headerText = ( @@ -33,7 +34,7 @@ const headerText = ( ) -function generateTokenPage(props: TokenProps) { +function generateTokenPage(props: InviteCodeProps) { return ( ) -interface TokenPageProps extends OpenKetlProps { +interface TokenPageProps { anonCode: string value: string verificationType: VerificationType + attestationType: AttestationType } const generateTokenPage = (props: TokenPageProps) => { diff --git a/src/server.ts b/src/server.ts index f017f17..1325ae4 100644 --- a/src/server.ts +++ b/src/server.ts @@ -11,10 +11,11 @@ import sendTestEmail from './helpers/sendTestEmail' const port = 3002 const app = express() -const exampleSecret = +const exampleInviteCode = '0000000000000000000000000000000000000000000000000000000000000000000000000000:0x00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000' -const attestationType = AttestationType.YC -const verificationType = VerificationType.twitter +const attestationType = AttestationType.Founder +const verificationType = VerificationType.email +const ketlXyzTwitter = { id: '1435733105554321409', username: 'ketlxyz' } app.get('/waitlist', (_, res) => { const { html } = waitlistInfo({ @@ -32,9 +33,10 @@ app.get('/waitlist', (_, res) => { app.get('*', (_, res) => { const emailExample = inviteCode({ attestationType, - email: env.TEST_EMAIL, - secret: exampleSecret, - twitterHandle: env.TEST_TWITTER_HANDLE, + inviteCode: exampleInviteCode, + passedWaitlist: true, + twitterMetadata: ketlXyzTwitter, + value: env.TEST_EMAIL, }) const { html } = emailExample