🎸 Add Gitcoin flow with first step (#23)

packages/frontend/src/blockchain/hooks/useAuctionState.ts

@@ -11,6 +11,7 @@ export type AuctionState =
   | 'AwaitingResults'
   | 'ClaimingFlow'
   | 'ClaimingClosed'
+  | 'GitcoinFlow'
 
 export enum ContractState {
   AWAITING_BIDDING,

packages/frontend/src/components/common/Separator.tsx

@@ -24,3 +24,21 @@ const SeparatorElement = styled(SeparatorPrimitive.Root)<SeparatorElementProps>`
     width: 1px;
   }
 `
+
+export const SeparatorWithText = ({ text }: { text: string }) => {
+  return (
+    <SeparatorWrapper>
+      <Separator color={Colors.Mystic} />
+      {text}
+      <Separator color={Colors.Mystic} />
+    </SeparatorWrapper>
+  )
+}
+
+const SeparatorWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
+  color: White;
+`

packages/frontend/src/components/userActious/UserActionSection.tsx

@@ -3,6 +3,7 @@ import { Colors } from '@/styles/colors'
 import { ReactElement } from 'react'
 import styled from 'styled-components'
 import { ConnectWalletWarning } from './ConnectWalletWarning'
+import { GitcoinFlow } from './gitcoin/GitcointFlow'
 
 const Placeholder = () => <div />
 
@@ -14,6 +15,7 @@ const UserActions: Record<AuctionState, () => ReactElement> = {
   AwaitingResults: Placeholder,
   ClaimingFlow: Placeholder,
   ClaimingClosed: Placeholder,
+  GitcoinFlow: GitcoinFlow,
 }
 
 export const UserActionSection = () => {

packages/frontend/src/components/userActious/gitcoin/CheckGitcoinPassword.tsx

@@ -0,0 +1,28 @@
+import styled from 'styled-components'
+import { FormHeading, FormRow, FormWrapper } from '../../form'
+import { Button } from '../../buttons'
+import { SeparatorWithText } from '@/components/common/Separator'
+
+export const CheckGitcoinPassword = () => {
+  return (
+    <ConnectFormWrapper>
+      <FormHeading>Check GitCoin Passport</FormHeading>
+      <FormRow>
+        <span>To place a bid we need to check your score. By verifying your score we checking if you are a human.</span>
+      </FormRow>
+      <Button wide>Check Score</Button>
+      <SeparatorWithText text="Or" />
+      <FormRow>
+        <span>
+          If you don’t have a <b>GitCoin Passport</b>, please create one.
+        </span>
+      </FormRow>
+      <Button wide>Create a Gitcoin Passport</Button>
+    </ConnectFormWrapper>
+  )
+}
+
+const ConnectFormWrapper = styled(FormWrapper)`
+  justify-content: center;
+  padding: 0 143px;
+`

packages/frontend/src/components/userActious/gitcoin/GitcointFlow.tsx

@@ -0,0 +1,21 @@
+import { useState } from 'react'
+import { CheckGitcoinPassword } from './CheckGitcoinPassword'
+
+enum GitcoinState {
+  INITIAL_PAGE,
+  CHECKING_SCORE,
+  YOU_DONT_HAVE_PASSPORT,
+  YOUR_SCORE,
+}
+
+export const GitcoinFlow = () => {
+  const [gitcoinState] = useState<GitcoinState>(GitcoinState.INITIAL_PAGE)
+
+  switch (gitcoinState) {
+    case GitcoinState.INITIAL_PAGE:
+      return <CheckGitcoinPassword />
+
+    default:
+      return <CheckGitcoinPassword />
+  }
+}

packages/frontend/src/styles/colors.ts

@@ -14,6 +14,8 @@ export const Colors = {
   RedDark: '#FF6666',
   RedLight: '#FFF7F7',
   Transparent: 'transparent',
+  Porcelain: '#E7EAF3',
+  Mystic: '#D0D6E6',
 }
 
 export const hexOpacity = (color: string, opacity: number) => {