polished at last

src/components/InviteCode/InviteCard.tsx

@@ -1,25 +1,37 @@
 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 (
     <Card>
       <HeaderText>Your secure ketl invite code:</HeaderText>
 
       <MjmlSpacer height={values.px16} />
 
-      <Button href={linkToKetlEmailVerification}>Activate account</Button>
+      <Button href={ketlLinkToVerification}>Activate account</Button>
 
       <MjmlSpacer height={values.px16} />
 
@@ -30,7 +42,7 @@ export default function InviteCard(props: TokenProps) {
         lineHeight={values.px18}
         mjClass="font-accent text-tertiary-dark"
       >
-        <span style={{ wordBreak: 'break-all' }}>{secret}</span>
+        <span style={{ wordBreak: 'break-all' }}>{inviteCode}</span>
       </MjmlText>
 
       <MjmlSpacer height={values.px24} />
@@ -55,10 +67,10 @@ export default function InviteCard(props: TokenProps) {
         (<strong>DO NOT</strong> Screenshot or share your invite code with
         anyone else)
       </MjmlText>
-      {!!twitterHandle && (
+      {!!twitterMetadata && passedWaitlist && (
         <TwitterBlock
           attestationType={attestationType}
-          twitterHandle={twitterHandle}
+          value={twitterMetadata.id}
         />
       )}
     </Card>

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.
       </MjmlText>
       <MjmlSpacer height={values.px16} />
       <MjmlText

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}`
+}

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}`
 }

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 (
     <Mjml>
       <Head
@@ -69,7 +70,7 @@ function generateTokenPage(props: TokenProps) {
 }
 
 export default function (
-  props: TokenProps,
+  props: InviteCodeProps,
   options: Mjml2HtmlOptions = {
     minify: false,
     validationLevel: 'soft',

src/layouts/waitlistInfo.tsx

@@ -1,6 +1,5 @@
 import { HeaderText } from '../components/Text'
 import { Mjml, Mjml2HtmlOptions, MjmlSpacer } from 'mjml-react'
-import { OpenKetlProps } from '../helpers/openKetlWaitlist'
 import { render } from 'mjml-react'
 import AnonymousHeader from '../components/AnonymousHeader'
 import AttestationType from '../models/AttestationType'
@@ -27,10 +26,11 @@ const headerText = (
   </>
 )
 
-interface TokenPageProps extends OpenKetlProps {
+interface TokenPageProps {
   anonCode: string
   value: string
   verificationType: VerificationType
+  attestationType: AttestationType
 }
 
 const generateTokenPage = (props: TokenPageProps) => {

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