Merge pull request #530 from 0xsend/dev

deploy

.github/workflows/build-docker.yml

@@ -8,7 +8,7 @@ on:
       - 'dev'
       - 'main'
 jobs:
-  if_merged:
+  build-docker:
     if: github.event.pull_request.merged == true
     runs-on: ubuntu-latest
 #    needs: [cache-deps]

.github/workflows/ci.yml

@@ -146,6 +146,12 @@ jobs:
       #   shell: bash
       #   run: git diff --exit-code
       # this is on purpose so we get github annotations
+      - name: Build Next.js
+        shell: bash
+        run: |
+          tilt ci yarn:install # install and setup env
+          direnv allow .
+          direnv exec . yarn web:docker:build # build nextjs docker image
       - name: Playwright Tests
         id: playwright
         shell: bash

.github/workflows/deploy-dev.yml

@@ -0,0 +1,21 @@
+name: Deploy Dev
+on:
+  push:
+    branches: [dev]
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    needs: build-docker
+    steps:
+      - name: Configure SSH
+        run: |
+          mkdir -p ~/.ssh/
+          echo "$SSH_KEY" > ~/.ssh/deployer.key
+          chmod 600 ~/.ssh/deployer.key
+          for h in $DEPLOYMENT_TARGETS; do echo Deploying to $h && \
+          ssh -o ConnectTimeout=10 -o StrictHostKeyChecking=no $SSH_USER@$h \
+          'cd /opt/next-app-dev && docker compose pull && docker compose up -d' ; done
+        env:
+          SSH_USER: ${{ secrets.DEPLOYER_SSH_USER }}
+          SSH_KEY: ${{ secrets.DEPLOYER_SSH_KEY }}
+          DEPLOYMENT_TARGETS: ${{ secrets.DEV_DOCKER_DEPLOYMENT_TARGETS }}

Brewfile

@@ -16,3 +16,4 @@ brew "nss" unless system "type nss-policy-check"
 brew "sqlfluff" unless CI or system "sqlfluff --version"
 brew "postgresql@15" unless system "type pg_dump"
 brew "gnu-sed" unless system "gsed --version"
+brew "direnv" unless system "direnv --version"

Tiltfile

