From df40cad74e9ad40c7c7c200bc27c8dc98e830d55 Mon Sep 17 00:00:00 2001 From: Andrzej Date: Mon, 22 Apr 2024 16:13:18 +0200 Subject: [PATCH 01/10] Adjust stepper --- .../src/components/icons/ClockIcon.tsx | 10 + .../frontend/src/components/icons/index.ts | 1 + .../src/components/stepper/Stepper.tsx | 252 ++++++++++++++++++ .../userActious/UserActionSection.tsx | 6 +- .../gitcoin/CheckingGitcoinScore.tsx | 16 ++ .../userActious/gitcoin/GitcointFlow.tsx | 5 +- packages/frontend/src/styles/colors.ts | 1 + 7 files changed, 287 insertions(+), 4 deletions(-) create mode 100644 packages/frontend/src/components/icons/ClockIcon.tsx create mode 100644 packages/frontend/src/components/stepper/Stepper.tsx create mode 100644 packages/frontend/src/components/userActious/gitcoin/CheckingGitcoinScore.tsx diff --git a/packages/frontend/src/components/icons/ClockIcon.tsx b/packages/frontend/src/components/icons/ClockIcon.tsx new file mode 100644 index 00000000..2b33d745 --- /dev/null +++ b/packages/frontend/src/components/icons/ClockIcon.tsx @@ -0,0 +1,10 @@ +import { IconProps } from '@/components/icons/IconBase' + +export const ClockIcon = ({ color, size, className }: IconProps) => { + return ( + + + + + ) +} diff --git a/packages/frontend/src/components/icons/index.ts b/packages/frontend/src/components/icons/index.ts index c8d3b9d7..8aa3e594 100644 --- a/packages/frontend/src/components/icons/index.ts +++ b/packages/frontend/src/components/icons/index.ts @@ -13,3 +13,4 @@ export * from './Logo' export * from './RedirectIcon' export * from './SearchIcon' export * from './TruefiLogoIcon' +export * from './ClockIcon' diff --git a/packages/frontend/src/components/stepper/Stepper.tsx b/packages/frontend/src/components/stepper/Stepper.tsx new file mode 100644 index 00000000..b07a8936 --- /dev/null +++ b/packages/frontend/src/components/stepper/Stepper.tsx @@ -0,0 +1,252 @@ +import { Colors } from '@/styles/colors' +import styled from 'styled-components' +import { ClockIcon, CrossIcon } from '../icons' + +interface StepContent { + name: string + description?: string +} + +type StepDescription = 'default' | 'failed' + +type Step = Record + +type Steps = Step[] + +const stepsDefault: Steps = [ + { + default: { + name: `test`, + description: `desc`, + }, + failed: { + name: 'Failed', + description: 'fail.', + }, + }, + { + default: { + name: 'Finalized', + }, + failed: { + name: 'Failed', + description: 'Transaction failed.', + }, + }, + { + default: { + name: 'third', + description: 'The transaction has been confirmed on the blockchain.', + }, + failed: { + name: 'Failed', + description: 'Transaction failed.', + }, + }, + { + default: { + name: 'quatro', + description: 'The transaction has been confirmed on the blockchain.', + }, + failed: { + name: 'Failed', + description: 'Transaction failed.', + }, + }, +] + +type StepType = 'neutral' | 'success' | 'failure' + + +export interface StepperProps { + steps?: Steps + currentStep: number + isFailed: boolean +} + + +export const TransactionStepper = ({ currentStep, isFailed, steps = stepsDefault }: StepperProps) => ( + + + + Checking your score + + + + {steps.map((item, index) => { + const isCurrent = index === currentStep + const status = isCurrent ? 'current' : index < currentStep ? 'completed' : 'next' + const { step, type } = pickStepVersion(item, isFailed && isCurrent, isCurrent) + return + })} + + +) + +function pickStepVersion(item: Step, IsFailed: boolean, isCurrent: boolean) { + const [step, type]: [StepContent, StepType] = + item.failed && IsFailed ? [item.failed, 'failure'] : [item.default, isCurrent ? 'neutral' : 'success'] + return { step, type } +} + +type StepStatus = 'current' | 'completed' | 'next' + +interface ListItemProps { + step: StepContent + status: StepStatus + type: StepType +} + +const StepperListItem = ({ step, status, type }: ListItemProps) => ( + + + {type === 'failure' && } + + {step.name} + {step.description} + +) + +const Row = styled.div` + display: flex; + flex-direction: row; + align-items: center; + margin-bottom: 24px; + gap: 16px; +` + +const StepperContainer = styled.div` + display: flex; + flex-direction: column; + padding: 82px 20px 82px 0; +` +const StepperHeader = styled.h3` + color: ${Colors.Black}; +` + +const StepperList = styled.ul` + display: flex; + flex-direction: column; + padding: 0; +` + +function getItemColor(props: DisplayTypeProps) { + switch (props.status) { + case 'current': + switch (props.type) { + case 'neutral': + return Colors.Black + case 'success': + return Colors.Black + case 'failure': + return Colors.RedDark + } + default: + return Colors.Black + } +} + +const StepperListItemContainer = styled.li` + display: grid; + position: relative; + grid-template-areas: + 'icon header' + 'icon description'; + grid-template-columns: 18px auto; + grid-column-gap: 12px; + grid-row-gap: 4px; + margin-top: 36px; + color: ${getItemColor}; + transition: all 0.25s ease; + + &:before { + content: ''; + position: absolute; + left: 9px; + top: 17px; + width: 0px; + border-left: 2px ${({ status }) => (status === 'completed' ? 'solid' : 'dashed')} ${Colors.Black}; + height: calc(100% + 19px); + transform: translateX(-50%); + pointer-events: none; + } + + &:first-child { + margin-top: 0px; + } + + &:last-child { + &:before { + content: unset; + } + } +` +interface DisplayTypeProps { + type: StepType + status: StepStatus +} + +const StepperBullet = styled.div` + grid-area: icon; + display: flex; + align-items: center; + width: 17px; + height: 17px; + border: 2px solid currentColor; + border-radius: 50%; + background-color: ${({ type, status }) => { + switch (status) { + case 'current': + switch (type) { + case 'neutral': + return Colors.Black + case 'failure': + return Colors.White + case 'success': + return Colors.Black + } + case 'completed': + return Colors.Black + default: + return Colors.White + } + }}; + + color: ${({ type, status }) => { + switch (status) { + case 'current': + switch (type) { + case 'neutral': + return Colors.Black + case 'failure': + return Colors.RedDark + case 'success': + return Colors.Black + } + break + case 'completed': + return Colors.Black + default: + return Colors.Black + } + }}; +` + +const StepperItemName = styled.span` + grid-area: header; + font-size: 16px; + line-height: 1; + font-weight: 600; + color: inherit; +` + +interface ItemDescriptionProps { + current?: boolean +} + +const StepperItemDescription = styled.span` + grid-area: description; + color: ${Colors.Black}; + opacity: ${(props) => (props.current ? 1 : 0.7)}; + transition: all 0.25s ease; +` diff --git a/packages/frontend/src/components/userActious/UserActionSection.tsx b/packages/frontend/src/components/userActious/UserActionSection.tsx index 9c8ea29f..f0d37355 100644 --- a/packages/frontend/src/components/userActious/UserActionSection.tsx +++ b/packages/frontend/src/components/userActious/UserActionSection.tsx @@ -1,4 +1,4 @@ -import { AuctionState, useAuctionState } from '@/blockchain/hooks/useAuctionState' +import { AuctionState } from '@/blockchain/hooks/useAuctionState' import { Colors } from '@/styles/colors' import { ReactElement } from 'react' import styled from 'styled-components' @@ -19,7 +19,7 @@ const UserActions: Record ReactElement> = { } export const UserActionSection = () => { - const state = useAuctionState() + const state = 'GitcoinFlow' if (!state) { return } @@ -38,7 +38,7 @@ const Wrapper = styled.div` margin-left: -170px; width: 724px; height: 450px; - background-color: ${Colors.Blue}; + background-color: ${Colors.Pink}; position: relative; z-index: 1; ` diff --git a/packages/frontend/src/components/userActious/gitcoin/CheckingGitcoinScore.tsx b/packages/frontend/src/components/userActious/gitcoin/CheckingGitcoinScore.tsx new file mode 100644 index 00000000..e912f114 --- /dev/null +++ b/packages/frontend/src/components/userActious/gitcoin/CheckingGitcoinScore.tsx @@ -0,0 +1,16 @@ +import styled from 'styled-components' +import { FormWrapper } from '../../form' +import { TransactionStepper } from '@/components/stepper/Stepper' + +export const CheckGitcoinScore = () => { + return ( + + + + ) +} + +const ConnectFormWrapper = styled(FormWrapper)` + justify-content: center; + padding: 0 143px; +` diff --git a/packages/frontend/src/components/userActious/gitcoin/GitcointFlow.tsx b/packages/frontend/src/components/userActious/gitcoin/GitcointFlow.tsx index 809a5319..6d8d7408 100644 --- a/packages/frontend/src/components/userActious/gitcoin/GitcointFlow.tsx +++ b/packages/frontend/src/components/userActious/gitcoin/GitcointFlow.tsx @@ -1,5 +1,6 @@ import { useState } from 'react' import { CheckGitcoinPassword } from './CheckGitcoinPassword' +import { CheckGitcoinScore } from './CheckingGitcoinScore' enum GitcoinState { INITIAL_PAGE, @@ -9,12 +10,14 @@ enum GitcoinState { } export const GitcoinFlow = () => { - const [gitcoinState] = useState(GitcoinState.INITIAL_PAGE) + const [gitcoinState] = useState(GitcoinState.CHECKING_SCORE) switch (gitcoinState) { case GitcoinState.INITIAL_PAGE: return + case GitcoinState.CHECKING_SCORE: + return default: return } diff --git a/packages/frontend/src/styles/colors.ts b/packages/frontend/src/styles/colors.ts index 1ab65c2f..c1fd27c1 100644 --- a/packages/frontend/src/styles/colors.ts +++ b/packages/frontend/src/styles/colors.ts @@ -16,6 +16,7 @@ export const Colors = { Transparent: 'transparent', Porcelain: '#E7EAF3', Mystic: '#D0D6E6', + Pink: '#FADAFA', } export const hexOpacity = (color: string, opacity: number) => { From b5405a01b0be5c86f15eecfa1fcb3df825606ab6 Mon Sep 17 00:00:00 2001 From: Andrzej Date: Mon, 22 Apr 2024 16:13:39 +0200 Subject: [PATCH 02/10] Lint --- .../frontend/src/components/icons/ClockIcon.tsx | 15 +++++++++++++-- .../frontend/src/components/stepper/Stepper.tsx | 2 -- .../userActious/gitcoin/CheckingGitcoinScore.tsx | 10 +++++----- .../userActious/gitcoin/GitcointFlow.tsx | 2 +- 4 files changed, 19 insertions(+), 10 deletions(-) diff --git a/packages/frontend/src/components/icons/ClockIcon.tsx b/packages/frontend/src/components/icons/ClockIcon.tsx index 2b33d745..3af0c436 100644 --- a/packages/frontend/src/components/icons/ClockIcon.tsx +++ b/packages/frontend/src/components/icons/ClockIcon.tsx @@ -2,9 +2,20 @@ import { IconProps } from '@/components/icons/IconBase' export const ClockIcon = ({ color, size, className }: IconProps) => { return ( - + - + ) } diff --git a/packages/frontend/src/components/stepper/Stepper.tsx b/packages/frontend/src/components/stepper/Stepper.tsx index b07a8936..8306c23d 100644 --- a/packages/frontend/src/components/stepper/Stepper.tsx +++ b/packages/frontend/src/components/stepper/Stepper.tsx @@ -57,14 +57,12 @@ const stepsDefault: Steps = [ type StepType = 'neutral' | 'success' | 'failure' - export interface StepperProps { steps?: Steps currentStep: number isFailed: boolean } - export const TransactionStepper = ({ currentStep, isFailed, steps = stepsDefault }: StepperProps) => ( diff --git a/packages/frontend/src/components/userActious/gitcoin/CheckingGitcoinScore.tsx b/packages/frontend/src/components/userActious/gitcoin/CheckingGitcoinScore.tsx index e912f114..32bc88db 100644 --- a/packages/frontend/src/components/userActious/gitcoin/CheckingGitcoinScore.tsx +++ b/packages/frontend/src/components/userActious/gitcoin/CheckingGitcoinScore.tsx @@ -3,11 +3,11 @@ import { FormWrapper } from '../../form' import { TransactionStepper } from '@/components/stepper/Stepper' export const CheckGitcoinScore = () => { - return ( - - - - ) + return ( + + + + ) } const ConnectFormWrapper = styled(FormWrapper)` diff --git a/packages/frontend/src/components/userActious/gitcoin/GitcointFlow.tsx b/packages/frontend/src/components/userActious/gitcoin/GitcointFlow.tsx index 6d8d7408..bc537f18 100644 --- a/packages/frontend/src/components/userActious/gitcoin/GitcointFlow.tsx +++ b/packages/frontend/src/components/userActious/gitcoin/GitcointFlow.tsx @@ -17,7 +17,7 @@ export const GitcoinFlow = () => { return case GitcoinState.CHECKING_SCORE: - return + return default: return } From 2b033b06dcbe56dd92d8cb646d283c9c57135053 Mon Sep 17 00:00:00 2001 From: Andrzej Date: Mon, 22 Apr 2024 16:42:34 +0200 Subject: [PATCH 03/10] Move text to CheckGitcoinScore --- .../frontend/src/components/form/Form.tsx | 8 +- .../src/components/stepper/Stepper.tsx | 102 ++++-------------- .../gitcoin/CheckingGitcoinScore.tsx | 54 +++++++++- 3 files changed, 77 insertions(+), 87 deletions(-) diff --git a/packages/frontend/src/components/form/Form.tsx b/packages/frontend/src/components/form/Form.tsx index 2ce767f1..2cc74c13 100644 --- a/packages/frontend/src/components/form/Form.tsx +++ b/packages/frontend/src/components/form/Form.tsx @@ -18,15 +18,15 @@ export const FormRow = styled.div` justify-content: space-between; align-items: center; width: 100%; - color: ${Colors.White}; + color: ${Colors.Black}; ` export const FormHeading = styled.h2` - color: ${Colors.White}; + color: ${Colors.Black}; ` export const FormSubHeading = styled.h3` - color: ${Colors.White}; + color: ${Colors.Black}; ` export const FormWrapper = styled.div` @@ -49,5 +49,5 @@ export const FormWideWrapper = styled(FormSectionWrapper)` export const FormText = styled.p` max-width: 440px; - color: ${Colors.White}; + color: ${Colors.Black}; ` diff --git a/packages/frontend/src/components/stepper/Stepper.tsx b/packages/frontend/src/components/stepper/Stepper.tsx index 8306c23d..10c069ac 100644 --- a/packages/frontend/src/components/stepper/Stepper.tsx +++ b/packages/frontend/src/components/stepper/Stepper.tsx @@ -1,6 +1,6 @@ import { Colors } from '@/styles/colors' import styled from 'styled-components' -import { ClockIcon, CrossIcon } from '../icons' +import { CrossIcon } from '../icons' interface StepContent { name: string @@ -13,72 +13,23 @@ type Step = Record type Steps = Step[] -const stepsDefault: Steps = [ - { - default: { - name: `test`, - description: `desc`, - }, - failed: { - name: 'Failed', - description: 'fail.', - }, - }, - { - default: { - name: 'Finalized', - }, - failed: { - name: 'Failed', - description: 'Transaction failed.', - }, - }, - { - default: { - name: 'third', - description: 'The transaction has been confirmed on the blockchain.', - }, - failed: { - name: 'Failed', - description: 'Transaction failed.', - }, - }, - { - default: { - name: 'quatro', - description: 'The transaction has been confirmed on the blockchain.', - }, - failed: { - name: 'Failed', - description: 'Transaction failed.', - }, - }, -] - type StepType = 'neutral' | 'success' | 'failure' -export interface StepperProps { - steps?: Steps +interface StepperProps { + steps: Steps currentStep: number isFailed: boolean } -export const TransactionStepper = ({ currentStep, isFailed, steps = stepsDefault }: StepperProps) => ( - - - - Checking your score - - - - {steps.map((item, index) => { - const isCurrent = index === currentStep - const status = isCurrent ? 'current' : index < currentStep ? 'completed' : 'next' - const { step, type } = pickStepVersion(item, isFailed && isCurrent, isCurrent) - return - })} - - +export const TransactionStepper = ({ currentStep, isFailed, steps }: StepperProps) => ( + + {steps.map((item, index) => { + const isCurrent = index === currentStep + const status = isCurrent ? 'current' : index < currentStep ? 'completed' : 'next' + const { step, type } = pickStepVersion(item, isFailed && isCurrent, isCurrent) + return + })} + ) function pickStepVersion(item: Step, IsFailed: boolean, isCurrent: boolean) { @@ -100,32 +51,16 @@ const StepperListItem = ({ step, status, type }: ListItemProps) => ( {type === 'failure' && } - {step.name} + {step.name} {step.description} ) -const Row = styled.div` - display: flex; - flex-direction: row; - align-items: center; - margin-bottom: 24px; - gap: 16px; -` - -const StepperContainer = styled.div` - display: flex; - flex-direction: column; - padding: 82px 20px 82px 0; -` -const StepperHeader = styled.h3` - color: ${Colors.Black}; -` - const StepperList = styled.ul` display: flex; flex-direction: column; padding: 0; + margin: 0; ` function getItemColor(props: DisplayTypeProps) { @@ -197,7 +132,7 @@ const StepperBullet = styled.div` case 'current': switch (type) { case 'neutral': - return Colors.Black + return Colors.White case 'failure': return Colors.White case 'success': @@ -230,12 +165,17 @@ const StepperBullet = styled.div` }}; ` -const StepperItemName = styled.span` +interface ItemNameProps { + next?: boolean +} + +const StepperItemName = styled.span` grid-area: header; font-size: 16px; line-height: 1; font-weight: 600; color: inherit; + opacity: ${(props) => (props.next ? 0.7 : 1)}; ` interface ItemDescriptionProps { diff --git a/packages/frontend/src/components/userActious/gitcoin/CheckingGitcoinScore.tsx b/packages/frontend/src/components/userActious/gitcoin/CheckingGitcoinScore.tsx index 32bc88db..482189bc 100644 --- a/packages/frontend/src/components/userActious/gitcoin/CheckingGitcoinScore.tsx +++ b/packages/frontend/src/components/userActious/gitcoin/CheckingGitcoinScore.tsx @@ -1,16 +1,66 @@ import styled from 'styled-components' -import { FormWrapper } from '../../form' +import { FormRow, FormWrapper } from '../../form' import { TransactionStepper } from '@/components/stepper/Stepper' +import { Colors } from '@/styles/colors' +import { ClockIcon } from '@/components/icons' +import { Button } from '@/components/buttons' + +const gitcoinScoreSteps = [ + { + default: { + name: `Send request`, + }, + failed: { + name: 'Request failed', + }, + }, + { + default: { + name: 'Sign the message', + }, + failed: { + name: 'Signing message failed', + }, + }, + { + default: { + name: 'Obtaining the score', + }, + failed: { + name: 'Obtaining the score failed', + }, + }, +] export const CheckGitcoinScore = () => { return ( - + + + Checking Your Score + + + It will take about 1 minute. Please stay on this page. + + + ) } const ConnectFormWrapper = styled(FormWrapper)` justify-content: center; + gap: 16px; padding: 0 143px; ` + +const Row = styled.div` + display: flex; + flex-direction: row; + align-items: center; + gap: 16px; +` + +const StepperHeader = styled.h3` + color: ${Colors.Black}; +` From c50335b305b0965e61de9100afbd3bae0e28b7e3 Mon Sep 17 00:00:00 2001 From: Andrzej Date: Mon, 22 Apr 2024 16:42:58 +0200 Subject: [PATCH 04/10] Revert useAuctionState --- .../frontend/src/components/userActious/UserActionSection.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/frontend/src/components/userActious/UserActionSection.tsx b/packages/frontend/src/components/userActious/UserActionSection.tsx index f0d37355..9d033496 100644 --- a/packages/frontend/src/components/userActious/UserActionSection.tsx +++ b/packages/frontend/src/components/userActious/UserActionSection.tsx @@ -1,4 +1,4 @@ -import { AuctionState } from '@/blockchain/hooks/useAuctionState' +import { AuctionState, useAuctionState } from '@/blockchain/hooks/useAuctionState' import { Colors } from '@/styles/colors' import { ReactElement } from 'react' import styled from 'styled-components' @@ -19,7 +19,7 @@ const UserActions: Record ReactElement> = { } export const UserActionSection = () => { - const state = 'GitcoinFlow' + const state = useAuctionState() if (!state) { return } From 41eb3744816b22c3e3a90cdffb71ba364fe81076 Mon Sep 17 00:00:00 2001 From: Andrzej Date: Tue, 23 Apr 2024 11:31:18 +0200 Subject: [PATCH 05/10] Get rid of nestes switch --- .../frontend/src/components/stepper/Stepper.tsx | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/packages/frontend/src/components/stepper/Stepper.tsx b/packages/frontend/src/components/stepper/Stepper.tsx index 10c069ac..3cb78de7 100644 --- a/packages/frontend/src/components/stepper/Stepper.tsx +++ b/packages/frontend/src/components/stepper/Stepper.tsx @@ -66,19 +66,18 @@ const StepperList = styled.ul` function getItemColor(props: DisplayTypeProps) { switch (props.status) { case 'current': - switch (props.type) { - case 'neutral': - return Colors.Black - case 'success': - return Colors.Black - case 'failure': - return Colors.RedDark - } + return currentItemToColor[props.type] default: return Colors.Black } } +const currentItemToColor: Record = { + neutral: Colors.Black, + success: Colors.Black, + failure: Colors.RedDark, +} + const StepperListItemContainer = styled.li` display: grid; position: relative; From f4d3d279d4fd4dc83db7e11a88011b25582e000d Mon Sep 17 00:00:00 2001 From: Andrzej Date: Tue, 23 Apr 2024 11:37:06 +0200 Subject: [PATCH 06/10] Remove rest of nestes switches --- .../src/components/stepper/Stepper.tsx | 35 +++++++++---------- 1 file changed, 16 insertions(+), 19 deletions(-) diff --git a/packages/frontend/src/components/stepper/Stepper.tsx b/packages/frontend/src/components/stepper/Stepper.tsx index 3cb78de7..43ad94dd 100644 --- a/packages/frontend/src/components/stepper/Stepper.tsx +++ b/packages/frontend/src/components/stepper/Stepper.tsx @@ -66,13 +66,13 @@ const StepperList = styled.ul` function getItemColor(props: DisplayTypeProps) { switch (props.status) { case 'current': - return currentItemToColor[props.type] + return typeToItemToColor[props.type] default: return Colors.Black } } -const currentItemToColor: Record = { +const typeToItemToColor: Record = { neutral: Colors.Black, success: Colors.Black, failure: Colors.RedDark, @@ -129,14 +129,7 @@ const StepperBullet = styled.div` background-color: ${({ type, status }) => { switch (status) { case 'current': - switch (type) { - case 'neutral': - return Colors.White - case 'failure': - return Colors.White - case 'success': - return Colors.Black - } + return typeToBulletBackground[type] case 'completed': return Colors.Black default: @@ -147,15 +140,7 @@ const StepperBullet = styled.div` color: ${({ type, status }) => { switch (status) { case 'current': - switch (type) { - case 'neutral': - return Colors.Black - case 'failure': - return Colors.RedDark - case 'success': - return Colors.Black - } - break + return typeToBulletColor[type] case 'completed': return Colors.Black default: @@ -164,6 +149,18 @@ const StepperBullet = styled.div` }}; ` +const typeToBulletBackground: Record = { + neutral: Colors.White, + failure: Colors.White, + success: Colors.Black, +} + +const typeToBulletColor: Record = { + neutral: Colors.Black, + failure: Colors.RedDark, + success: Colors.Black, +} + interface ItemNameProps { next?: boolean } From f8128e842e583cb2d1f4d5883a650e8aee388974 Mon Sep 17 00:00:00 2001 From: Andrzej Date: Tue, 23 Apr 2024 11:37:30 +0200 Subject: [PATCH 07/10] Rename stepper --- packages/frontend/src/components/stepper/Stepper.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/frontend/src/components/stepper/Stepper.tsx b/packages/frontend/src/components/stepper/Stepper.tsx index 43ad94dd..21167c69 100644 --- a/packages/frontend/src/components/stepper/Stepper.tsx +++ b/packages/frontend/src/components/stepper/Stepper.tsx @@ -21,7 +21,7 @@ interface StepperProps { isFailed: boolean } -export const TransactionStepper = ({ currentStep, isFailed, steps }: StepperProps) => ( +export const Stepper = ({ currentStep, isFailed, steps }: StepperProps) => ( {steps.map((item, index) => { const isCurrent = index === currentStep From 21c7ec14f0c9344f9e7ba7602d01c7e12d17b221 Mon Sep 17 00:00:00 2001 From: Andrzej Date: Tue, 23 Apr 2024 11:38:29 +0200 Subject: [PATCH 08/10] Add continuous form to steps names --- .../userActious/gitcoin/CheckingGitcoinScore.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/frontend/src/components/userActious/gitcoin/CheckingGitcoinScore.tsx b/packages/frontend/src/components/userActious/gitcoin/CheckingGitcoinScore.tsx index 482189bc..163afb75 100644 --- a/packages/frontend/src/components/userActious/gitcoin/CheckingGitcoinScore.tsx +++ b/packages/frontend/src/components/userActious/gitcoin/CheckingGitcoinScore.tsx @@ -1,6 +1,6 @@ import styled from 'styled-components' import { FormRow, FormWrapper } from '../../form' -import { TransactionStepper } from '@/components/stepper/Stepper' +import { Stepper } from '@/components/stepper/Stepper' import { Colors } from '@/styles/colors' import { ClockIcon } from '@/components/icons' import { Button } from '@/components/buttons' @@ -8,7 +8,7 @@ import { Button } from '@/components/buttons' const gitcoinScoreSteps = [ { default: { - name: `Send request`, + name: `Sending request`, }, failed: { name: 'Request failed', @@ -16,7 +16,7 @@ const gitcoinScoreSteps = [ }, { default: { - name: 'Sign the message', + name: 'Signing the message', }, failed: { name: 'Signing message failed', @@ -42,7 +42,7 @@ export const CheckGitcoinScore = () => { It will take about 1 minute. Please stay on this page. - + ) From ee9d64bfe79511316d5fd3a605cd18cbb84d9394 Mon Sep 17 00:00:00 2001 From: Andrzej Date: Tue, 23 Apr 2024 11:39:31 +0200 Subject: [PATCH 09/10] Rename wrappers --- .../components/userActious/gitcoin/CheckGitcoinPassword.tsx | 6 +++--- .../components/userActious/gitcoin/CheckingGitcoinScore.tsx | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/frontend/src/components/userActious/gitcoin/CheckGitcoinPassword.tsx b/packages/frontend/src/components/userActious/gitcoin/CheckGitcoinPassword.tsx index c7b9fc15..0e87d7b9 100644 --- a/packages/frontend/src/components/userActious/gitcoin/CheckGitcoinPassword.tsx +++ b/packages/frontend/src/components/userActious/gitcoin/CheckGitcoinPassword.tsx @@ -5,7 +5,7 @@ import { SeparatorWithText } from '@/components/common/Separator' export const CheckGitcoinPassword = () => { return ( - + Check GitCoin Passport To place a bid we need to check your score. By verifying your score we checking if you are a human. @@ -18,11 +18,11 @@ export const CheckGitcoinPassword = () => { - + ) } -const ConnectFormWrapper = styled(FormWrapper)` +const Wrapper = styled(FormWrapper)` justify-content: center; padding: 0 143px; ` diff --git a/packages/frontend/src/components/userActious/gitcoin/CheckingGitcoinScore.tsx b/packages/frontend/src/components/userActious/gitcoin/CheckingGitcoinScore.tsx index 163afb75..1b994589 100644 --- a/packages/frontend/src/components/userActious/gitcoin/CheckingGitcoinScore.tsx +++ b/packages/frontend/src/components/userActious/gitcoin/CheckingGitcoinScore.tsx @@ -34,7 +34,7 @@ const gitcoinScoreSteps = [ export const CheckGitcoinScore = () => { return ( - + Checking Your Score @@ -44,11 +44,11 @@ export const CheckGitcoinScore = () => { - + ) } -const ConnectFormWrapper = styled(FormWrapper)` +const Wrapper = styled(FormWrapper)` justify-content: center; gap: 16px; padding: 0 143px; From f263e18de7ba1a95a3c3988f9b46dd3a5943deda Mon Sep 17 00:00:00 2001 From: Bartlomiej Tarczynski Date: Tue, 23 Apr 2024 13:17:47 +0200 Subject: [PATCH 10/10] Rename typeToItemToColor to typeToItemColor --- packages/frontend/src/components/stepper/Stepper.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/frontend/src/components/stepper/Stepper.tsx b/packages/frontend/src/components/stepper/Stepper.tsx index 21167c69..2fb43510 100644 --- a/packages/frontend/src/components/stepper/Stepper.tsx +++ b/packages/frontend/src/components/stepper/Stepper.tsx @@ -66,13 +66,13 @@ const StepperList = styled.ul` function getItemColor(props: DisplayTypeProps) { switch (props.status) { case 'current': - return typeToItemToColor[props.type] + return typeToItemColor[props.type] default: return Colors.Black } } -const typeToItemToColor: Record = { +const typeToItemColor: Record = { neutral: Colors.Black, success: Colors.Black, failure: Colors.RedDark,