feat(wallet): Add New fields to KYC forms

.github/contributing.md

@@ -0,0 +1,119 @@
+# Contributing to this repository <!-- omit in toc -->
+
+## Getting started <!-- omit in toc -->
+
+Thank you for contributing to Testnet, a Rafiki Playground :tada:
+
+Before you begin:
+- Have you read the [code of conduct](CODE_OF_CONDUCT.md)?
+- Check out the [existing issues](https://github.com/interledger/testnet/issues) & see if we [accept contributions](#types-of-contributions) for your type of issue.
+
+### Table of Contents <!-- omit in toc -->
+
+- [Types of contributions](#types-of-contributions)
+  - [:mega: Discussions](#mega-discussions)
+  - [:beetle: Issues](#beetle-issues)
+  - [:hammer\_and\_wrench: Pull requests](#hammer_and_wrench-pull-requests)
+  - [:books: Documentation](#books-documentation)
+- [Working in the testnet repository](#working-in-the-testnet-repository)
+  - [Labels](#labels)
+  - [Code quality](#code-quality)
+    - [Linting](#linting)
+    - [Formatting](#formatting)
+    - [Testing](#testing)
+    - [Language](#language)
+    - [CI](#ci)
+
+## Types of contributions
+You can contribute to Testnet in several ways. 
+
+### :mega: Discussions
+Discussions are where we have conversations about Testnet.
+
+If you would like to discuss topics about the broader ecosystem, have a new idea, or want to show off your work - join us in [discussions](https://github.com/interledger/testnet/discussions).
+
+### :beetle: Issues
+We use GitHub issues to track tasks that contributors can help with. We haven't finalized labels yet for contributors to tackle. If you want to help with work related to an issue, please comment on the issue before starting work on it.
+
+If you've found something that needs fixing, search open issues to see if someone else has reported the same thing. If it's something new, open an issue. We'll use the issue to discuss the problem you want to fix.
+
+### :hammer_and_wrench: Pull requests
+Feel free to fork and create a pull request on changes you think you can contribute.
+
+The team will review your pull request as soon as possible.
+
+### :books: Documentation
+The project is new and available Testnet documentation is a work in progress.
+
+Rafiki has started to maintain public-facing documentation on [rafiki.dev](https://github.com/interledger/rafiki.dev). 
+A list of issues being tracked across the Interledger ecosystem (including rafiki) is maintained in the [Documentation project](https://github.com/orgs/interledger/projects/5/views/1).
+
+
+## Working in the testnet repository
+
+This project uses pnpm. A list of steps for setting up a [local development environment](https://github.com/interledger/testnet#local-development-environment) can be found in the Readme.
+
+> DO NOT use `npm install`. This will cause the project to spontaneously self-destruct :boom:
+
+### Labels
+
+We use labels to communicate the intention of issues and PRs.
+
+- `package:wallet` prefix denotes issues that are partaining to the wallet package (NextJS).
+- `package:backend` prefix denotes issues that are partaining to the backend package (Express).
+- `priority:` prefix denotes pirority of issues.
+
+Some labels will be automatically assigned to Issues/PRs.
+
+### Code quality
+
+All the code quality tools used in the project are installed and configured at the root.
+This allows for consistency across the monorepo. Allows new packages to be added with
+minimal configuration overhead.
+
+We try not to put config files in workspaces, unless absolutely necessary.
+
+#### Linting
+
+[Eslint](https://eslint.org/) is used for linting.
+
+```shell
+./.eslintrc.js # config
+./.eslintignore # ignore file
+```
+
+Eslint config should not be overridden in any packages.
+
+#### Formatting
+
+[Prettier](https://prettier.io/) is used for formatting.
+
+```shell
+./.prettierrc.js # config
+./.prettierignore # ignore file
+```
+
+Prettier config should not be overridden in any packages.
+
+#### Testing
+
+[Jest](https://jestjs.io/) is used for unit and integration testing.
+
+[Playwright](https://playwright.dev/) is used for end-to-end testing.
+
+#### Language
+
+[Typescript](https://www.staging-typescript.org/) is the chosen language.
+
+```shell
+./tsconfig.json # config
+```
+
+Typescript config at the root is intended to be a base config that should be extended by
+each package to suit the package's requirements.
+
+#### CI
+
+We use GitHub actions to manage our CI pipeline.
+
+The workflows can be found in `.github/workflows`

README.md

@@ -1,3 +1,79 @@
 # Testnet
 
-WIP
+[testnet](https://user-images.githubusercontent.com/117268143/220323531-538238d2-f538-4ed5-be97-163e28ebc48f.jpg)
+
+## What is Testnet?
+
+Testnet is an open source test application for Rafiki. In other words, a Rafiki Playground.
+It wants to use all of the functionalities of Rafiki and put the advantages of it to the real test.
+
+Testnet is made up (or will be made up in the near future) of several components, including wallet application,
+a bank application, and an e-commerce application.
+
+## What is Rafiki?
+
+Rafiki is an open source package that exposes a comprehensive set of
+Interledger APIs. It's intended to be run by wallet providers, allowing them to
+offer Interledger functionality to their users.
+
+### New to interledger?
+
+Never heard of Interledger before, or you would like to learn more? Here are some good places to start:
+
+- [Good first issues](https://github.com/interledger/rafiki/contribute)
+- [Interledger Explainer Video](https://twitter.com/Interledger/status/1567916000074678272)
+- [Interledger Website](https://interledger.org/)
+- [Payment pointers](https://paymentpointers.org/)
+- [Web monetization](https://webmonetization.org/)
+
+## Contributing
+
+Please read the [contribution guidelines](.github/contributing.md) before submitting contributions. All contributions must adhere to our [code of conduct](.github/CODE_OF_CONDUCT.md).
+
+## Local Development Environment
+
+### Prequisites
+
+- [Docker](https://docs.docker.com/get-docker/)
+- [NVM](https://github.com/nvm-sh/nvm)
+
+### Environment Setup
+
+```sh
+# Install Node 18
+nvm install lts/hydrogen
+nvm use lts/hydrogen
+
+# Install pnpm using Corepack
+corepack enable
+```
+
+If you do not have `corepack` installed locally you can use `npm` or `yarn` to install `pnpm`:
+
+```sh
+npm install pnpm -g
+# or
+yarn install pnpm -g
+```
+
+For other alternatives on how to install `pnpm`, you can see the [official documentation](https://pnpm.io/installation) from `pnpm`.
+
+To Install dependencies run:
+
+```sh
+pnpm i
+```
+
+### Local Playground
+
+From the root of the project:
+
+```sh
+# This will start both the wallet and backend application
+pnpm dev
+```
+
+After running the command above you will have:
+
+- Wallet frontend available on http://localhost:4003/
+- Wallet backend avaiable on http://localhost:3003/

packages/wallet/src/components/Menu.tsx

@@ -122,7 +122,7 @@ export const Menu = () => {
                         <Disclosure as="div" key={name} className="space-y-1">
                           {({ open }) => (
                             <>
-                              <Disclosure.Button className="flex w-full items-center justify-between text-xl text-brand-green-4">
+                              <Disclosure.Button className="flex w-full items-center justify-between text-xl text-brand-green-4 outline-none">
                                 <div className="flex space-x-4">
                                   <Icon className="h-8 w-8 text-brand-green-3" />
                                   <span className="flex-1">{name}</span>
@@ -140,6 +140,7 @@ export const Menu = () => {
                                     as={Link}
                                     href={children.href}
                                     className="flex items-center space-x-4 pl-12 text-lg font-light text-brand-green-4"
+                                    onClick={() => setSidebarIsOpen(false)}
                                   >
                                     {children.name}
                                   </Disclosure.Button>
@@ -152,7 +153,7 @@ export const Menu = () => {
                         <Link
                           key={name}
                           href={href}
-                          className="font-tight flex items-center space-x-4 text-xl text-brand-green-4"
+                          className="flex items-center space-x-4 text-xl text-brand-green-4"
                         >
                           <Icon className="h-8 w-8 text-brand-green-3" />
                           <span>{name}</span>

packages/wallet/src/components/kyc/PersonalDetailsForm.tsx

@@ -1,3 +1,4 @@
+import { Button } from '@/ui/Button'
 import { Form, useZodForm } from '@/ui/forms/Form'
 import { Input } from '@/ui/forms/Input'
 import { Select } from '@/ui/forms/Select'
@@ -13,10 +14,12 @@ type PersonalDetailsProps = {
 }
 
 const personalDetailsSchema = z.object({
-  firstName: z.string(),
-  lastName: z.string(),
+  firstName: z.string().min(3),
+  lastName: z.string().min(3),
   country: z.string(),
-  address: z.string()
+  address: z.string().min(3),
+  dateOfBirth: z.coerce.date(),
+  phone: z.coerce.number()
 })
 
 export const PersonalDetailsForm = ({ countries }: PersonalDetailsProps) => {
@@ -58,6 +61,22 @@ export const PersonalDetailsForm = ({ countries }: PersonalDetailsProps) => {
         error={personalDetailsForm.formState.errors.address?.message}
         label="Address"
       />
+      <Input
+        required
+        {...personalDetailsForm.register('phone')}
+        error={personalDetailsForm.formState.errors.phone?.message}
+        label="Phone"
+      />
+      <Input
+        required
+        {...personalDetailsForm.register('dateOfBirth')}
+        type="date"
+        error={personalDetailsForm.formState.errors.dateOfBirth?.message}
+        label="Date of birth"
+      />
+      <Button aria-label="Get Wallet Account" type="submit">
+        Get Wallet Account
+      </Button>
     </Form>
   )
 }

packages/wallet/src/components/kyc/Tabs.tsx

@@ -2,7 +2,7 @@ import { Tab } from '@headlessui/react'
 import { cx } from 'class-variance-authority'
 import { useKYCFormContext } from './context'
 import Image from 'next/image'
-import { IdentificationForm } from './IdentificationForm'
+import { VerifyIdentityForm } from './VerifyIdentityForm'
 import { PersonalDetailsForm } from './PersonalDetailsForm'
 import { Play } from '../icons/Play'
 import { Button } from '@/ui/Button'
@@ -35,7 +35,7 @@ const tabs = [
     name: 'ID proof',
     id: 'id',
     title: 'Choose document type',
-    contentForm: <IdentificationForm />,
+    contentForm: <VerifyIdentityForm />,
     imageMobile: 'id-kyc.webp'
   },
   {