From 3ad44244594561c09bae06ff81f97308680b1a2a Mon Sep 17 00:00:00 2001 From: Agnieszka Jarosik Date: Thu, 26 Jan 2023 22:57:49 +0100 Subject: [PATCH 1/3] added modal with slides --- src/modules/core/components/Dialog/Dialog.css | 4 + .../core/components/Dialog/Dialog.css.d.ts | 1 + src/modules/core/components/Dialog/Dialog.tsx | 11 +- .../DAOIncorporationDialog.css | 110 ++++++++++++ .../DAOIncorporationDialog.css.d.ts | 14 ++ .../DAOIncorporationDialog.tsx | 137 ++++++++++++++- .../TabPanels/CostPanel.tsx | 92 ++++++++++ .../TabPanels/HowPanel.tsx | 83 +++++++++ .../TabPanels/TabPanels.css | 161 ++++++++++++++++++ .../TabPanels/TabPanels.css.d.ts | 20 +++ .../TabPanels/WhyPanel.tsx | 92 ++++++++++ .../DAOIncorporationDialog/TabPanels/index.ts | 3 + .../DAOIncorporationDialog/constants.ts | 5 + 13 files changed, 730 insertions(+), 3 deletions(-) create mode 100644 src/modules/dashboard/components/Dialogs/DAOIncorporationDialog/DAOIncorporationDialog.css create mode 100644 src/modules/dashboard/components/Dialogs/DAOIncorporationDialog/DAOIncorporationDialog.css.d.ts create mode 100644 src/modules/dashboard/components/Dialogs/DAOIncorporationDialog/TabPanels/CostPanel.tsx create mode 100644 src/modules/dashboard/components/Dialogs/DAOIncorporationDialog/TabPanels/HowPanel.tsx create mode 100644 src/modules/dashboard/components/Dialogs/DAOIncorporationDialog/TabPanels/TabPanels.css create mode 100644 src/modules/dashboard/components/Dialogs/DAOIncorporationDialog/TabPanels/TabPanels.css.d.ts create mode 100644 src/modules/dashboard/components/Dialogs/DAOIncorporationDialog/TabPanels/WhyPanel.tsx create mode 100644 src/modules/dashboard/components/Dialogs/DAOIncorporationDialog/TabPanels/index.ts create mode 100644 src/modules/dashboard/components/Dialogs/DAOIncorporationDialog/constants.ts diff --git a/src/modules/core/components/Dialog/Dialog.css b/src/modules/core/components/Dialog/Dialog.css index 7f349df984..9ca13f8c8e 100644 --- a/src/modules/core/components/Dialog/Dialog.css +++ b/src/modules/core/components/Dialog/Dialog.css @@ -31,3 +31,7 @@ stroke: var(--colony-white); cursor: pointer; } + +.widthAuto { + width: unset; +} diff --git a/src/modules/core/components/Dialog/Dialog.css.d.ts b/src/modules/core/components/Dialog/Dialog.css.d.ts index 7af3d54cdd..0032864902 100644 --- a/src/modules/core/components/Dialog/Dialog.css.d.ts +++ b/src/modules/core/components/Dialog/Dialog.css.d.ts @@ -2,3 +2,4 @@ export const modal: string; export const main: string; export const dialogOuterActions: string; export const closeIconButton: string; +export const widthAuto: string; diff --git a/src/modules/core/components/Dialog/Dialog.tsx b/src/modules/core/components/Dialog/Dialog.tsx index 5a71c22f59..339f2ced1e 100644 --- a/src/modules/core/components/Dialog/Dialog.tsx +++ b/src/modules/core/components/Dialog/Dialog.tsx @@ -1,5 +1,6 @@ import React, { ReactNode } from 'react'; import { defineMessages } from 'react-intl'; +import classNames from 'classnames'; import Icon from '~core/Icon'; @@ -21,6 +22,7 @@ interface Props { children: ReactNode; /** Determines if the Dialog can be dismissed */ isDismissable?: boolean; + widthAuto?: boolean; } const displayName = 'Dialog'; @@ -29,6 +31,7 @@ const Dialog = ({ children, cancel, isDismissable = true, + widthAuto, ...props }: Props) => ( )} -
{children}
+
+ {children} +
); diff --git a/src/modules/dashboard/components/Dialogs/DAOIncorporationDialog/DAOIncorporationDialog.css b/src/modules/dashboard/components/Dialogs/DAOIncorporationDialog/DAOIncorporationDialog.css new file mode 100644 index 0000000000..32ca751177 --- /dev/null +++ b/src/modules/dashboard/components/Dialogs/DAOIncorporationDialog/DAOIncorporationDialog.css @@ -0,0 +1,110 @@ +@keyframes activeColor { + from { + background-color: var(--action-secondary); + } + + to { + background-color: var(--primary); + } +} +@keyframes textColor { + from { + color: var(--temp-grey-blue-7); + } + + to { + color: var(--dark); + } +} + +.wrapper { + display: flex; + min-height: 525px; +} + +.sidebar { + display: flex; + flex-direction: column; + justify-content: space-between; + padding: var(--pad-large); + width: 263px; +} + +.content { + width: 670px; + background-color: rgb(0, 40, 75); +} + +.tab { + display: flex; + align-items: center; + margin-bottom: 18px; + padding: 0; + border: none; + background-color: transparent; + font-size: var(--size-normal); + color: var(--temp-grey-blue-7); + letter-spacing: 0.1px; +} + +.tab:hover { + cursor: pointer; +} + +.marker { + margin-right: 18px; + height: 42px; + width: 5px; + border-radius: var(--radius-normal); + background-color: var(--action-secondary); +} + +.active { + background-color: var(--primary); + animation-name: activeColor; + animation-duration: 500ms; +} + +.textActive { + color: var(--dark); + animation-name: textColor; + animation-duration: 500ms; +} + +.dialogWrapper div { + max-width: unset; +} + +.buttonsWrapper { + display: flex; + justify-content: flex-end; + align-items: center; + width: 100%; +} + +.buttonsWrapper > button { + height: 29px; + width: 48%; +} + +.buttonPrevious { + composes: main from "~modules/core/components/Button/Button.css"; + background-color: var(--temp-grey-blue-7); + color: var(--colony-white); +} + +.buttonPrevious:hover { + background-color: color-mod(var(--temp-grey-blue-7) alpha(80%)); +} + +.divider { + margin: 0 0 30px 0; + background-color: var(--colony-light-blue); +} + +.title { + margin-bottom: 18px; + font-size: var(--size-medium-l); + font-weight: var(--weight-bold); + color: var(--dark); +} diff --git a/src/modules/dashboard/components/Dialogs/DAOIncorporationDialog/DAOIncorporationDialog.css.d.ts b/src/modules/dashboard/components/Dialogs/DAOIncorporationDialog/DAOIncorporationDialog.css.d.ts new file mode 100644 index 0000000000..a2197e8956 --- /dev/null +++ b/src/modules/dashboard/components/Dialogs/DAOIncorporationDialog/DAOIncorporationDialog.css.d.ts @@ -0,0 +1,14 @@ +export const wrapper: string; +export const sidebar: string; +export const content: string; +export const tab: string; +export const marker: string; +export const active: string; +export const activeColor: string; +export const textActive: string; +export const textColor: string; +export const dialogWrapper: string; +export const buttonsWrapper: string; +export const buttonPrevious: string; +export const divider: string; +export const title: string; diff --git a/src/modules/dashboard/components/Dialogs/DAOIncorporationDialog/DAOIncorporationDialog.tsx b/src/modules/dashboard/components/Dialogs/DAOIncorporationDialog/DAOIncorporationDialog.tsx index baee216d56..ae0cb3719a 100644 --- a/src/modules/dashboard/components/Dialogs/DAOIncorporationDialog/DAOIncorporationDialog.tsx +++ b/src/modules/dashboard/components/Dialogs/DAOIncorporationDialog/DAOIncorporationDialog.tsx @@ -1,7 +1,140 @@ +import React, { useCallback, useState } from 'react'; +import { defineMessages, FormattedMessage } from 'react-intl'; +import classNames from 'classnames'; + +import Dialog, { DialogProps } from '~core/Dialog'; +import Button from '~core/Button'; + +import { CostPanel, HowPanel, WhyPanel } from './TabPanels'; +import { Step } from './constants'; +import styles from './DAOIncorporationDialog.css'; + const displayName = 'dashboard.DAOIncorporationDialog'; -const DAOIncorporationDialog = () => { - return null; +const MSG = defineMessages({ + about: { + id: 'dashboard.DAOIncorporationDialog.about', + defaultMessage: 'About incorporation', + }, + why: { + id: 'dashboard.DAOIncorporationDialog.why', + defaultMessage: 'Why incorporate your DAO?', + }, + how: { + id: 'dashboard.DAOIncorporationDialog.how', + defaultMessage: 'How it works?', + }, + cost: { + id: 'dashboard.DAOIncorporationDialog.how', + defaultMessage: 'How much does it cost?', + }, + next: { + id: 'dashboard.DAOIncorporationDialog.next', + defaultMessage: 'Next', + }, + previous: { + id: 'dashboard.DAOIncorporationDialog.previous', + defaultMessage: 'Previous', + }, + incorporate: { + id: 'dashboard.DAOIncorporationDialog.incorporate', + defaultMessage: 'Incorporate', + }, +}); + +export const steps = [ + { + id: Step.Why, + title: MSG.why, + component: , + }, + { + id: Step.How, + title: MSG.how, + component: , + }, + { + id: Step.Cost, + title: MSG.cost, + component: , + }, +]; + +const DAOIncorporationDialog = ({ cancel }: DialogProps) => { + const [activeStep, setActiveStep] = useState(Step.Why); + + const onNextClick = useCallback(() => { + setActiveStep((prevStep) => { + if (prevStep === Step.Cost) { + return prevStep; + } + const currStepIndex = steps.findIndex((step) => step.id === prevStep); + return steps[currStepIndex + 1].id; + }); + }, []); + + const onPrevClick = useCallback(() => { + setActiveStep((prevStep) => { + if (prevStep === Step.Why) { + return prevStep; + } + const currStepIndex = steps.findIndex((step) => step.id === prevStep); + return steps[currStepIndex - 1].id; + }); + }, []); + + return ( +
+ +
+
+
+
+ +
+ {steps.map((step) => ( + + ))} +
+
+
+
+
+ {activeStep !== Step.Why && ( + + )} + +
+
+
+
+ {steps.find((step) => step.id === activeStep)?.component} +
+
+
+
+ ); }; export default DAOIncorporationDialog; diff --git a/src/modules/dashboard/components/Dialogs/DAOIncorporationDialog/TabPanels/CostPanel.tsx b/src/modules/dashboard/components/Dialogs/DAOIncorporationDialog/TabPanels/CostPanel.tsx new file mode 100644 index 0000000000..d23296a759 --- /dev/null +++ b/src/modules/dashboard/components/Dialogs/DAOIncorporationDialog/TabPanels/CostPanel.tsx @@ -0,0 +1,92 @@ +import { nanoid } from 'nanoid'; +import React from 'react'; +import { defineMessages, FormattedMessage } from 'react-intl'; + +import Icon from '~core/Icon'; + +import styles from './TabPanels.css'; + +const MSG = defineMessages({ + title: { + id: 'dashboard.DAOIncorporationDialog.TabPanels.CostPanel.title', + defaultMessage: 'How much does it cost?', + }, + description: { + id: 'dashboard.DAOIncorporationDialog.TabPanels.CostPanel.description', + defaultMessage: `DAO incorporation is a 3rd-party service provided by Korporatio. The payment is made directly to Korporatio and can be done using Motions via your Colony using funds from the Colony.`, + }, + note: { + id: 'dashboard.DAOIncorporationDialog.TabPanels.CostPanel.note', + defaultMessage: `Note: Price can change if the number of protectors is greater then 5. The additional cost will be $50 per extra protector over 5.`, + }, + price1: { + id: 'dashboard.DAOIncorporationDialog.TabPanels.CostPanel.price1', + defaultMessage: 'Payment will be made via Colony', + }, + currency: { + id: 'dashboard.DAOIncorporationDialog.TabPanels.CostPanel.currency', + defaultMessage: 'USDC', + }, + price2: { + id: 'dashboard.DAOIncorporationDialog.TabPanels.CostPanel.price2', + defaultMessage: 'Yearly renewal', + }, + cost: { + id: 'dashboard.DAOIncorporationDialog.TabPanels.CostPanel.cost', + defaultMessage: 'Cost', + }, +}); + +const prices = [ + { + id: nanoid(), + text: , + amount: '5,300.00', + }, + { + id: nanoid(), + text: , + amount: '3,800.00', + }, +]; + +const displayName = 'dashboard.DAOIncorporationDialog.TabPanels.CostPanel'; + +const CostPanel = () => { + return ( +
+
+
+ +
+
+ +
+ +
+
+
+
+ +
    + {prices.map((price) => ( +
  • + {price.text} +
    +
    + + +
    +
    {price.amount}
    +
    +
    • + ))} +
+
+
+ ); +}; + +CostPanel.displayName = displayName; + +export default CostPanel; diff --git a/src/modules/dashboard/components/Dialogs/DAOIncorporationDialog/TabPanels/HowPanel.tsx b/src/modules/dashboard/components/Dialogs/DAOIncorporationDialog/TabPanels/HowPanel.tsx new file mode 100644 index 0000000000..24a54aa68c --- /dev/null +++ b/src/modules/dashboard/components/Dialogs/DAOIncorporationDialog/TabPanels/HowPanel.tsx @@ -0,0 +1,83 @@ +import React from 'react'; +import { defineMessages, FormattedMessage } from 'react-intl'; + +import Tag from '~core/Tag'; + +import styles from './TabPanels.css'; + +const MSG = defineMessages({ + title: { + id: 'dashboard.DAOIncorporationDialog.TabPanels.HowPanel.title', + defaultMessage: 'How it works? ', + }, + description: { + id: 'dashboard.DAOIncorporationDialog.TabPanels.HowPanel.description', + defaultMessage: `Just like a DAO, incorporation is done openly and collectively. The steps involved in the process include:`, + }, + step1: { + id: 'dashboard.DAOIncorporationDialog.TabPanels.HowPanel.step1', + defaultMessage: `Start the application process by providing the required details, explain the reason for doing so, and nominate Protectors for the legal entity.
Step time: ~3 minutes
`, + }, + step2: { + id: 'dashboard.DAOIncorporationDialog.TabPanels.HowPanel.step2', + defaultMessage: `Submit the application to make it open. As the owner of the application, a stake is required to prevent too many unwanted applications.
Step time: ~1 minute
`, + }, + step3: { + id: 'dashboard.DAOIncorporationDialog.TabPanels.HowPanel.step3', + defaultMessage: `With the application open, collective discussion can happen to agree to all the details, nominated Protectors, and the cost to incorporate. Protectors will also need to submit verification details in the step.
Step time: Dependent on parties involved
`, + }, + step4: { + id: 'dashboard.DAOIncorporationDialog.TabPanels.HowPanel.step4', + defaultMessage: `Create a Motion to pay for the incorporation. This is the final step to get collective approval of the decision.
Step time: Dependent on Motion duration
`, + }, + step5: { + id: 'dashboard.DAOIncorporationDialog.TabPanels.HowPanel.step5', + defaultMessage: `Korporatio will process the application and finalise the incorporate. The DAO will then be able to start benefitting for a legal DAO wrapper.
Step time: 15 - 20 business days
`, + }, + step: { + id: 'dashboard.DAOIncorporationDialog.TabPanels.HowPanel.step', + defaultMessage: 'Step {count}', + }, +}); + +const steps = [MSG.step1, MSG.step2, MSG.step3, MSG.step4, MSG.step5]; + +const displayName = 'dashboard.DAOIncorporationDialog.TabPanels.HowPanel'; + +const HowPanel = () => { + return ( +
+
+ +
+
+ +
+
    + {steps.map((benefit, index) => ( +
  • +
    + + + +
    + ( +
    {chunks}
    + ), + }} + /> +
    +
    +
    • + ))} +
+
+ ); +}; + +HowPanel.displayName = displayName; + +export default HowPanel; diff --git a/src/modules/dashboard/components/Dialogs/DAOIncorporationDialog/TabPanels/TabPanels.css b/src/modules/dashboard/components/Dialogs/DAOIncorporationDialog/TabPanels/TabPanels.css new file mode 100644 index 0000000000..fd1b36f497 --- /dev/null +++ b/src/modules/dashboard/components/Dialogs/DAOIncorporationDialog/TabPanels/TabPanels.css @@ -0,0 +1,161 @@ +@keyframes fadeIn { + from { + opacity: 0; + } + + to { + opacity: 1; + } +} + +.wrapper { + padding: var(--pad-large); + color: var(--text-invert); + animation-name: fadeIn; + animation-duration: 500ms; +} + +.costWrapper { + composes: wrapper; + display: flex; + flex-direction: column; + justify-content: space-between; + height: 100%; +} + +.title { + margin-bottom: 14px; + font-size: var(--size-medium-l); + font-weight: var(--weight-bold); + letter-spacing: var(--spacing-medium); +} + +.description { + font-size: var(--size-normal); + letter-spacing: 0.1px; +} + +.note { + margin-top: 12px; + margin-bottom: 42px; +} + +.noteTransparent { + composes: note; + color: color-mod(var(--colony-white) alpha(65%)); +} + +.benefits { + margin-top: 36px; + font-size: var(--size-normal); +} + +.benefitItem { + display: inline-flex; + flex-wrap: wrap; + align-items: center; + padding-bottom: var(--pad-medium); +} + +.benefitItem::before { + display: block; + margin-right: 8px; + height: 4px; + width: 4px; + border-radius: 50%; + background-color: var(--colony-white); + color: var(--colony-white); + content: ''; + transform: translate(0, 2px); +} + +/* + Target Tag component +*/ +.wrapper > span { + display: flex; + justify-content: center; + align-items: center; + height: 20px; + width: 70px; +} + +.boldText { + margin: 0 4px; + font-weight: var(--weight-bold); + color: var(--colony-white); +} + +.link { + font-weight: var(--weight-bold); + color: var(--primary); +} + +.stepWrapper { + display: flex; + align-items: flex-start; + line-height: 18px; +} + +.stepWrapper > span { + margin-right: 12px; + height: 20px; + width: 59px; + white-space: nowrap; +} + +.stepItem { + display: flex; + align-items: center; + padding-bottom: var(--pad-medium); +} + +.time { + display: block; + width: 100%; + color: color-mod(var(--colony-white) alpha(65%)); +} + +.cost { + margin-top: 16px; + border-top: 1px solid color-mod(var(--action-secondary) alpha(65%)); +} + +.costItem { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 30px; + color: color-mod(var(--colony-white) alpha(65%)); +} + +.price { + display: flex; + justify-content: space-between; + align-items: center; + padding: 17px 15px; + height: 62px; + width: 255px; + border-radius: 22px; + background-color: rgba(9, 46, 96, 255); + color: var(--colony-white); + box-shadow: inset 0px 2px 4px rgba(14, 37, 88, 0.07); +} + +.currency { + display: flex; + align-items: center; +} + +.currency i { + margin-right: 8px; +} + +.priceText { + max-width: 150px; +} + +.priceAmount { + font-size: var(--size-medium-l); + font-weight: var(--weight-bold); +} diff --git a/src/modules/dashboard/components/Dialogs/DAOIncorporationDialog/TabPanels/TabPanels.css.d.ts b/src/modules/dashboard/components/Dialogs/DAOIncorporationDialog/TabPanels/TabPanels.css.d.ts new file mode 100644 index 0000000000..33a6288e88 --- /dev/null +++ b/src/modules/dashboard/components/Dialogs/DAOIncorporationDialog/TabPanels/TabPanels.css.d.ts @@ -0,0 +1,20 @@ +export const wrapper: string; +export const fadeIn: string; +export const costWrapper: string; +export const title: string; +export const description: string; +export const note: string; +export const noteTransparent: string; +export const benefits: string; +export const benefitItem: string; +export const boldText: string; +export const link: string; +export const stepWrapper: string; +export const stepItem: string; +export const time: string; +export const cost: string; +export const costItem: string; +export const price: string; +export const currency: string; +export const priceText: string; +export const priceAmount: string; diff --git a/src/modules/dashboard/components/Dialogs/DAOIncorporationDialog/TabPanels/WhyPanel.tsx b/src/modules/dashboard/components/Dialogs/DAOIncorporationDialog/TabPanels/WhyPanel.tsx new file mode 100644 index 0000000000..8c254fb2cc --- /dev/null +++ b/src/modules/dashboard/components/Dialogs/DAOIncorporationDialog/TabPanels/WhyPanel.tsx @@ -0,0 +1,92 @@ +import React from 'react'; +import { defineMessages, FormattedMessage } from 'react-intl'; + +import Link from '~core/Link'; +import Tag from '~core/Tag'; + +import styles from './TabPanels.css'; + +const MSG = defineMessages({ + title: { + id: 'dashboard.DAOIncorporationDialog.TabPanels.WhyPanel.title', + defaultMessage: 'Why incorporate your DAO', + }, + description: { + id: 'dashboard.DAOIncorporationDialog.TabPanels.WhyPanel.description', + defaultMessage: `Setup a legal wrapper for you DAO to extend it’s functionality and help protect contributors. Incorporation is done in Panama through a partner of Colony, Korporatio. Who is specifically focused on helping to support smart companies built and run on-chain.`, + }, + note: { + id: 'dashboard.DAOIncorporationDialog.TabPanels.WhyPanel.note', + defaultMessage: `Note: It is important to understand the obligations of incorporation. Learn More `, + }, + benefits: { + id: 'dashboard.DAOIncorporationDialog.TabPanels.WhyPanel.benefits', + defaultMessage: `Benefits`, + }, + benefit1: { + id: 'dashboard.DAOIncorporationDialog.TabPanels.WhyPanel.benefit1', + defaultMessage: `A legal structure ideally suited to the needs of DAOs operating internationally. `, + }, + benefit2: { + id: 'dashboard.DAOIncorporationDialog.TabPanels.WhyPanel.benefit2', + defaultMessage: `Enjoy limited liability for your DAO to protect contributors and token holders.`, + }, + benefit3: { + id: 'dashboard.DAOIncorporationDialog.TabPanels.WhyPanel.benefit3', + defaultMessage: `Be able to operate and interact with traditional legal organistations.`, + }, + benefit4: { + id: 'dashboard.DAOIncorporationDialog.TabPanels.WhyPanel.benefit4', + defaultMessage: `Benefit from law jurisdictions for tax and contractual purposes. `, + }, +}); + +const benefits = [MSG.benefit1, MSG.benefit2, MSG.benefit3, MSG.benefit4]; + +const displayName = 'dashboard.DAOIncorporationDialog.TabPanels.WhyPanel'; + +const WhyPanel = () => { + return ( +
+
+ +
+
+ +
+ ( + + {chunks} + + ), + }} + /> +
+
+ + + +
    + {benefits.map((benefit) => ( +
  • + ( + {chunks} + ), + }} + /> +
    • + ))} +
