Fix typeform import and update typeform usage

apps/index/app/home-page.tsx

@@ -1,6 +1,7 @@
 'use client'
 import Footer from '@/components/Footer'
 import HomeDemo from '@/components/HomeDemo'
+import {typeformAtom} from '@/store/core'
 import {
   Box,
   Button,
@@ -10,8 +11,9 @@ import {
   alpha,
   keyframes,
 } from '@mui/material'
+import {useAtom} from 'jotai'
 import {NextPage} from 'next'
-import {FORM_URL, LITEPAPER_URL} from '../constants'
+import {LITEPAPER_URL} from '../constants'
 import HomeBar from './home-bar'
 
 const textOpen = keyframes`
@@ -24,6 +26,7 @@ const textOpen = keyframes`
 `
 
 const Page: NextPage = () => {
+  const [typeform] = useAtom(typeformAtom)
   return (
     <Stack height={[, , 1]}>
       <HomeBar />
@@ -75,10 +78,11 @@ const Page: NextPage = () => {
             </Typography>
             <Stack direction="row" spacing={3} mt={8}>
               <Button
+                onClick={() => {
+                  typeform.waitlist.open()
+                }}
                 variant="contained"
                 size="large"
-                href={FORM_URL}
-                target="_blank"
               >
                 Join Waitlist
               </Button>

apps/index/components/GlobalStyles.tsx

@@ -7,6 +7,7 @@ import {
   lighten,
   type Theme,
 } from '@mui/material'
+import '@typeform/embed/build/css/popup.css'
 import {type FC} from 'react'
 
 const talismanConnectStyles = (theme: Theme): SerializedStyles => css`

apps/index/components/HomeDemo/Progress.tsx

@@ -1,6 +1,6 @@
 'use client'
 /* eslint-disable @typescript-eslint/naming-convention */
-import {currentTaskAtom, fromChainAtom} from '@/store/core'
+import {currentTaskAtom, fromChainAtom, typeformAtom} from '@/store/core'
 import {
   Chip,
   CircularProgress,
@@ -17,7 +17,6 @@ import {
 } from '@mui/material'
 import {useAtom} from 'jotai'
 import {useMemo, type FC} from 'react'
-import {FORM_URL} from '../../constants'
 
 const activeProps = {
   StepIconComponent: () => <CircularProgress size={24} />,
@@ -28,6 +27,7 @@ const Progress: FC<PaperProps & {solution?: any}> = ({
   solution,
   ...props
 }) => {
+  const [typeform] = useAtom(typeformAtom)
   const [currentTask] = useAtom(currentTaskAtom)
   const [fromChain] = useAtom(fromChainAtom)
   // const {data: simulateResults} = useSimulateResults()
@@ -79,7 +79,13 @@ const Progress: FC<PaperProps & {solution?: any}> = ({
       {steps == null ? (
         <Typography textAlign="center" variant="subtitle2">
           Oops, It’s currently not been supported yet,{' '}
-          <Link href={FORM_URL} target="_blank">
+          <Link
+            component="span"
+            sx={{cursor: 'pointer'}}
+            onClick={() => {
+              typeform.survey.open()
+            }}
+          >
             tell us what you want
           </Link>
           .

apps/index/components/HomeDemo/index.tsx

@@ -1,4 +1,5 @@
 'use client'
+import {typeformAtom} from '@/store/core'
 import {ArrowUpward, PlayArrow, Replay} from '@mui/icons-material'
 import {LoadingButton} from '@mui/lab'
 import {
@@ -14,10 +15,10 @@ import {
   Typography,
   alpha,
 } from '@mui/material'
+import {useAtom} from 'jotai'
 import {useEffect, useState, type FC} from 'react'
 import useSWRMutation from 'swr/mutation'
 import wretch from 'wretch'
-import {FORM_URL} from '../../constants'
 import Confirmation from './Confirmation'
 import Progress from './Progress'
 
@@ -61,6 +62,7 @@ async function apiFetcher(
 }
 
 const HomeDemo: FC = () => {
+  const [typefrom] = useAtom(typeformAtom)
   const [fromChain, setFromChain] = useState<string>()
   const [toChain, setToChain] = useState<string>()
   const [fromAmount, setFromAmount] = useState<string>()
@@ -132,7 +134,13 @@ const HomeDemo: FC = () => {
           </Stack>
 
           <Stack alignItems="center" mt={2}>
-            <Link href={FORM_URL}>
+            <Link
+              component="span"
+              sx={{cursor: 'pointer'}}
+              onClick={() => {
+                typefrom.survey.open()
+              }}
+            >
               <Typography variant="caption">
                 Share your thoughts on inDEX by taking a quick survey.
               </Typography>

apps/index/constants.ts

@@ -1,2 +1,3 @@
-export const FORM_URL = 'https://n599e53glte.typeform.com/to/IYgPw9cs'
+export const WAITLIST_FORM_ID = 'w1QYBd8V'
+export const SURVEY_FORM_ID = 'IYgPw9cs'
 export const LITEPAPER_URL = 'https://docsend.com/view/xp62vjpi25nxddpj'

apps/index/package.json

@@ -28,6 +28,7 @@
     "@talismn/connect-components": "^1.1.7",
     "@talismn/connect-ui": "^1.1.2",
     "@talismn/connect-wallets": "^1.2.3",
+    "@typeform/embed": "^4.4.0",
     "decimal.js": "^10.4.3",
     "ethers": "^6.9.0",
     "jotai": "^2.6.0",

apps/index/store/core.ts

@@ -2,8 +2,10 @@ import {assetMap, assets, type Asset} from '@/config/common'
 import {ERROR_MESSAGES, type Error} from '@/config/error'
 import {type Client, type EvmChain, type SubstrateChain} from '@phala/index'
 import {polkadotAccountAtom} from '@phala/store'
+import {createPopup} from '@typeform/embed'
 import {atom} from 'jotai'
 import {atomWithReset, atomWithStorage} from 'jotai/utils'
+import {SURVEY_FORM_ID, WAITLIST_FORM_ID} from '../constants'
 import {evmAccountAtom} from './ethers'
 
 const getAssets = (chainId: string): Asset[] => {
@@ -112,3 +114,8 @@ export const errorMessageAtom = atom<string | null>((get) => {
   if (error === null) return null
   return ERROR_MESSAGES[error]
 })
+
+export const typeformAtom = atom({
+  waitlist: createPopup(WAITLIST_FORM_ID, {size: 70}),
+  survey: createPopup(SURVEY_FORM_ID, {size: 70}),
+})

yarn.lock

@@ -3923,6 +3923,7 @@ __metadata:
     "@talismn/connect-components": "npm:^1.1.7"
     "@talismn/connect-ui": "npm:^1.1.2"
     "@talismn/connect-wallets": "npm:^1.2.3"
+    "@typeform/embed": "npm:^4.4.0"
     "@types/js-cookie": "npm:^3.0.6"
     "@types/lodash-es": "npm:^4.17.12"
     "@types/node": "npm:^18.18.13"
@@ -5876,6 +5877,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@typeform/embed@npm:^4.4.0":
+  version: 4.4.0
+  resolution: "@typeform/embed@npm:4.4.0"
+  checksum: 87bbca22434992f7104482a7240d87015415da136dbc2b7b61676d42c9fa327e1993739369d95d6a25c2af32be73fff019dc62b34759c9e365e3e2c218118471
+  languageName: node
+  linkType: hard
+
 "@types/aria-query@npm:^5.0.1":
   version: 5.0.3
   resolution: "@types/aria-query@npm:5.0.3"