@@ -103,14 +103,9 @@ next_app_resource_deps = [
 
 # Next
 if CFG.dockerize:
-    # GIT_HASH = str(local("git rev-parse --short=10 HEAD")).strip()
-    # os.putenv("GIT_HASH", GIT_HASH)
-
-    # figure out how to do this in a more elegant way
-    local("""
-    grep SUPABASE_DB_URL .env.development.docker | cut -d'=' -f2 | tr -d '\n' > ./var/SUPABASE_DB_URL.txt
-    grep SUPABASE_SERVICE_ROLE .env.local | cut -d'=' -f2 | tr -d '\n' > ./var/SUPABASE_SERVICE_ROLE.txt
-""", echo_off = True, quiet = True)
+    GIT_BRANCH = str(local("git symbolic-ref --short HEAD 2>/dev/null || git rev-parse --short HEAD")).strip()
+    GIT_HASH = str(local("git rev-parse --short=10 HEAD")).strip()
+
     # FIXME: when we support dev mode and dockerize.
     # docker_build(
     #     "0xsend/sendapp/next-app",

apps/next/next.config.js

@@ -64,6 +64,10 @@ export default () => {
           hostname: 'github.com',
           pathname: '/0xsend/assets/**',
         },
+        {
+          protocol: 'https',
+          hostname: 'ghassets.send.app',
+        },
       ],
     },
     typescript: {

apps/next/pages/_app.tsx

@@ -64,10 +64,7 @@ function MyApp({
         <meta name="msapplication-TileColor" content="#122023" />
         <meta name="theme-color" content="#FFFFFF" media="(prefers-color-scheme: light)" />
         <meta name="theme-color" content="#122023" media="(prefers-color-scheme: dark)" />
-        <meta
-          property="og:image"
-          content="https://0xsend.github.io/assets/2024/04/send-og-image.png"
-        />
+        <meta property="og:image" content="https://ghassets.send.app/2024/04/send-og-image.png" />
       </Head>
       <NextThemeProvider
         onChangeTheme={(next) => {

apps/next/pages/account/index.tsx

@@ -1,9 +1,9 @@
+import { TopNav } from 'app/components/TopNav'
+import { AccountScreen } from 'app/features/account/screen'
 import { HomeLayout } from 'app/features/home/layout.web'
 import Head from 'next/head'
 import { userProtectedGetSSP } from 'utils/userProtected'
 import type { NextPageWithLayout } from '../_app'
-import { AccountScreen } from 'app/features/account/screen'
-import { ButtonOption, TopNav } from 'app/components/TopNav'
 
 export const Page: NextPageWithLayout = () => {
   return (

apps/next/pages/auth/onboarding.tsx

@@ -29,9 +29,9 @@ export const Page: NextPageWithLayout<InferGetServerSidePropsType<typeof getServ
 
 export const getServerSideProps = userProtectedGetSSP(async () => {
   const paths = [
-    'app_images/auth_image_1.jpg?raw=true',
-    'app_images/auth_image_2.jpg?raw=true',
-    'app_images/auth_image_3.jpg?raw=true',
+    'app_images/auth_image_3.jpg',
+    'app_images/auth_image_1.jpg',
+    'app_images/auth_image_2.jpg',
   ]
   const images = await getRemoteAssets(paths)
   return { props: { images } }

apps/next/pages/auth/sign-in.tsx

@@ -30,9 +30,9 @@ export const Page: NextPageWithLayout<InferGetServerSidePropsType<typeof getServ
 
 export const getServerSideProps = guestOnlyGetSSP(async () => {
   const paths = [
-    'app_images/auth_image_1.jpg?raw=true',
-    'app_images/auth_image_2.jpg?raw=true',
-    'app_images/auth_image_3.jpg?raw=true',
+    'app_images/auth_image_3.jpg',
+    'app_images/auth_image_1.jpg',
+    'app_images/auth_image_2.jpg',
   ]
   const images = await getRemoteAssets(paths)
   return { props: { images } }

apps/next/pages/auth/sign-up.tsx

@@ -0,0 +1,43 @@
+import { SignUpScreen } from 'app/features/auth/sign-up/screen'
+import Head from 'next/head'
+import { guestOnlyGetSSP } from 'utils/guestOnly'
+import type { NextPageWithLayout } from '../_app'
+import { AuthLayout } from 'app/features/auth/layout.web'
+import type { InferGetServerSidePropsType } from 'next'
+import { getRemoteAssets } from 'utils/getRemoteAssets'
+import { useContext, useEffect } from 'react'
+import { AuthCarouselContext } from 'app/features/auth/AuthCarouselContext'
+
+export const Page: NextPageWithLayout<InferGetServerSidePropsType<typeof getServerSideProps>> = ({
+  images,
+}) => {
+  const { carouselImages, setCarouselImages } = useContext(AuthCarouselContext)
+
+  useEffect(() => {
+    if (carouselImages.length === 0) setCarouselImages(images)
+  }, [setCarouselImages, carouselImages, images])
+
+  return (
+    <>
+      <Head>
+        <title>Send | Sign Up</title>
+        <meta name="description" content="Future Cash. Sign up for Send." key="desc" />
+      </Head>
+      <SignUpScreen />
+    </>
+  )
+}
+
+export const getServerSideProps = guestOnlyGetSSP(async () => {
+  const paths = [
+    'app_images/auth_image_3.jpg',
+    'app_images/auth_image_1.jpg',
+    'app_images/auth_image_2.jpg',
+  ]
+  const images = await getRemoteAssets(paths)
+  return { props: { images } }
+})
+
+Page.getLayout = (children) => <AuthLayout>{children}</AuthLayout>
+
+export default Page

apps/next/pages/index.tsx

@@ -1,24 +1,93 @@
-import { HomeScreen } from 'app/features/home/screen'
+import type { Database } from '@my/supabase/database.types'
+import { createPagesServerClient } from '@supabase/auth-helpers-nextjs'
+import { ButtonOption, TopNav } from 'app/components/TopNav'
 import { HomeLayout } from 'app/features/home/layout.web'
-import type { GetServerSidePropsContext } from 'next'
+import { HomeScreen } from 'app/features/home/screen'
+import { SplashScreen } from 'app/features/splash/screen'
+import { useUser } from 'app/utils/useUser'
+import debug from 'debug'
+import type { GetServerSidePropsContext, InferGetServerSidePropsType } from 'next'
 import Head from 'next/head'
-import { userProtectedGetSSP } from 'utils/userProtected'
+import { logRequest } from 'utils/logRequest'
+import { userOnboarded } from 'utils/userOnboarded'
 import type { NextPageWithLayout } from './_app'
-import { ButtonOption, TopNav } from 'app/components/TopNav'
+import { AuthCarouselContext } from 'app/features/auth/AuthCarouselContext'
+import { useEffect, useState } from 'react'
+import { getRemoteAssets } from 'utils/getRemoteAssets'
+import type { GetPlaiceholderImage } from 'app/utils/getPlaiceholderImage'
+
+const log = debug('app:pages:index')
+
+export const Page: NextPageWithLayout<InferGetServerSidePropsType<typeof getServerSideProps>> = ({
+  images,
+}) => {
+  const { session } = useUser()
+  const [carouselImages, setCarouselImages] = useState<GetPlaiceholderImage[]>([])
+  const [carouselProgress, setCarouselProgress] = useState(0)
+
+  useEffect(() => {
+    if (carouselImages.length === 0) setCarouselImages(images)
+  }, [carouselImages, images])
 
-export const Page: NextPageWithLayout = () => {
   return (
     <>
       <Head>
         <title>Send | Home</title>
       </Head>
-      <HomeScreen />
+      {session ? (
+        <HomeLayout TopNav={<TopNav header="Home" button={ButtonOption.QR} showLogo={true} />}>
+          <HomeScreen />
+        </HomeLayout>
+      ) : (
+        <AuthCarouselContext.Provider
+          value={{
+            carouselImages,
+            setCarouselImages,
+            carouselProgress,
+            setCarouselProgress,
+          }}
+        >
+          <SplashScreen />
+        </AuthCarouselContext.Provider>
+      )}
     </>
   )
 }
-export const getServerSideProps = (ctx: GetServerSidePropsContext) => {
+export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
   setReferralCodeCookie(ctx)
-  return userProtectedGetSSP()(ctx)
+  log('connecting to supabase', process.env.NEXT_PUBLIC_SUPABASE_URL)
+  const supabase = createPagesServerClient<Database>(ctx)
+
+  const {
+    data: { session },
+  } = await supabase.auth.getSession()
+
+  logRequest(ctx)
+
+  if (!session) {
+    log('no session')
+    const paths = [
+      'app_images/auth_image_3.jpg',
+      'app_images/auth_image_2.jpg',
+      'app_images/auth_image_1.jpg',
+    ]
+    const images = await getRemoteAssets(paths)
+    return {
+      props: {
+        images,
+      },
+    }
+  }
+
+  const needsOnboarding = await userOnboarded(supabase, ctx)
+  if (needsOnboarding) return needsOnboarding
+
+  return {
+    props: {
+      initialSession: session,
+      images: [],
+    },
+  }
 }
 
 function setReferralCodeCookie(context: GetServerSidePropsContext) {
@@ -34,10 +103,4 @@ function setReferralCodeCookie(context: GetServerSidePropsContext) {
   }
 }
 
-Page.getLayout = (children) => (
-  <HomeLayout TopNav={<TopNav header="Home" button={ButtonOption.QR} showLogo={true} />}>
-    {children}
-  </HomeLayout>
-)
-
 export default Page

apps/next/utils/getRemoteAssets.ts

@@ -1,7 +1,7 @@
 import { getPlaiceholderImage } from 'app/utils/getPlaiceholderImage'
 
 export async function getRemoteAssets(paths: string[] = []) {
-  const remoteImageUrl = 'https://github.com/0xsend/assets/blob/main/'
+  const remoteImageUrl = 'https://ghassets.send.app/'
   const imagePromises = paths.map((path) => getPlaiceholderImage(remoteImageUrl + path))
   return await Promise.all(imagePromises)
 }

docker-compose.yml

@@ -1,12 +1,12 @@
 services:
   next-app:
-    image: 0xsend/sendapp/next-app:latest
+    image: sendapp/next-app-dev:latest
     build:
       context: .
       dockerfile: ./apps/next/Dockerfile
       tags:
-        - 0xsend/sendapp/next-app:${GIT_HASH:-latest}
-        - 0xsend/sendapp/next-app:latest
+        - sendapp/next-app-${GIT_BRANCH:-dev}:${GIT_HASH:-latest}
+        - sendapp/next-app-${GIT_BRANCH:-dev}:latest
       args:
         - CI=${CI:-}
         - DEBUG=${DEBUG:-}
@@ -43,9 +43,9 @@ services:
       - supabase_network_send
 secrets:
   SUPABASE_DB_URL:
-    file: ./var/SUPABASE_DB_URL.txt
+    environment: SUPABASE_DB_URL
   SUPABASE_SERVICE_ROLE:
-    file: ./var/SUPABASE_SERVICE_ROLE.txt
+    environment: SUPABASE_SERVICE_ROLE
 
 networks:
   supabase_network_send:

package.json

@@ -11,8 +11,8 @@
     "native": "cd apps/expo && yarn start",
     "watch": "yarn workspaces foreach -pi run watch",
     "web": "yarn build && cd apps/next && yarn dev",
-    "web:docker:build": "GIT_HASH=$(git rev-parse --short=10 HEAD) docker compose --progress=plain build",
-    "web:docker:push": "GIT_HASH=$(git rev-parse --short=10 HEAD) docker compose push",
+    "web:docker:build": "GIT_BRANCH=$(git symbolic-ref --short HEAD) GIT_HASH=$(git rev-parse --short=10 HEAD) docker compose --progress=plain build",
+    "web:docker:push": "GIT_BRANCH=$(git symbolic-ref --short HEAD) GIT_HASH=$(git rev-parse --short=10 HEAD) docker compose push",
     "web:extract": "DISABLE_EXTRACTION=false yarn workspace next-app dev",
     "web:prod": "yarn workspace next-app build",
     "web:prod:serve": "yarn workspace next-app serve",

packages/app/components/FormFields/CountryCodeField.tsx

@@ -19,18 +19,10 @@ import {
   isWeb,
 } from '@my/ui'
 
-type SelectItem = {
-  value: string
-  name: string
-}
-
 export const CountryCodeField = ({
-  options,
   native = false,
   ...props
-}: {
-  options: SelectItem[]
-} & Pick<SelectProps, 'size' | 'native'>) => {
+}: Pick<SelectProps, 'size' | 'native'>) => {
   const [country, setCountry] = useState<(typeof countries)[number] | undefined>(undefined)
   const [isOpen, setIsOpen] = useState(false)
   const { data: geoData, isLoading } = useGeoIp()

packages/app/components/FormFields/OTPField.tsx

@@ -1,28 +1,22 @@
-import { useStringFieldInfo, useTsController } from '@ts-react/form'
-import { useEffect, useId, useRef, useState } from 'react'
 import {
+  FieldError,
   Fieldset,
   Input,
-  type InputProps,
   Label,
-  TamaguiElement,
+  Shake,
   Theme,
   XStack,
   useThemeName,
-  FieldError,
-  Shake,
+  type InputProps,
 } from '@my/ui'
+import { useStringFieldInfo, useTsController } from '@ts-react/form'
+import { useId, useState } from 'react'
 
 export const OTPField = (props: InputProps) => {
-  const {
-    field,
-    error,
-    formState: { isSubmitting },
-  } = useTsController<string>()
+  const { field, error } = useTsController<string>()
   const { label, placeholder, isOptional } = useStringFieldInfo()
   const themeName = useThemeName()
   const id = useId()
-  const disabled = isSubmitting
   const [otp, setOtp] = useState(['', '', '', '', '', ''])
 
   const onChangeText = (text, index) => {

packages/app/features/account/settings/SettingsLinks.tsx

@@ -24,8 +24,7 @@ export function SettingsLinks(): JSX.Element {
     },
     {
       text: 'Privacy',
-      href: '/account/settings/privacy',
-      disabled: true,
+      href: 'https://info.send.it/legal/privacy-policy',
     },
     {
       text: 'Backup',