+
+ ); +}; + +WhyPanel.displayName = displayName; + +export default WhyPanel; diff --git a/src/modules/dashboard/components/Dialogs/DAOIncorporationDialog/TabPanels/index.ts b/src/modules/dashboard/components/Dialogs/DAOIncorporationDialog/TabPanels/index.ts new file mode 100644 index 0000000000..8d78bf0ee3 --- /dev/null +++ b/src/modules/dashboard/components/Dialogs/DAOIncorporationDialog/TabPanels/index.ts @@ -0,0 +1,3 @@ +export { default as CostPanel } from './CostPanel'; +export { default as HowPanel } from './HowPanel'; +export { default as WhyPanel } from './WhyPanel'; diff --git a/src/modules/dashboard/components/Dialogs/DAOIncorporationDialog/constants.ts b/src/modules/dashboard/components/Dialogs/DAOIncorporationDialog/constants.ts new file mode 100644 index 0000000000..8575cc2ec4 --- /dev/null +++ b/src/modules/dashboard/components/Dialogs/DAOIncorporationDialog/constants.ts @@ -0,0 +1,5 @@ +export enum Step { + Why = 'why', + How = 'how', + Cost = 'cost', +} From c2d9ce89e69256f9a3157720eafaacc46feefc3b Mon Sep 17 00:00:00 2001 From: Agnieszka Jarosik Date: Mon, 6 Feb 2023 12:46:02 +0100 Subject: [PATCH 2/3] changed tooltip text --- .../TabPanels/CostPanel.tsx | 53 +++++++++++-------- .../TabPanels/HowPanel.tsx | 2 +- .../TabPanels/TabPanels.css | 5 +- .../TabPanels/WhyPanel.tsx | 2 +- .../DAOIncorporationDialog/constants.ts | 39 ++++++++++++++ 5 files changed, 74 insertions(+), 27 deletions(-) diff --git a/src/modules/dashboard/components/Dialogs/DAOIncorporationDialog/TabPanels/CostPanel.tsx b/src/modules/dashboard/components/Dialogs/DAOIncorporationDialog/TabPanels/CostPanel.tsx index d23296a759..dca91d7383 100644 --- a/src/modules/dashboard/components/Dialogs/DAOIncorporationDialog/TabPanels/CostPanel.tsx +++ b/src/modules/dashboard/components/Dialogs/DAOIncorporationDialog/TabPanels/CostPanel.tsx @@ -1,8 +1,11 @@ -import { nanoid } from 'nanoid'; import React from 'react'; import { defineMessages, FormattedMessage } from 'react-intl'; -import Icon from '~core/Icon'; +import Numeral from '~core/Numeral'; +import { getTokenDecimalsWithFallback } from '~utils/tokens'; +import TokenIcon from '~dashboard/HookedTokenIcon'; + +import { IncorporationPayment, prices } from '../constants'; import styles from './TabPanels.css'; @@ -19,16 +22,16 @@ const MSG = defineMessages({ id: 'dashboard.DAOIncorporationDialog.TabPanels.CostPanel.note', defaultMessage: `Note: Price can change if the number of protectors is greater then 5. The additional cost will be $50 per extra protector over 5.`, }, - price1: { - id: 'dashboard.DAOIncorporationDialog.TabPanels.CostPanel.price1', + initialPayment: { + id: 'dashboard.DAOIncorporationDialog.TabPanels.CostPanel.initialPayment', defaultMessage: 'Payment will be made via Colony', }, currency: { id: 'dashboard.DAOIncorporationDialog.TabPanels.CostPanel.currency', defaultMessage: 'USDC', }, - price2: { - id: 'dashboard.DAOIncorporationDialog.TabPanels.CostPanel.price2', + reneval: { + id: 'dashboard.DAOIncorporationDialog.TabPanels.CostPanel.reneval', defaultMessage: 'Yearly renewal', }, cost: { @@ -37,19 +40,6 @@ const MSG = defineMessages({ }, }); -const prices = [ - { - id: nanoid(), - text: , - amount: '5,300.00', - }, - { - id: nanoid(), - text: , - amount: '3,800.00', - }, -]; - const displayName = 'dashboard.DAOIncorporationDialog.TabPanels.CostPanel'; const CostPanel = () => { @@ -71,13 +61,30 @@ const CostPanel = () => {
    {prices.map((price) => (
  • - {price.text} + + {price.type === IncorporationPayment.Cost ? ( + + ) : ( + + )} +
    - - + + {price.token.symbol} +
    +
    +
    -
    {price.amount}
    • ))} diff --git a/src/modules/dashboard/components/Dialogs/DAOIncorporationDialog/TabPanels/HowPanel.tsx b/src/modules/dashboard/components/Dialogs/DAOIncorporationDialog/TabPanels/HowPanel.tsx index 24a54aa68c..60d44c8b42 100644 --- a/src/modules/dashboard/components/Dialogs/DAOIncorporationDialog/TabPanels/HowPanel.tsx +++ b/src/modules/dashboard/components/Dialogs/DAOIncorporationDialog/TabPanels/HowPanel.tsx @@ -32,7 +32,7 @@ const MSG = defineMessages({ }, step5: { id: 'dashboard.DAOIncorporationDialog.TabPanels.HowPanel.step5', - defaultMessage: `Korporatio will process the application and finalise the incorporate. The DAO will then be able to start benefitting for a legal DAO wrapper.
    Step time: 15 - 20 business days
    `, + defaultMessage: `Korporatio will process the application and finalize the incorporation. The DAO and contributors will then start benefiting from the legal DAO wrapper.
    Step time: 15 - 20 business days
    `, }, step: { id: 'dashboard.DAOIncorporationDialog.TabPanels.HowPanel.step', diff --git a/src/modules/dashboard/components/Dialogs/DAOIncorporationDialog/TabPanels/TabPanels.css b/src/modules/dashboard/components/Dialogs/DAOIncorporationDialog/TabPanels/TabPanels.css index fd1b36f497..aec16e0413 100644 --- a/src/modules/dashboard/components/Dialogs/DAOIncorporationDialog/TabPanels/TabPanels.css +++ b/src/modules/dashboard/components/Dialogs/DAOIncorporationDialog/TabPanels/TabPanels.css @@ -145,9 +145,10 @@ .currency { display: flex; align-items: center; + font-size: var(--size-normal); } -.currency i { +.currency figure { margin-right: 8px; } @@ -155,7 +156,7 @@ max-width: 150px; } -.priceAmount { +.priceAmount > span { font-size: var(--size-medium-l); font-weight: var(--weight-bold); } diff --git a/src/modules/dashboard/components/Dialogs/DAOIncorporationDialog/TabPanels/WhyPanel.tsx b/src/modules/dashboard/components/Dialogs/DAOIncorporationDialog/TabPanels/WhyPanel.tsx index 8c254fb2cc..374e1e2246 100644 --- a/src/modules/dashboard/components/Dialogs/DAOIncorporationDialog/TabPanels/WhyPanel.tsx +++ b/src/modules/dashboard/components/Dialogs/DAOIncorporationDialog/TabPanels/WhyPanel.tsx @@ -13,7 +13,7 @@ const MSG = defineMessages({ }, description: { id: 'dashboard.DAOIncorporationDialog.TabPanels.WhyPanel.description', - defaultMessage: `Setup a legal wrapper for you DAO to extend it’s functionality and help protect contributors. Incorporation is done in Panama through a partner of Colony, Korporatio. Who is specifically focused on helping to support smart companies built and run on-chain.`, + defaultMessage: `Setup a legal wrapper for you DAO to extend it's functionality and help protect contributors. Incorporation is done in Panama through a service provided by Korporatio. Who is specifically focused on helping to support smart companies built and run on-chain.`, }, note: { id: 'dashboard.DAOIncorporationDialog.TabPanels.WhyPanel.note', diff --git a/src/modules/dashboard/components/Dialogs/DAOIncorporationDialog/constants.ts b/src/modules/dashboard/components/Dialogs/DAOIncorporationDialog/constants.ts index 8575cc2ec4..60d501a42d 100644 --- a/src/modules/dashboard/components/Dialogs/DAOIncorporationDialog/constants.ts +++ b/src/modules/dashboard/components/Dialogs/DAOIncorporationDialog/constants.ts @@ -1,5 +1,44 @@ +import { nanoid } from 'nanoid'; + export enum Step { Why = 'why', How = 'how', Cost = 'cost', } + +export enum IncorporationPayment { + Cost = 'cost', + Reneval = 'renewal', +} + +// this is a mock data +export const prices = [ + { + id: nanoid(), + type: IncorporationPayment.Cost, + token: { + address: '0x8ac76a51cc950d9822d68b83fe1ad97b32cd5823', + balances: [{ amount: '0', domainId: 0 }], + decimals: 6, + iconHash: '', + id: '0x8ac76a51cc950d9822d68b83fe1ad97b32cd5823', + name: 'USD Coin', + symbol: 'USDC', + }, + amount: '5300000000', + }, + { + id: nanoid(), + type: IncorporationPayment.Reneval, + token: { + address: '0x8ac76a51cc950d9822d68b83fe1ad97b32cd5823', + balances: [{ amount: '0', domainId: 0 }], + decimals: 6, + iconHash: '', + id: '0x8ac76a51cc950d9822d68b83fe1ad97b32cd5823', + name: 'USD Coin', + symbol: 'USDC', + }, + amount: '3800000000', + }, +]; From 7ffd150a55212f41c6057e89071b2bb285f55ea8 Mon Sep 17 00:00:00 2001 From: Agnieszka Jarosik Date: Thu, 23 Feb 2023 10:12:10 +0100 Subject: [PATCH 3/3] typo fix --- .../Dialogs/DAOIncorporationDialog/TabPanels/WhyPanel.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/modules/dashboard/components/Dialogs/DAOIncorporationDialog/TabPanels/WhyPanel.tsx b/src/modules/dashboard/components/Dialogs/DAOIncorporationDialog/TabPanels/WhyPanel.tsx index 374e1e2246..a66c5fd3d2 100644 --- a/src/modules/dashboard/components/Dialogs/DAOIncorporationDialog/TabPanels/WhyPanel.tsx +++ b/src/modules/dashboard/components/Dialogs/DAOIncorporationDialog/TabPanels/WhyPanel.tsx @@ -13,7 +13,7 @@ const MSG = defineMessages({ }, description: { id: 'dashboard.DAOIncorporationDialog.TabPanels.WhyPanel.description', - defaultMessage: `Setup a legal wrapper for you DAO to extend it's functionality and help protect contributors. Incorporation is done in Panama through a service provided by Korporatio. Who is specifically focused on helping to support smart companies built and run on-chain.`, + defaultMessage: `Setup a legal wrapper for your DAO to extend it's functionality and help protect contributors. Incorporation is done in Panama through a service provided by Korporatio. Who is specifically focused on helping to support smart companies built and run on-chain.`, }, note: { id: 'dashboard.DAOIncorporationDialog.TabPanels.WhyPanel.note',