Skip to content

Commit

Permalink
Merge pull request #580 from dOrgTech/develop
Browse files Browse the repository at this point in the history
Merge Develop to Master
  • Loading branch information
Man-Jain authored May 29, 2023
2 parents ad0e2dd + 4da8bdd commit 215252a
Show file tree
Hide file tree
Showing 21 changed files with 5,063 additions and 62 deletions.
3 changes: 2 additions & 1 deletion src/modules/common/Toolbar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ import { ChangeNetworkButton } from "./ChangeNetworkButton"

import { ArrowBackIos } from "@material-ui/icons"
import { EnvKey, getEnv } from "services/config"
import { networkNameMap } from "services/bakingBad"

const AddressMenu = styled(Box)(() => ({
width: 264,
Expand All @@ -39,7 +40,7 @@ const AddressMenuItem = styled(Grid)(({ theme }) => ({
cursor: "pointer",
boxSizing: "border-box",
color: theme.palette.text.secondary,
padding: "20px 3px"
padding: "15px 10px"
}))

const AddressMenuIcon = styled(Grid)({
Expand Down
4 changes: 4 additions & 0 deletions src/modules/creator/deployment/router.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { ConfigContract } from "./steps/Config"
import { ContractDistribution } from "./steps/Distribution"
import { ContractSummary } from "./steps/Summary"
import { Ownership } from "./steps/Ownership"
import { Success } from "./steps/Success"

export const TokenDeploymentRouter = (): JSX.Element => {
const match = useRouteMatch()
Expand All @@ -26,6 +27,9 @@ export const TokenDeploymentRouter = (): JSX.Element => {
<Route path={`${match.url}/summary`}>
<ContractSummary />
</Route>
<Route path={`${match.url}/success`}>
<Success />
</Route>
<Redirect to={`${match.url}/ownership`} />
</Switch>
)
Expand Down
4 changes: 3 additions & 1 deletion src/modules/creator/deployment/state/context.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React, { createContext, useReducer, Dispatch, useMemo } from "react"
import useLocalStorage from "modules/common/hooks/useLocalStorage"
import { DeploymentAction, DeploymentState, TokenContractParams, ActionTypes } from "./types"
import BigNumber from "bignumber.js"

const deploymentStatus = {
deploying: false,
Expand All @@ -24,7 +25,8 @@ export const INITIAL_TOKEN_STATE: TokenContractParams = {
walletAddress: "",
amount: null
}
]
],
totalAmount: new BigNumber(0)
}
}

Expand Down
2 changes: 2 additions & 0 deletions src/modules/creator/deployment/state/types.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import BigNumber from "bignumber.js"
import { NavigationBarProps } from "modules/creator/state/types"

export type TokenContractSettings = {
Expand All @@ -11,6 +12,7 @@ export type TokenContractSettings = {

export type TokenDistributionSettings = {
holders: Holder[]
totalAmount: BigNumber
}

export type Holder = {
Expand Down
3 changes: 3 additions & 0 deletions src/modules/creator/deployment/steps/Config.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import { ActionTypes, TokenContractSettings } from "../state/types"
import { TextField as FormikTextField } from "formik-material-ui"
import { SmallButton } from "modules/common/SmallButton"
import { TitleBlock } from "modules/common/TitleBlock"
import { FieldChange, handleChange, handleNegativeInput } from "modules/creator/utils"

const ButtonContainer = styled(Grid)({
marginTop: 40
Expand Down Expand Up @@ -179,6 +180,7 @@ const TokenSettingsForm = ({ submitForm, values, errors, touched, setFieldValue,
placeholder="Supply"
name="totalSupply"
component={CustomFormikTextField}
onKeyDown={(e: FieldChange) => handleNegativeInput(e)}
/>
</CustomInputContainer>
{errors.totalSupply && touched.totalSupply ? <ErrorText>{errors.totalSupply}</ErrorText> : null}
Expand All @@ -195,6 +197,7 @@ const TokenSettingsForm = ({ submitForm, values, errors, touched, setFieldValue,
placeholder="Decimals"
name="decimals"
component={CustomFormikTextField}
onKeyDown={(e: FieldChange) => handleChange(e)}
/>
</CustomInputContainer>
{errors.decimals && touched.decimals ? <ErrorText>{errors.decimals}</ErrorText> : null}
Expand Down
65 changes: 50 additions & 15 deletions src/modules/creator/deployment/steps/Distribution.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ import { parseUnits } from "services/contracts/utils"
import { numberWithCommas } from "../state/utils"
import { useNotification } from "modules/common/hooks/useNotification"
import { TitleBlock } from "modules/common/TitleBlock"
import { useTezos } from "services/beacon/hooks/useTezos"
import { FieldChange, handleNegativeInput } from "modules/creator/utils"

const SupplyContainer = styled(Grid)(({ theme }) => ({
background: theme.palette.primary.dark,
Expand Down Expand Up @@ -65,18 +67,47 @@ const CustomInputContainer = styled(Grid)(({ theme }) => ({
width: "100%"
}))

const CustomAmountContainer = styled(Grid)(({ theme }) => ({
height: 54,
boxSizing: "border-box",
marginTop: 14,
background: "#2F3438",
borderRadius: 8,
alignItems: "center",
display: "flex",
padding: "13px 23px",
width: "40%",
[theme.breakpoints.down("sm")]: {
width: "100%"
}
}))

const ErrorText = styled(Typography)({
fontSize: 14,
color: "red"
})

const hasDuplicates = (options: Holder[]) => {
const trimOptions = options.map(option => option.walletAddress.trim())
return new Set(trimOptions).size !== trimOptions.length
}

const validateForm = (values: TokenDistributionSettings) => {
const errors: FormikErrors<TokenDistributionSettings> = {}

values.holders.forEach((holder: Holder, index: number) => {
if (!values.holders[index].walletAddress || values.holders[index].amount === null) {
if (values.holders[index].walletAddress && !values.holders[index].amount) {
errors.holders = "Required"
}
if (!values.holders[index].walletAddress && values.holders[index].amount) {
errors.holders = "Required"
}
if (values.holders.length > 0 && hasDuplicates(values.holders)) {
errors.holders = "Duplicate wallets are not allowed"
}
if (values.totalAmount && values.totalAmount.minus(new BigNumber(getTotal(values.holders))) < new BigNumber(0)) {
errors.totalAmount = "Available balance has to be greater that the total supply"
}
})

return errors
Expand Down Expand Up @@ -136,14 +167,15 @@ const TokenSettingsForm = ({ submitForm, values, errors, touched, setFieldValue,
/>
</CustomInputContainer>

<CustomInputContainer>
<CustomAmountContainer>
<Field
type="number"
name={`holders.[${index}].amount`}
placeholder={`Amount`}
component={CustomFormikTextField}
onKeyDown={(e: FieldChange) => handleNegativeInput(e)}
/>
</CustomInputContainer>
</CustomAmountContainer>

{index !== 0 ? (
<RemoveButton
Expand Down Expand Up @@ -199,26 +231,24 @@ export const ContractDistribution: React.FC = () => {
const { state, dispatch, updateCache } = useContext(DeploymentContext)
const { tokenDistribution, tokenSettings } = state.data
const history = useHistory()
const openNotification = useNotification()
const { account } = useTezos()

const theme = useTheme()
const isMobile = useMediaQuery(theme.breakpoints.down("sm"))

const totalAmount = parseUnits(new BigNumber(Number(tokenSettings.totalSupply)), Number(tokenSettings.decimals))
tokenDistribution.totalAmount = new BigNumber(Number(tokenSettings.totalSupply))

const saveStepInfo = (
values: TokenDistributionSettings,
{ setSubmitting }: { setSubmitting: (b: boolean) => void }
) => {
if (totalAmount.minus(new BigNumber(getTotal(values.holders))) < new BigNumber(0)) {
openNotification({
message: "Available balance has to be greater that the total supply",
variant: "error",
autoHideDuration: 2000
})
return
}
const newValues: TokenDistributionSettings = { ...values }

if (newValues.holders.length === 1 && newValues.holders[0].walletAddress === "") {
newValues.holders[0].walletAddress = account
newValues.holders[0].amount = newValues.totalAmount.toNumber()
}

const newState = {
...state.data,
tokenDistribution: newValues
Expand Down Expand Up @@ -250,16 +280,21 @@ export const ContractDistribution: React.FC = () => {
<SupplyContainer item container direction="column" style={{ gap: "12px" }}>
<Grid container item direction="row" style={{ gap: 10 }}>
<AmountText color="textSecondary">Total supply: </AmountText>
<Typography color="secondary"> {numberWithCommas(totalAmount)} </Typography>
<Typography color="secondary"> {numberWithCommas(values.totalAmount)} </Typography>
</Grid>
<Grid container item direction="row" style={{ gap: 10 }}>
<AmountText color="textSecondary">Available:</AmountText>
<Typography color="secondary">
{" "}
{numberWithCommas(totalAmount.minus(new BigNumber(getTotal(values.holders))))}
{numberWithCommas(
values.totalAmount && values.totalAmount.minus(new BigNumber(getTotal(values.holders)))
)}
</Typography>
</Grid>
</SupplyContainer>
{errors.totalAmount && touched.totalAmount ? (
<ErrorText style={{ marginTop: 6 }}>{errors.totalAmount}</ErrorText>
) : null}

<Grid
container
Expand Down
150 changes: 150 additions & 0 deletions src/modules/creator/deployment/steps/Success.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,150 @@
import React, { useEffect, useState } from "react"
import { Grid, Link, styled, Typography } from "@material-ui/core"
import { MainButton } from "modules/common/MainButton"
import { Navbar } from "modules/common/Toolbar"
import { useHistory, useLocation } from "react-router-dom"
import { Blockie } from "modules/common/Blockie"
import { CopyAddress } from "modules/common/CopyAddress"

const PageContainer = styled(Grid)(({ theme }) => ({
background: theme.palette.primary.main
}))

const PageContent = styled(Grid)(({ theme }) => ({
marginTop: 60,
width: "1000px",
height: "100%",
margin: "auto",
padding: "28px 0",
flexDirection: "row",
paddingTop: 0,
["@media (max-width:1167px)"]: {
width: "86vw"
},
[theme.breakpoints.down("sm")]: {
marginTop: 10
}
}))

const Title = styled(Typography)({
fontSize: 24,
textAlign: "center"
})

const CardContainer = styled(Grid)(({ theme }) => ({
background: theme.palette.primary.dark,
borderRadius: 8,
padding: "36px 47px"
}))

const DescriptionContainer = styled(Grid)(({ theme }) => ({
display: "inline-flex",
[theme.breakpoints.down("sm")]: {
paddingLeft: "4%",
paddingRight: "4%"
}
}))

const OptionsContainer = styled(Grid)(({ theme }) => ({
marginTop: 40,
[theme.breakpoints.down("sm")]: {
paddingLeft: "4%",
paddingRight: "4%",
marginTop: 40
}
}))

const ChoicesContainer = styled(Grid)(({ theme }) => ({
marginTop: 50,
paddingLeft: "24%",
paddingRight: "24%",
[theme.breakpoints.down("sm")]: {
paddingLeft: "2%",
paddingRight: "2%"
}
}))

const DescriptionText = styled(Typography)(({ theme }) => ({
fontWeight: 200,
color: theme.palette.text.secondary,
[theme.breakpoints.down("sm")]: {
fontSize: 14
}
}))

const OptionButton = styled(Link)(({ theme }) => ({
[theme.breakpoints.down("sm")]: {
width: "95%",
display: "flex",
textAlign: "center"
}
}))

export const Success: React.FC = () => {
const location = useLocation<{ address: string }>()
const [address, setAddress] = useState("")
const history = useHistory()

useEffect(() => {
if (location && location.state && location.state.address) {
setAddress(location.state.address)
} else {
history.push("/explorer")
}
}, [location, history])
return (
<>
<PageContainer container direction="row">
<Navbar mode="creator" />
<PageContent>
<CardContainer>
<Grid container direction="row">
<Title color="textSecondary">Governance token successfully deployed!</Title>
</Grid>

<Grid container direction="column">
<Grid item>
<DescriptionText style={{ marginTop: 40, marginBottom: 20 }}>Your Token Address:</DescriptionText>
</Grid>
<DescriptionContainer item>
<DescriptionText style={{ display: "inline-flex", alignItems: "center" }}>
<Blockie address={address} size={35} style={{ marginRight: 16 }} />
{address && (
<CopyAddress
address={address}
typographyProps={{
variant: "body1",
color: "textSecondary"
}}
/>
)}
</DescriptionText>
</DescriptionContainer>

<OptionsContainer item>
<DescriptionText>Would you like to continue and create a DAO?</DescriptionText>
</OptionsContainer>
</Grid>

<ChoicesContainer container direction="row" alignContent="center" justifyContent="center">
<Grid item xs>
<OptionButton underline="none" href={`/creator/build/dao`}>
<MainButton variant="contained" color="secondary">
Create DAO
</MainButton>
</OptionButton>
</Grid>
<Grid item xs>
<OptionButton underline="none" href={`/explorer`}>
<Typography color="secondary" style={{ padding: "6px 16px" }}>
{"I'm done"}
</Typography>
</OptionButton>
</Grid>
</ChoicesContainer>
</CardContainer>
</PageContent>
</PageContainer>
</>
)
}
Loading

0 comments on commit 215252a

Please sign in to comment.