Skip to content

Commit

Permalink
Merge pull request #614 from bandada-infra/fix/dashboard/create-oncha…
Browse files Browse the repository at this point in the history 
…in-group-step

fix: dashboard create on-chain group step
  • Loading branch information
@vplasencia
vplasencia authored Dec 4, 2024
2 parents 6afc828 + ffbacad commit 97cee97
Show file tree
Hide file tree
Showing 6 changed files with 86 additions and 57 deletions.
8 changes: 4 additions & 4 deletions apps/dashboard/src/components/group-card.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,16 +86,16 @@ export default function GroupCard({
mt="12px"
color={!name ? "balticSea.400" : "inherit"}
>
{name || "[untitled]"}
{name || (type === "off-chain" ? "[untitled]" : "")}
</Text>

<Text
mt="12px"
noOfLines={2}
color={!description ? "balticSea.300" : "balticSea.600"}
>
{type !== "on-chain" &&
(description || "[no description yet]")}
{type === "off-chain"
? description || "[no description yet]"
: null}
</Text>
</Box>

Expand Down
68 changes: 40 additions & 28 deletions apps/dashboard/src/components/new-group-stepper/general-info-step.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,24 @@ export default function GeneralInfoStep({
group.fingerprintDuration
)

const validateGroup = () => {
if (group.type === "off-chain") {
const isNameInvalid = !_groupName
const isDescriptionInvalid =
!_groupDescription || _groupDescription.length < 10
const isFingerprintDurationInvalid =
_fingerprintDuration === undefined || _fingerprintDuration < 0

return (
isNameInvalid ||
isDescriptionInvalid ||
isFingerprintDurationInvalid
)
}

return false
}

return (
<>
<Text>What type of group is this?</Text>
Expand Down Expand Up @@ -122,31 +140,33 @@ export default function GeneralInfoStep({
<Text color="balticSea.700" px="16px" py="10px">
{groupType === "on-chain"
? "The group will be fully decentralized and will live on the Ethereum blockchain."
: "The group will be stored in the Bandada servers but the fingerprint will still be stored on-chain."}
: "The group will be stored in the Bandada servers."}
</Text>
</VStack>
))}
</HStack>

<VStack align="left" pt="20px">
<Text>Name</Text>

<Input
size="lg"
value={_groupName ?? ""}
maxLength={31}
onChange={(event) => setGroupName(event.target.value)}
onBlur={() =>
onSubmit({ ...group, name: _groupName }, false)
}
/>
<Text fontSize="13px" color="balticSea.500">
Give it a cool name you can recognize.
</Text>
</VStack>

{group.type === "off-chain" && (
<>
<VStack align="left" pt="20px">
<Text>Name</Text>

<Input
size="lg"
value={_groupName ?? ""}
maxLength={31}
onChange={(event) =>
setGroupName(event.target.value)
}
onBlur={() =>
onSubmit({ ...group, name: _groupName }, false)
}
/>
<Text fontSize="13px" color="balticSea.500">
Give it a cool name you can recognize.
</Text>
</VStack>

<VStack align="left" pt="20px">
<Text>Description</Text>

Expand Down Expand Up @@ -242,18 +262,10 @@ export default function GeneralInfoStep({
Cancel
</Button>
<Button
isDisabled={
!group.type ||
!_groupName ||
(group.type === "off-chain" &&
(_fingerprintDuration === undefined ||
!_groupDescription ||
_groupDescription.length < 10)) ||
_fingerprintDuration < 0
}
isDisabled={validateGroup()}
variant="solid"
colorScheme="primary"
onClick={() => onSubmit()}
onClick={() => onSubmit(group)}
>
Continue
</Button>
Expand Down
58 changes: 37 additions & 21 deletions apps/dashboard/src/pages/new-group.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@ import GroupSizeStep from "../components/new-group-stepper/group-size-step"
import StepperNav from "../components/new-group-stepper/stepper-nav"
import StepperPreview from "../components/new-group-stepper/stepper-preview"

const steps = ["General info", "Group size", "Access mode", "Summary"]
const offchainSteps = ["General info", "Group size", "Access mode", "Summary"]
const onchainSteps = ["General info", "Summary"]

export default function NewGroupPage(): JSX.Element {
const [_currentStep, setCurrentStep] = useState<number>(0)
Expand All @@ -26,6 +27,10 @@ export default function NewGroupPage(): JSX.Element {
if (next) {
setCurrentStep((v) => v + 1)
}

if (group.type === "on-chain" && !next) {
setGroup({ type: "on-chain", fingerprintDuration: 3600 })
}
}, [])

const finalPreviewBack = useCallback(() => {
Expand All @@ -49,13 +54,16 @@ export default function NewGroupPage(): JSX.Element {
<StepperNav
index={_currentStep}
onChange={setCurrentStep}
steps={steps.filter(
(_step, i) => _group.type !== "on-chain" || i !== 2
)}
steps={
_group.type === "off-chain"
? offchainSteps
: onchainSteps
}
/>

<HStack w="100%" align="start">
{_group.type === "off-chain" && _currentStep !== 3 ? (
{(_group.type === "off-chain" && _currentStep !== 3) ||
(_group.type === "on-chain" && _currentStep !== 1) ? (
<>
<StepperPreview group={_group} />

Expand All @@ -67,27 +75,35 @@ export default function NewGroupPage(): JSX.Element {
flex="1"
align="left"
>
{_currentStep === 0 ? (
{_group.type === "off-chain" &&
(_currentStep === 0 ? (
<GeneralInfoStep
group={_group}
onSubmit={goToNextStep}
onBack={() => navigate("/groups")}
/>
) : _currentStep === 1 ? (
<GroupSizeStep
group={_group}
onSubmit={goToNextStep}
onBack={() => setCurrentStep(0)}
/>
) : (
_currentStep === 2 && (
<AccessModeStep
group={_group}
onSubmit={goToNextStep}
onBack={() => setCurrentStep(1)}
/>
)
))}

{_group.type === "on-chain" && (
<GeneralInfoStep
group={_group}
onSubmit={goToNextStep}
onBack={() => navigate("/groups")}
/>
) : _currentStep === 1 ? (
<GroupSizeStep
group={_group}
onSubmit={goToNextStep}
onBack={() => setCurrentStep(0)}
/>
) : (
_group.type !== "on-chain" &&
_currentStep === 2 && (
<AccessModeStep
group={_group}
onSubmit={goToNextStep}
onBack={() => setCurrentStep(1)}
/>
)
)}
</VStack>
</>
Expand Down
9 changes: 5 additions & 4 deletions apps/docs/docs/tutorials/dashboard/on-chain/onchain.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,12 @@ title: Create group

1. To create an on-chain group, select the `On-chain` group type.

![Create on-chain group](../../../../static/img/tutorial/create.png)
![Create on-chain group](../../../../static/img/tutorial/onchain.png)

2. You will be redirected to the `Group Preview` page upon selecting the `On-chain` type in the group type selection.
3. Unlike an off-chain group, you do not have to input any group details to create an on-chain group.
4. Click `Create Group` to finalize the group creation.
2. Unlike an off-chain group, you do not have to input any group details to create an on-chain group.
3. Click on `Continue` to proceed.
4. You will be redirected to the `Group Preview` page to reivew the group details.
5. Click `Create Group` to finalize the group creation.

![Create on-chain group preview](../../../../static/img/tutorial/onchain-preview.png)

Expand Down
Binary file modified apps/docs/static/img/tutorial/onchain-preview.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added apps/docs/static/img/tutorial/onchain.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 97cee97

Please sign in to comment.