From 9dd5085433bc201560bd2c8dbbe52a3f16452674 Mon Sep 17 00:00:00 2001 From: fabiolalombardim Date: Thu, 13 Jul 2023 22:23:37 +0200 Subject: [PATCH] modal & options added --- src/modules/common/SmallButton.tsx | 2 + .../explorer/components/ResponsiveDialog.tsx | 1 + .../User/components/DelegationBanner.tsx | 71 ++++++--- .../pages/User/components/DelegationModal.tsx | 146 ++++++++++++++++++ 4 files changed, 201 insertions(+), 19 deletions(-) create mode 100644 src/modules/explorer/pages/User/components/DelegationModal.tsx diff --git a/src/modules/common/SmallButton.tsx b/src/modules/common/SmallButton.tsx index 39d060bb..e3dd4d6b 100644 --- a/src/modules/common/SmallButton.tsx +++ b/src/modules/common/SmallButton.tsx @@ -7,6 +7,8 @@ export const SmallButton = styled(Button)({ "transition": ".15s ease-out", "textTransform": "capitalize", "borderRadius": 8, + "backgroundColor": "#81feb7 !important", + "color": "#1c1f23", "&$disabled": { boxShadow: "none" diff --git a/src/modules/explorer/components/ResponsiveDialog.tsx b/src/modules/explorer/components/ResponsiveDialog.tsx index eaddf628..7af33113 100644 --- a/src/modules/explorer/components/ResponsiveDialog.tsx +++ b/src/modules/explorer/components/ResponsiveDialog.tsx @@ -13,6 +13,7 @@ const TitleText = styled(Typography)(({ theme }) => ({ fontWeight: 550, lineHeight: ".80", textTransform: "capitalize", + fontSize: 20, [theme.breakpoints.down("sm")]: { fontSize: 18 } diff --git a/src/modules/explorer/pages/User/components/DelegationBanner.tsx b/src/modules/explorer/pages/User/components/DelegationBanner.tsx index 93813285..003447f4 100644 --- a/src/modules/explorer/pages/User/components/DelegationBanner.tsx +++ b/src/modules/explorer/pages/User/components/DelegationBanner.tsx @@ -1,6 +1,8 @@ -import React, { useState } from "react" +import React, { Fragment, useEffect, useState } from "react" import { Grid, Theme, Typography, styled } from "@material-ui/core" import { useDAO } from "services/services/dao/hooks/useDAO" +import { Edit } from "@material-ui/icons" +import { DelegationDialog } from "./DelegationModal" export enum DelegationsType { ACCEPTING_DELEGATION = "ACCEPTING_DELEGATION", @@ -8,10 +10,6 @@ export enum DelegationsType { DELEGATING = "DELEGATING" } -interface DelegationStatus { - status: DelegationsType.ACCEPTING_DELEGATION | DelegationsType.NOT_ACCEPTING_DELEGATION | DelegationsType.DELEGATING -} - const DelegationBox = styled(Grid)(({ theme }: { theme: Theme }) => ({ minHeight: "178px", padding: "46px 55px", @@ -33,26 +31,37 @@ const Balance = styled(Typography)({ fontWeight: 200 }) +export const matchTextToStatus = (value: DelegationsType | undefined) => { + switch (value) { + case DelegationsType.ACCEPTING_DELEGATION: + return "Accepting delegations" + case DelegationsType.NOT_ACCEPTING_DELEGATION: + return "Not currently accepting delegations or delegating" + case DelegationsType.DELEGATING: + return "Delegating to " + default: + return + } +} + export const Delegation: React.FC<{ voteWeight: any; daoId: string }> = ({ voteWeight, daoId }) => { const { data: dao } = useDAO(daoId) - const [delegationStatus, setDelegationStatus] = useState(DelegationsType.NOT_ACCEPTING_DELEGATION) + const [delegationStatus, setDelegationStatus] = useState( + DelegationsType.NOT_ACCEPTING_DELEGATION + ) + const [openModal, setOpenModal] = useState(false) - const matchTextToStatus = (value: DelegationsType) => { - switch (value) { - case DelegationsType.ACCEPTING_DELEGATION: - return "Accepting delegations" - case DelegationsType.NOT_ACCEPTING_DELEGATION: - return "Not currently accepting delegations or delegating" - case DelegationsType.DELEGATING: - return "Delegating to " - default: - return - } + const onCloseAction = () => { + setOpenModal(false) } + useEffect(() => { + console.log("se actualizó", delegationStatus) + }, [delegationStatus]) + return ( - + Off-chain Delegation @@ -67,9 +76,33 @@ export const Delegation: React.FC<{ voteWeight: any; daoId: string }> = ({ voteW )} - Delegation Status + + + Delegation Status + + + setOpenModal(true)} /> + setOpenModal(true)}> + Edit + + + {matchTextToStatus(delegationStatus)} + ) } diff --git a/src/modules/explorer/pages/User/components/DelegationModal.tsx b/src/modules/explorer/pages/User/components/DelegationModal.tsx new file mode 100644 index 00000000..b2859e71 --- /dev/null +++ b/src/modules/explorer/pages/User/components/DelegationModal.tsx @@ -0,0 +1,146 @@ +import { Grid, Radio, TextField, Typography, styled } from "@material-ui/core" +import React, { useEffect, useState } from "react" +import { DelegationsType, matchTextToStatus } from "./DelegationBanner" +import { ResponsiveDialog } from "modules/explorer/components/ResponsiveDialog" +import { SmallButton } from "modules/common/SmallButton" + +const AddressTextField = styled(TextField)({ + "backgroundColor": "#2f3438", + "borderRadius": 8, + "height": 56, + "padding": "0px 24px", + "alignItems": "flex-start", + "boxSizing": "border-box", + "justifyContent": "center", + "display": "flex", + "& .MuiInputBase-root": { + "width": "100%", + "& input": { + textAlign: "initial" + } + } +}) + +export enum ActionTypes { + ACCEPT_DELEGATIONS = "ACCEPT_DELEGATIONS", + DELEGATE = "DELEGATE", + CHANGE_DELEGATE = "CHANGE_DELEGATE", + STOP_ACCEPTING_DELEGATIONS = "STOP_ACCEPTING_DELEGATIONS", + STOP_DELEGATING = "STOP_DELEGATING" +} + +const matchTextToAction = (value: ActionTypes) => { + switch (value) { + case ActionTypes.ACCEPT_DELEGATIONS: + return "Accept Delegations" + case ActionTypes.DELEGATE: + return "Delegate" + case ActionTypes.CHANGE_DELEGATE: + return "Change Delegate" + case ActionTypes.STOP_ACCEPTING_DELEGATIONS: + return "Stop Accepting Delegations" + case ActionTypes.STOP_DELEGATING: + return "Stop Delegating" + default: + return + } +} + +export const DelegationDialog: React.FC<{ + open: boolean + onClose: () => void + status: DelegationsType | undefined + setDelegationStatus: (value: DelegationsType | undefined) => void +}> = ({ status, onClose, open, setDelegationStatus }) => { + const [options, setOptions] = useState([]) + const [selectedOption, setSelectedOption] = useState() + + useEffect(() => { + getOptionsByStatus(status) + }, [status]) + + const closeDialog = () => { + setSelectedOption(undefined) + onClose() + } + + const saveInfo = () => { + updateStatus() + closeDialog() + } + + const updateStatus = () => { + if (selectedOption === ActionTypes.DELEGATE || selectedOption === ActionTypes.CHANGE_DELEGATE) { + return setDelegationStatus(DelegationsType.DELEGATING) + } + if (selectedOption === ActionTypes.STOP_ACCEPTING_DELEGATIONS || ActionTypes.STOP_DELEGATING) { + return setDelegationStatus(DelegationsType.NOT_ACCEPTING_DELEGATION) + } + if (selectedOption === ActionTypes.ACCEPT_DELEGATIONS) { + return setDelegationStatus(DelegationsType.ACCEPTING_DELEGATION) + } + } + + const getOptionsByStatus = (status: DelegationsType | undefined) => { + switch (status) { + case DelegationsType.NOT_ACCEPTING_DELEGATION: + const optionsOne = [ActionTypes.ACCEPT_DELEGATIONS, ActionTypes.DELEGATE] + setOptions(optionsOne) + break + case DelegationsType.ACCEPTING_DELEGATION: + const optionsTwo = [ActionTypes.STOP_ACCEPTING_DELEGATIONS, ActionTypes.DELEGATE] + setOptions(optionsTwo) + break + case DelegationsType.DELEGATING: + const optionsThree = [ActionTypes.CHANGE_DELEGATE, ActionTypes.STOP_DELEGATING, ActionTypes.ACCEPT_DELEGATIONS] + setOptions(optionsThree) + break + } + } + + return ( + + + + Current Status + + {matchTextToStatus(status)} + + + + {options.map(item => { + return ( + <> + + {matchTextToAction(item)} + setSelectedOption(e.target.value)} + value={item} + name="radio-buttons" + inputProps={{ "aria-label": "A" }} + /> + {item === selectedOption && + (selectedOption === ActionTypes.DELEGATE || selectedOption === ActionTypes.CHANGE_DELEGATE) ? ( + + ) : null} + + + ) + })} + + + Submit + + + + ) +}