From 30cb10212f412693011f875cf772b47d8df5f4bb Mon Sep 17 00:00:00 2001 From: Alex5 Date: Tue, 14 Jun 2022 13:41:11 +0300 Subject: [PATCH 01/18] components optimisation --- index.html | 1 + plasmic.lock | 4 +- src/components/Input2.tsx | 20 ------ src/components/InputNew.tsx | 22 ------ .../molecules/ClaimRewardsModal.tsx | 70 +++++++++---------- src/components/molecules/NftCard.tsx | 2 +- src/components/molecules/TableSorter.tsx | 2 +- src/components/organisms/NftTable.tsx | 2 +- src/components/organisms/NftTableSummary.tsx | 13 +--- .../PlasmicContainer.module.css | 34 ++++++++- .../marsbase_components/PlasmicContainer.tsx | 28 ++++++-- src/components/stateful/NftContainer.tsx | 4 +- .../stateful/NftTableSummaryWrapper.tsx | 21 ++++-- src/hooks/modal.ts | 8 +-- 14 files changed, 116 insertions(+), 115 deletions(-) delete mode 100644 src/components/Input2.tsx delete mode 100644 src/components/InputNew.tsx diff --git a/index.html b/index.html index 8f6522b..c3084ae 100644 --- a/index.html +++ b/index.html @@ -9,6 +9,7 @@
+ diff --git a/plasmic.lock b/plasmic.lock index 470f26c..3ab9663 100644 --- a/plasmic.lock +++ b/plasmic.lock @@ -154,12 +154,12 @@ { "type": "renderModule", "assetId": "514gf0jdxr", - "checksum": "2886a67efb7c0562732c087b28a07214" + "checksum": "201d3654e1c94bb03fe93b53d34244ad" }, { "type": "cssRules", "assetId": "514gf0jdxr", - "checksum": "2886a67efb7c0562732c087b28a07214" + "checksum": "201d3654e1c94bb03fe93b53d34244ad" }, { "type": "globalVariant", diff --git a/src/components/Input2.tsx b/src/components/Input2.tsx deleted file mode 100644 index aa3fe1d..0000000 --- a/src/components/Input2.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import * as React from "react"; -import { - PlasmicInput2, - DefaultInput2Props -} from "./plasmic/marsbase_components/PlasmicInput2"; -import { TextInputRef } from "@plasmicapp/react-web"; - -interface Input2Props extends DefaultInput2Props {} - -function Input2_(props: Input2Props, ref: TextInputRef) { - // @ts-ignore - const { plasmicProps } = PlasmicInput2.useBehavior(props, ref); - return ; -} - -const Input2 = React.forwardRef(Input2_); - -export default Object.assign(Input2, { - __plumeType: "text-input" -}); diff --git a/src/components/InputNew.tsx b/src/components/InputNew.tsx deleted file mode 100644 index 6e4dcdf..0000000 --- a/src/components/InputNew.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import * as React from "react"; -import { - PlasmicInputNew, - DefaultInputNewProps -} from "./plasmic/marsbase_components/PlasmicInputNew"; -import { TextInputRef } from "@plasmicapp/react-web"; - -interface InputNewProps extends DefaultInputNewProps {} - -function InputNew_(props: InputNewProps, ref: TextInputRef) { - const { plasmicProps } = PlasmicInputNew.useBehavior( - props, - ref - ); - return ; -} - -const InputNew = React.forwardRef(InputNew_); - -export default Object.assign(InputNew, { - __plumeType: "text-input" -}); diff --git a/src/components/molecules/ClaimRewardsModal.tsx b/src/components/molecules/ClaimRewardsModal.tsx index 120c914..cb54241 100644 --- a/src/components/molecules/ClaimRewardsModal.tsx +++ b/src/components/molecules/ClaimRewardsModal.tsx @@ -11,10 +11,6 @@ import {ClaimRewardsModalProps, ClaimRewardsModalLocalizedProps} from "./types"; import {DictionaryContext} from "../../contexts/DictionaryContext"; const ClaimRewardsModal: FC = ({all, ...props}) => { - const modalsRoot = document.getElementById('modals'); - - if (!modalsRoot) return null; - const isMobile = useMediaQuery(Queries.mobile) const isTablet = useMediaQuery(Queries.tablet) @@ -26,46 +22,46 @@ const ClaimRewardsModal: FC = ({all, ...props}) => { } }, []) - return createPortal( -
-
-
-
-
-
- {props.headerTitle} - {props.headerTitle} -
- + return
+
+
+
+
+
+ {props.headerTitle} + {props.headerTitle} +
+ {props.bodyTitle} - {!all && ( -
- - {props.amount} {props.token} -
- )} - } - withIconRight - > - {props.inputLabelUp} - } - showUpLabel - color={'whiteStroke'} - /> - -
+ {!all && ( +
+ + {props.amount} {props.token} +
+ )} + } + withIconRight + > + {props.inputLabelUp} + } + showUpLabel + color={'whiteStroke'} + /> +
-
, modalsRoot) +
+
+ }; export const ClaimRewardsModalLocalized: FC = (props) => { diff --git a/src/components/molecules/NftCard.tsx b/src/components/molecules/NftCard.tsx index 2bf5b06..6185e3b 100644 --- a/src/components/molecules/NftCard.tsx +++ b/src/components/molecules/NftCard.tsx @@ -19,7 +19,7 @@ const NftCard: FC = (props) => { padding={'_15'} gap={'_15'} backgroud={isNotDesktop ? 'mobileCard' : undefined} - border={'_8'} + borderRadius={'_8'} > = ({sorters}) => { return ( - + {sorters.map((name, index) => ( null}/> ))} diff --git a/src/components/organisms/NftTable.tsx b/src/components/organisms/NftTable.tsx index 2367acc..a6f4140 100644 --- a/src/components/organisms/NftTable.tsx +++ b/src/components/organisms/NftTable.tsx @@ -8,7 +8,7 @@ import Container from "../Container"; export const NftTable: FC = ({nfts, onClaim, onActions}) => { return ( - + = ( unclaimedTotal, token }) => { - const isMobile = useMediaQuery(Queries.mobile); - const isTablet = useMediaQuery(Queries.tablet); - const isDesktop = useMediaQuery(Queries.tablet); return ( - + = ( ) } -const container = style({ - display: "flex", - alignItems: "center", - justifyContent: "space-between", - width: "100%", -}) - diff --git a/src/components/plasmic/marsbase_components/PlasmicContainer.module.css b/src/components/plasmic/marsbase_components/PlasmicContainer.module.css index c62cdae..8f2d202 100644 --- a/src/components/plasmic/marsbase_components/PlasmicContainer.module.css +++ b/src/components/plasmic/marsbase_components/PlasmicContainer.module.css @@ -63,15 +63,45 @@ .rootbackgroud_mobileCard { background: #0d0d0d; } -.rootborder__4 { +.rootborderRadius__4 { border-radius: 4px; } -.rootborder__8 { +.rootborderRadius__8 { border-radius: 8px; } +.rootmargin__5 { + margin: 5px; +} +.rootmargin__10 { + max-width: 295px; + width: 100%; + min-width: 0; + margin: 10px; +} +.rootmargin__10 > :global(.__wab_flex-container) { + min-width: 0; +} +.rootmb__5 { + margin-bottom: 5px; +} .rootpadding__0 { padding: 20px; } +.rootmb__10 { + margin-bottom: 10px; +} +.rootmb__15 { + margin-bottom: 15px; +} +.rootmb__20 { + margin-bottom: 20px; +} +.rootmb__25 { + margin-bottom: 25px; +} +.rootmb__30 { + margin-bottom: 30px; +} .rootpadding__10 { padding: 10px; } diff --git a/src/components/plasmic/marsbase_components/PlasmicContainer.tsx b/src/components/plasmic/marsbase_components/PlasmicContainer.tsx index c6f175a..105feb6 100644 --- a/src/components/plasmic/marsbase_components/PlasmicContainer.tsx +++ b/src/components/plasmic/marsbase_components/PlasmicContainer.tsx @@ -45,7 +45,9 @@ export type PlasmicContainer__VariantMembers = { justify: "between" | "start" | "end"; auto: "auto"; backgroud: "mobileCard"; - border: "_4" | "_8"; + borderRadius: "_4" | "_8"; + margin: "_5" | "_10"; + mb: "_5" | "_10" | "_15" | "_20" | "_25" | "_30"; }; export type PlasmicContainer__VariantsArgs = { @@ -56,7 +58,9 @@ export type PlasmicContainer__VariantsArgs = { justify?: SingleChoiceArg<"between" | "start" | "end">; auto?: SingleBooleanChoiceArg<"auto">; backgroud?: SingleChoiceArg<"mobileCard">; - border?: SingleChoiceArg<"_4" | "_8">; + borderRadius?: SingleChoiceArg<"_4" | "_8">; + margin?: SingleChoiceArg<"_5" | "_10">; + mb?: SingleChoiceArg<"_5" | "_10" | "_15" | "_20" | "_25" | "_30">; }; type VariantPropType = keyof PlasmicContainer__VariantsArgs; @@ -68,7 +72,9 @@ export const PlasmicContainer__VariantProps = new Array( "justify", "auto", "backgroud", - "border" + "borderRadius", + "margin", + "mb" ); export type PlasmicContainer__ArgsType = { @@ -91,7 +97,9 @@ export interface DefaultContainerProps { justify?: SingleChoiceArg<"between" | "start" | "end">; auto?: SingleBooleanChoiceArg<"auto">; backgroud?: SingleChoiceArg<"mobileCard">; - border?: SingleChoiceArg<"_4" | "_8">; + borderRadius?: SingleChoiceArg<"_4" | "_8">; + margin?: SingleChoiceArg<"_5" | "_10">; + mb?: SingleChoiceArg<"_5" | "_10" | "_15" | "_20" | "_25" | "_30">; className?: string; } @@ -133,8 +141,8 @@ function PlasmicContainer__RenderFunc(props: { "backgroud", "mobileCard" ), - [sty.rootborder__4]: hasVariant(variants, "border", "_4"), - [sty.rootborder__8]: hasVariant(variants, "border", "_8"), + [sty.rootborderRadius__4]: hasVariant(variants, "borderRadius", "_4"), + [sty.rootborderRadius__8]: hasVariant(variants, "borderRadius", "_8"), [sty.rootdirection_horizontal]: hasVariant( variants, "direction", @@ -146,6 +154,14 @@ function PlasmicContainer__RenderFunc(props: { [sty.rootjustify_between]: hasVariant(variants, "justify", "between"), [sty.rootjustify_end]: hasVariant(variants, "justify", "end"), [sty.rootjustify_start]: hasVariant(variants, "justify", "start"), + [sty.rootmargin__10]: hasVariant(variants, "margin", "_10"), + [sty.rootmargin__5]: hasVariant(variants, "margin", "_5"), + [sty.rootmb__10]: hasVariant(variants, "mb", "_10"), + [sty.rootmb__15]: hasVariant(variants, "mb", "_15"), + [sty.rootmb__20]: hasVariant(variants, "mb", "_20"), + [sty.rootmb__25]: hasVariant(variants, "mb", "_25"), + [sty.rootmb__30]: hasVariant(variants, "mb", "_30"), + [sty.rootmb__5]: hasVariant(variants, "mb", "_5"), [sty.rootpadding__0]: hasVariant(variants, "padding", "_0"), [sty.rootpadding__10]: hasVariant(variants, "padding", "_10"), [sty.rootpadding__15]: hasVariant(variants, "padding", "_15") diff --git a/src/components/stateful/NftContainer.tsx b/src/components/stateful/NftContainer.tsx index fc5c0f1..85dd0a1 100644 --- a/src/components/stateful/NftContainer.tsx +++ b/src/components/stateful/NftContainer.tsx @@ -4,7 +4,6 @@ import {style} from "typestyle"; import {IMobileNftsContainer} from "../organisms/types"; import NftCard from "../molecules/NftCard"; import React from "react"; -import Container from "../Container"; export const NftsContainer: FC> = ( { @@ -32,5 +31,6 @@ export const NftsContainer: FC> = ( const nftContainer = (isMobile: boolean, isTablet: boolean) => style({ display: 'grid', gridTemplateColumns: `repeat(${(!isMobile && isTablet) ? '2' : '1'}, 1fr)`, - gap: isTablet ? '16px' : '32px', + gap: isTablet ? '15px' : '30px', + width: '100%' }) \ No newline at end of file diff --git a/src/components/stateful/NftTableSummaryWrapper.tsx b/src/components/stateful/NftTableSummaryWrapper.tsx index 179f7ac..69d5b61 100644 --- a/src/components/stateful/NftTableSummaryWrapper.tsx +++ b/src/components/stateful/NftTableSummaryWrapper.tsx @@ -1,16 +1,25 @@ import React, {FC, ReactNode, useContext} from "react"; import {AppStateContext} from "../../contexts/AppStateContext"; import {NftTableSummary} from "../organisms/NftTableSummary"; +import {useModal} from "../../hooks/modal"; +import {ClaimRewardsModalLocalized} from "../molecules/ClaimRewardsModal"; export const NftTableSummaryWrapper = () => { const {data, handlers} = useContext(AppStateContext); + const [Modal, visible, setVisible] = useModal('claimAllRewards') return ( - + <> + setVisible(true)} + /> + + + + + ) } \ No newline at end of file diff --git a/src/hooks/modal.ts b/src/hooks/modal.ts index 90e47de..b056563 100644 --- a/src/hooks/modal.ts +++ b/src/hooks/modal.ts @@ -1,20 +1,20 @@ import {createPortal} from "react-dom"; import { Dispatch, - FC, + FC, PropsWithChildren, ReactNode, SetStateAction, useState } from "react"; -export const useModal = (id: string): [FC, boolean, Dispatch>] => { +export const useModal = (id: string): [FC>, boolean, Dispatch>] => { const [open, setOpen] = useState(false); const handleOpen = (children: ReactNode) => { const element = document.createElement("div"); element.setAttribute("id", id); - const modalRoot = document.getElementById('modal-root'); + const modalRoot = document.getElementById('modals'); if (!modalRoot) { throw new Error('modalRoot not exist') @@ -36,7 +36,7 @@ export const useModal = (id: string): [FC, boolean, Dispatch = ({children}) => { + const Modal: FC> = ({children}) => { return open ? handleOpen(children) : handleClose() From 36ebe32f2d75d6517e347533fe89030df74856b2 Mon Sep 17 00:00:00 2001 From: Alex5 Date: Tue, 14 Jun 2022 13:46:30 +0300 Subject: [PATCH 02/18] fix key error --- src/components/organisms/TokenDasboardNavbar.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/components/organisms/TokenDasboardNavbar.tsx b/src/components/organisms/TokenDasboardNavbar.tsx index d5da0a5..3403fd9 100644 --- a/src/components/organisms/TokenDasboardNavbar.tsx +++ b/src/components/organisms/TokenDasboardNavbar.tsx @@ -11,6 +11,7 @@ import {createPortal} from "react-dom"; import {Queries, useMediaQuery} from "../../hooks/mediaQuery"; interface INavbarMenu { + id: number; text: string; icon: string; alt: string; @@ -21,6 +22,7 @@ interface INavbarMenu { const navbarMenu: INavbarMenu[] = [ { + id: 1, text: 'Create Offer', icon: plusIcon, alt: 'Create Offer Menu Item', @@ -29,6 +31,7 @@ const navbarMenu: INavbarMenu[] = [ active: false }, { + id: 2, text: 'OTC desk', icon: otcDeskIcon, alt: 'OTC desk Menu Item', @@ -36,6 +39,7 @@ const navbarMenu: INavbarMenu[] = [ active: false, }, { + id: 3, text: 'Dashboard', icon: dashboardIcon, alt: 'Dashboard Menu Item', @@ -43,6 +47,7 @@ const navbarMenu: INavbarMenu[] = [ active: true }, { + id: 4, text: 'Profile', icon: profileIcon, alt: 'Profile Menu Item', @@ -50,6 +55,7 @@ const navbarMenu: INavbarMenu[] = [ active: false }, { + id: 5, text: 'More', icon: moreIcon, alt: 'More Menu Item', @@ -75,7 +81,7 @@ const TokenDashboardNavbar = () => {
{navbarMenu.map(menuItem => ( -
+
{menuItem.alt}/ Date: Tue, 14 Jun 2022 13:52:50 +0300 Subject: [PATCH 03/18] add temporary close button to ClaimRewardsModal.tsx --- src/components/molecules/ClaimRewardsModal.tsx | 13 ++++++++++--- src/components/molecules/types.ts | 1 + src/components/stateful/NftTableSummaryWrapper.tsx | 6 +++++- 3 files changed, 16 insertions(+), 4 deletions(-) diff --git a/src/components/molecules/ClaimRewardsModal.tsx b/src/components/molecules/ClaimRewardsModal.tsx index cb54241..1821383 100644 --- a/src/components/molecules/ClaimRewardsModal.tsx +++ b/src/components/molecules/ClaimRewardsModal.tsx @@ -9,6 +9,7 @@ import Input from "../Input"; import questionIcon from '../../assets/question.png'; import {ClaimRewardsModalProps, ClaimRewardsModalLocalizedProps} from "./types"; import {DictionaryContext} from "../../contexts/DictionaryContext"; +import Container from "../Container"; const ClaimRewardsModal: FC = ({all, ...props}) => { const isMobile = useMediaQuery(Queries.mobile) @@ -53,9 +54,15 @@ const ClaimRewardsModal: FC = ({all, ...props}) => { showUpLabel color={'whiteStroke'} /> - + + + + +
diff --git a/src/components/molecules/types.ts b/src/components/molecules/types.ts index a562d29..b6cda1f 100644 --- a/src/components/molecules/types.ts +++ b/src/components/molecules/types.ts @@ -112,6 +112,7 @@ export interface ClaimRewardsModalProps { btnClaim: ReactNode token: ReactNode amount: ReactNode + onClose: () => void } export type ClaimRewardsModalLocalizedProps = Omit { onClaimAll={() => setVisible(true)} /> - + setVisible(false)} + token={'MBase'} + amount={3600000} + /> From 31237f555f1a948b0d06eacdd246594f6e25df45 Mon Sep 17 00:00:00 2001 From: Alex5 Date: Tue, 14 Jun 2022 14:12:16 +0300 Subject: [PATCH 04/18] fix ClaimRewardsModal.tsx --- plasmic.lock | 8 +++--- .../molecules/ClaimRewardsModal.tsx | 1 + src/components/molecules/NftCard.tsx | 2 +- src/components/molecules/types.ts | 1 + src/components/organisms/NftTable.tsx | 2 +- .../PlasmicButton.module.css | 11 ++++++-- .../marsbase_components/PlasmicButton.tsx | 26 ++++++++++++------- .../PlasmicContainer.module.css | 13 ++++++---- .../marsbase_components/PlasmicContainer.tsx | 13 ++++------ src/components/stateful/NftContainer.tsx | 2 +- .../stateful/NftTableSummaryWrapper.tsx | 2 ++ 11 files changed, 49 insertions(+), 32 deletions(-) diff --git a/plasmic.lock b/plasmic.lock index 3ab9663..d5b0a08 100644 --- a/plasmic.lock +++ b/plasmic.lock @@ -9,12 +9,12 @@ { "type": "renderModule", "assetId": "IDy-UAQYMv", - "checksum": "02b819a040b7a8e07be867cfef05c39f" + "checksum": "3d9edd1cf2729e197e3709ef5a8acbfa" }, { "type": "cssRules", "assetId": "IDy-UAQYMv", - "checksum": "02b819a040b7a8e07be867cfef05c39f" + "checksum": "3d9edd1cf2729e197e3709ef5a8acbfa" }, { "type": "renderModule", @@ -154,12 +154,12 @@ { "type": "renderModule", "assetId": "514gf0jdxr", - "checksum": "201d3654e1c94bb03fe93b53d34244ad" + "checksum": "b7c847e6298f2af9fdab35e8d435be24" }, { "type": "cssRules", "assetId": "514gf0jdxr", - "checksum": "201d3654e1c94bb03fe93b53d34244ad" + "checksum": "b7c847e6298f2af9fdab35e8d435be24" }, { "type": "globalVariant", diff --git a/src/components/molecules/ClaimRewardsModal.tsx b/src/components/molecules/ClaimRewardsModal.tsx index 1821383..3896c1a 100644 --- a/src/components/molecules/ClaimRewardsModal.tsx +++ b/src/components/molecules/ClaimRewardsModal.tsx @@ -53,6 +53,7 @@ const ClaimRewardsModal: FC = ({all, ...props}) => { } showUpLabel color={'whiteStroke'} + value={props.availableForClaim} /> - diff --git a/src/components/molecules/types.ts b/src/components/molecules/types.ts index b8fcfd2..e1ecdac 100644 --- a/src/components/molecules/types.ts +++ b/src/components/molecules/types.ts @@ -114,6 +114,8 @@ export interface ClaimRewardsModalProps { amount: ReactNode onClose: () => void availableForClaim: ReactNode; + onClaim: () => void + btnClaimLoad: boolean } export type ClaimRewardsModalLocalizedProps = Omit { token={'MBase'} amount={3600000} availableForClaim={123123123} + onClaim={() => console.log('on claim click')} + btnClaimLoad={false} /> From e6a24351247472cc7209721b7383860b7b9e58a2 Mon Sep 17 00:00:00 2001 From: Alex5 Date: Tue, 14 Jun 2022 16:53:44 +0300 Subject: [PATCH 06/18] components optimisation --- plasmic.lock | 12 ++++---- src/components/molecules/HeaderActions.tsx | 14 +++++++--- src/components/molecules/HeaderOverview.tsx | 19 +++++++------ .../molecules/HowIsDistributionDone.tsx | 28 +++++++++++-------- src/components/molecules/NftCard.tsx | 6 ++-- .../molecules/SummaryDestribution.tsx | 18 ++++-------- .../molecules/TokenDashboardHeader.tsx | 8 ++++-- src/components/organisms/NftTable.tsx | 10 +++++-- src/components/organisms/NftTableSummary.tsx | 7 ++++- .../PlasmicButton.module.css | 1 + .../PlasmicContainer.module.css | 24 +++++++++------- .../marsbase_components/PlasmicContainer.tsx | 15 +++++----- .../PlasmicText.module.css | 3 ++ .../marsbase_components/PlasmicText.tsx | 16 ++++++++++- .../stateful/NftTableSummaryWrapper.tsx | 1 - .../templates/TokenDashboardTemplate.tsx | 10 ++----- src/components/templates/index.tsx | 9 ++---- 17 files changed, 118 insertions(+), 83 deletions(-) diff --git a/plasmic.lock b/plasmic.lock index d5b0a08..d8a2bf0 100644 --- a/plasmic.lock +++ b/plasmic.lock @@ -9,22 +9,22 @@ { "type": "renderModule", "assetId": "IDy-UAQYMv", - "checksum": "3d9edd1cf2729e197e3709ef5a8acbfa" + "checksum": "5bae766e79de614345aad85ae3e8a559" }, { "type": "cssRules", "assetId": "IDy-UAQYMv", - "checksum": "3d9edd1cf2729e197e3709ef5a8acbfa" + "checksum": "5bae766e79de614345aad85ae3e8a559" }, { "type": "renderModule", "assetId": "sIxKMhfpOf", - "checksum": "4e85a0efacf99a92140eae2bfb3753a9" + "checksum": "089dd1829d762f997e18c1d1ff0ab7d7" }, { "type": "cssRules", "assetId": "sIxKMhfpOf", - "checksum": "4e85a0efacf99a92140eae2bfb3753a9" + "checksum": "089dd1829d762f997e18c1d1ff0ab7d7" }, { "type": "renderModule", @@ -154,12 +154,12 @@ { "type": "renderModule", "assetId": "514gf0jdxr", - "checksum": "b7c847e6298f2af9fdab35e8d435be24" + "checksum": "cd1c8cc6d8e6e6be972de5fb42242084" }, { "type": "cssRules", "assetId": "514gf0jdxr", - "checksum": "b7c847e6298f2af9fdab35e8d435be24" + "checksum": "cd1c8cc6d8e6e6be972de5fb42242084" }, { "type": "globalVariant", diff --git a/src/components/molecules/HeaderActions.tsx b/src/components/molecules/HeaderActions.tsx index b0201a8..0f7bafd 100644 --- a/src/components/molecules/HeaderActions.tsx +++ b/src/components/molecules/HeaderActions.tsx @@ -15,15 +15,21 @@ export const HeaderActions: FC = ( onSellWithPremium, onBuyNow }) => { - const isMobile = useMediaQuery(Queries.mobile) + const isMobile = useMediaQuery(Queries.mobile); + const isTablet = useMediaQuery(Queries.tablet); return ( - + ) diff --git a/src/components/molecules/HeaderOverview.tsx b/src/components/molecules/HeaderOverview.tsx index a09246f..4e43315 100644 --- a/src/components/molecules/HeaderOverview.tsx +++ b/src/components/molecules/HeaderOverview.tsx @@ -6,14 +6,16 @@ import {DictionaryContext} from "../../contexts/DictionaryContext" import question from '../../assets/question.png'; import {Queries, useMediaQuery} from "../../hooks/mediaQuery"; import {HeaderOverviewProps} from "./types"; +import Container from "../Container"; const HeaderOverviewVisual: FC = ({title, subTitle}) => { - const isMobile = useMediaQuery(Queries.mobile) + const isMobile = useMediaQuery(Queries.mobile); + const isTablet = useMediaQuery(Queries.tablet); return ( -
-
+ + {title} {isMobile ? @@ -27,12 +29,11 @@ const HeaderOverviewVisual: FC = ({title, subTitle}) => { How to use? )} - -
-
- {subTitle} -
-
+ + + {subTitle} + + ) } diff --git a/src/components/molecules/HowIsDistributionDone.tsx b/src/components/molecules/HowIsDistributionDone.tsx index d01f3ec..729e07a 100644 --- a/src/components/molecules/HowIsDistributionDone.tsx +++ b/src/components/molecules/HowIsDistributionDone.tsx @@ -3,6 +3,7 @@ import {style} from "typestyle"; import {Text} from '../atoms/Text'; import cosmonaut from '../../assets/cosmonautpng.png'; import {DictionaryContext} from "../../contexts/DictionaryContext"; +import Container from "../Container"; interface HowIsProps { title: ReactNode; @@ -11,22 +12,28 @@ interface HowIsProps { const HowIsDistributionDone: FC = ({title, subTitle}) => { return ( -
-
-
- {title} - - {subTitle} - +
+
+
+
+ {title} + + {subTitle} + +
-
); }; +const wrapper = style({ + padding: '20px', + marginBottom: '80px' +}) + const imageContainer = style({ backgroundImage: `url(${cosmonaut})`, backgroundRepeat: 'no-repeat', @@ -36,7 +43,6 @@ const imageContainer = style({ const container = style({ background: `linear-gradient(45deg, rgba(46,23,19,1) 0%, rgba(31,20,43,1) 100%)`, borderRadius: '16px', - marginTop: '90px' }) const content = style({ diff --git a/src/components/molecules/NftCard.tsx b/src/components/molecules/NftCard.tsx index 45e10e9..41a43fb 100644 --- a/src/components/molecules/NftCard.tsx +++ b/src/components/molecules/NftCard.tsx @@ -11,15 +11,15 @@ const NftCard: FC = (props) => { const isMobile = useMediaQuery(Queries.mobile); const isTablet = useMediaQuery(Queries.tablet); - const isNotDesktop = (isMobile || isTablet); + const isDesktop = (!isMobile || !isTablet); return ( = ({title, subTitle, count}) => { const isMobile = useMediaQuery(Queries.mobile) @@ -15,15 +16,15 @@ const SummaryDestribution: FC = ({title, subTitle, cou return (
-
-
+ + {title} {count} -
+ {subTitle} -
+
) } @@ -32,15 +33,6 @@ const container = (isMobile: boolean) => style({ display: "flex", width: isMobile ? '100%' : "300px" }) -const content = style({ - display: "flex", - flexDirection: "column" -}) - -const contentHeader = style({ - display: "flex", - gap: "5px" -}) type SummaryDestributionLocalizedProps = Pick diff --git a/src/components/molecules/TokenDashboardHeader.tsx b/src/components/molecules/TokenDashboardHeader.tsx index d469c70..9abd19d 100644 --- a/src/components/molecules/TokenDashboardHeader.tsx +++ b/src/components/molecules/TokenDashboardHeader.tsx @@ -12,10 +12,14 @@ export const TokenDashboardHeader = () => { const isMobile = useMediaQuery(Queries.mobile); const isTablet = useMediaQuery(Queries.tablet); - const isOther = (!isMobile && !isTablet); + const isDesktop = (!isMobile && !isTablet); return ( - + = ({nfts, onClaim, onActions}) => { + const isMobile = useMediaQuery(Queries.mobile); + const isTablet = useMediaQuery(Queries.tablet); + + const isNotDesktop = (isMobile || isTablet); + return ( - - + + {!isNotDesktop && } = ( const isMobile = useMediaQuery(Queries.mobile); return ( - + img { margin-top: 0px; } +.rootalign_end > :global(.__wab_flex-container) { + justify-content: center; + align-items: flex-end; +} .rootjustify_between > :global(.__wab_flex-container) { justify-content: space-between; } @@ -60,12 +65,12 @@ width: auto; display: inline-flex; } +.rootbackgroud_dark1 { + background: #0d0d0d; +} .rootbackgroud_dark2 { background: #101012; } -.rootbackgroud_dark1 { - background: #080808; -} .rootborderRadius__4 { border-radius: 4px; } @@ -75,6 +80,9 @@ .rootmargin__5 { margin: 5px; } +.rootpadding__0 { + padding: 20px; +} .rootmargin__10 { max-width: 295px; width: 100%; @@ -84,9 +92,6 @@ .rootmargin__10 > :global(.__wab_flex-container) { min-width: 0; } -.rootpadding__0 { - padding: 20px; -} .rootmb__5 { margin-bottom: 5px; } @@ -111,6 +116,9 @@ .rootpadding__15 { padding: 15px; } +.rootpadding__20 { + padding: 20px; +} .rootgap__5 > :global(.__wab_flex-container) { margin-left: calc(0px - 0px); width: calc(100% + 0px); @@ -166,7 +174,3 @@ justify-content: center; align-items: flex-start; } -.rootalign_end > :global(.__wab_flex-container) { - justify-content: center; - align-items: flex-end; -} diff --git a/src/components/plasmic/marsbase_components/PlasmicContainer.tsx b/src/components/plasmic/marsbase_components/PlasmicContainer.tsx index e35d71d..090bbc0 100644 --- a/src/components/plasmic/marsbase_components/PlasmicContainer.tsx +++ b/src/components/plasmic/marsbase_components/PlasmicContainer.tsx @@ -39,12 +39,12 @@ import sty from "./PlasmicContainer.module.css"; // plasmic-import: 514gf0jdxr/c export type PlasmicContainer__VariantMembers = { direction: "horizontal"; - padding: "_0" | "_10" | "_15"; + padding: "_0" | "_10" | "_15" | "_20"; gap: "_5" | "_10" | "_15"; align: "start" | "end"; justify: "between" | "start" | "end"; auto: "auto"; - backgroud: "dark2" | "dark1"; + backgroud: "dark1" | "dark2"; borderRadius: "_4" | "_8"; margin: "_5" | "_10"; mb: "_5" | "_10" | "_15" | "_20" | "_25" | "_30"; @@ -52,12 +52,12 @@ export type PlasmicContainer__VariantMembers = { export type PlasmicContainer__VariantsArgs = { direction?: SingleChoiceArg<"horizontal">; - padding?: SingleChoiceArg<"_0" | "_10" | "_15">; + padding?: SingleChoiceArg<"_0" | "_10" | "_15" | "_20">; gap?: SingleChoiceArg<"_5" | "_10" | "_15">; align?: SingleChoiceArg<"start" | "end">; justify?: SingleChoiceArg<"between" | "start" | "end">; auto?: SingleBooleanChoiceArg<"auto">; - backgroud?: SingleChoiceArg<"dark2" | "dark1">; + backgroud?: SingleChoiceArg<"dark1" | "dark2">; borderRadius?: SingleChoiceArg<"_4" | "_8">; margin?: SingleChoiceArg<"_5" | "_10">; mb?: SingleChoiceArg<"_5" | "_10" | "_15" | "_20" | "_25" | "_30">; @@ -91,12 +91,12 @@ export type PlasmicContainer__OverridesType = { export interface DefaultContainerProps { children?: React.ReactNode; direction?: SingleChoiceArg<"horizontal">; - padding?: SingleChoiceArg<"_0" | "_10" | "_15">; + padding?: SingleChoiceArg<"_0" | "_10" | "_15" | "_20">; gap?: SingleChoiceArg<"_5" | "_10" | "_15">; align?: SingleChoiceArg<"start" | "end">; justify?: SingleChoiceArg<"between" | "start" | "end">; auto?: SingleBooleanChoiceArg<"auto">; - backgroud?: SingleChoiceArg<"dark2" | "dark1">; + backgroud?: SingleChoiceArg<"dark1" | "dark2">; borderRadius?: SingleChoiceArg<"_4" | "_8">; margin?: SingleChoiceArg<"_5" | "_10">; mb?: SingleChoiceArg<"_5" | "_10" | "_15" | "_20" | "_25" | "_30">; @@ -161,7 +161,8 @@ function PlasmicContainer__RenderFunc(props: { [sty.rootmb__5]: hasVariant(variants, "mb", "_5"), [sty.rootpadding__0]: hasVariant(variants, "padding", "_0"), [sty.rootpadding__10]: hasVariant(variants, "padding", "_10"), - [sty.rootpadding__15]: hasVariant(variants, "padding", "_15") + [sty.rootpadding__15]: hasVariant(variants, "padding", "_15"), + [sty.rootpadding__20]: hasVariant(variants, "padding", "_20") } )} > diff --git a/src/components/plasmic/marsbase_components/PlasmicText.module.css b/src/components/plasmic/marsbase_components/PlasmicText.module.css index baa18c6..b2e39f1 100644 --- a/src/components/plasmic/marsbase_components/PlasmicText.module.css +++ b/src/components/plasmic/marsbase_components/PlasmicText.module.css @@ -120,6 +120,9 @@ .slotTargetChildrenwithIconLeft { white-space: pre-wrap; } +.slotTargetChildrennoWrap { + white-space: pre; +} .slotTargetChildrenweight_light { font-weight: 300; } diff --git a/src/components/plasmic/marsbase_components/PlasmicText.tsx b/src/components/plasmic/marsbase_components/PlasmicText.tsx index b5473f2..cc43fda 100644 --- a/src/components/plasmic/marsbase_components/PlasmicText.tsx +++ b/src/components/plasmic/marsbase_components/PlasmicText.tsx @@ -48,6 +48,7 @@ export type PlasmicText__VariantMembers = { title: "_1" | "_2" | "_3" | "_4"; withIconRight: "withIconRight"; withIconLeft: "withIconLeft"; + noWrap: "noWrap"; }; export type PlasmicText__VariantsArgs = { @@ -60,6 +61,7 @@ export type PlasmicText__VariantsArgs = { title?: SingleChoiceArg<"_1" | "_2" | "_3" | "_4">; withIconRight?: SingleBooleanChoiceArg<"withIconRight">; withIconLeft?: SingleBooleanChoiceArg<"withIconLeft">; + noWrap?: SingleBooleanChoiceArg<"noWrap">; }; type VariantPropType = keyof PlasmicText__VariantsArgs; @@ -70,7 +72,8 @@ export const PlasmicText__VariantProps = new Array( "opacity", "title", "withIconRight", - "withIconLeft" + "withIconLeft", + "noWrap" ); export type PlasmicText__ArgsType = { @@ -104,6 +107,7 @@ export interface DefaultTextProps { title?: SingleChoiceArg<"_1" | "_2" | "_3" | "_4">; withIconRight?: SingleBooleanChoiceArg<"withIconRight">; withIconLeft?: SingleBooleanChoiceArg<"withIconLeft">; + noWrap?: SingleBooleanChoiceArg<"noWrap">; className?: string; } @@ -195,6 +199,11 @@ function PlasmicText__RenderFunc(props: { "colors", "white" ), + [sty.freeBoxnoWrap___4Jz6KQ9LeL]: hasVariant( + variants, + "noWrap", + "noWrap" + ), [sty.freeBoxsize__10___4Jz6KPsPn]: hasVariant( variants, "size", @@ -281,6 +290,11 @@ function PlasmicText__RenderFunc(props: { "colors", "red" ), + [sty.slotTargetChildrennoWrap]: hasVariant( + variants, + "noWrap", + "noWrap" + ), [sty.slotTargetChildrenopacity__10]: hasVariant( variants, "opacity", diff --git a/src/components/stateful/NftTableSummaryWrapper.tsx b/src/components/stateful/NftTableSummaryWrapper.tsx index f8927f2..0c4bf57 100644 --- a/src/components/stateful/NftTableSummaryWrapper.tsx +++ b/src/components/stateful/NftTableSummaryWrapper.tsx @@ -28,6 +28,5 @@ export const NftTableSummaryWrapper = () => { /> - ) } \ No newline at end of file diff --git a/src/components/templates/TokenDashboardTemplate.tsx b/src/components/templates/TokenDashboardTemplate.tsx index ef5b055..0d9e6e4 100644 --- a/src/components/templates/TokenDashboardTemplate.tsx +++ b/src/components/templates/TokenDashboardTemplate.tsx @@ -9,24 +9,20 @@ export const TokenDashboardTemplate: FC<{ children: ReactNode }> = ({children}) const isTablet = useMediaQuery(Queries.tablet) return ( -
+
{children} {(isMobile || !isTablet) && ( )} -
+
) } const main = (isMobile: boolean, isTablet: boolean) => style({ display: "flex", flexDirection: isMobile ? 'column' : "row", - gap: "20px", maxWidth: '1433px', - backgroundColor: (!isMobile && isTablet) ? 'rgba(27, 27, 28, 0.4)' : 'unset', - margin: '10px auto', - borderRadius: '12px', - // width: '100%' + margin: '0 auto', }) diff --git a/src/components/templates/index.tsx b/src/components/templates/index.tsx index 6cf79e8..cf0ea1b 100644 --- a/src/components/templates/index.tsx +++ b/src/components/templates/index.tsx @@ -1,25 +1,22 @@ import React, {FC, ReactNode, useEffect} from 'react'; import {Queries, useMediaQuery} from "../../hooks/mediaQuery"; import {style} from "typestyle"; +import Container from "../Container"; export const Header: FC<{children: ReactNode}> = ({ children }) => { return
-
+ {children} -
+
} const container = style({ borderBottom: '1px solid rgba(104,106,110,0.6)', - marginBottom: '41px', width: '100%', - margin: 'auto', background: 'linear-gradient(97deg, rgba(0,0,0,1) 0%, rgba(26,1,47,1) 100%)' }) const content = style({ - maxWidth: '1433px', margin: 'auto', - padding: '0 20px 0 20px' }) \ No newline at end of file From c09b51569be80d45eb38584a950c089ed578a627 Mon Sep 17 00:00:00 2001 From: Alex5 Date: Wed, 15 Jun 2022 11:41:28 +0300 Subject: [PATCH 07/18] add new RootContainer.tsx --- plasmic.json | 17 +- plasmic.lock | 10 + src/components/RootContainer.tsx | 48 +++ .../molecules/HowIsDistributionDone.tsx | 2 +- .../molecules/TokenDashboardHeader.tsx | 34 +- src/components/organisms/NftTable.tsx | 23 +- src/components/pages/TokenDashboard.tsx | 16 +- .../PlasmicRootContainer.module.css | 26 ++ .../PlasmicRootContainer.tsx | 187 +++++++++++ .../templates/TokenDashboardTemplate.tsx | 28 -- .../templates/VestingSplitTemplate.tsx | 1 - src/components/templates/index.tsx | 22 -- yarn.lock | 308 +++++++++++------- 13 files changed, 521 insertions(+), 201 deletions(-) create mode 100644 src/components/RootContainer.tsx create mode 100644 src/components/plasmic/marsbase_components/PlasmicRootContainer.module.css create mode 100644 src/components/plasmic/marsbase_components/PlasmicRootContainer.tsx delete mode 100644 src/components/templates/TokenDashboardTemplate.tsx delete mode 100644 src/components/templates/VestingSplitTemplate.tsx delete mode 100644 src/components/templates/index.tsx diff --git a/plasmic.json b/plasmic.json index c654e87..f82de93 100644 --- a/plasmic.json +++ b/plasmic.json @@ -160,6 +160,19 @@ "cssFilePath": "plasmic/marsbase_components/PlasmicContainer.module.css", "scheme": "blackbox", "componentType": "component" + }, + { + "id": "OWF7fqE1kH", + "name": "RootContainer", + "type": "managed", + "projectId": "ujWBNnbL2n4RZDdiZiYFdw", + "renderModuleFilePath": "plasmic/marsbase_components/PlasmicRootContainer.tsx", + "importSpec": { + "modulePath": "RootContainer.tsx" + }, + "cssFilePath": "plasmic/marsbase_components/PlasmicRootContainer.module.css", + "scheme": "blackbox", + "componentType": "component" } ], "icons": [ @@ -248,6 +261,6 @@ ] }, "wrapPagesWithGlobalContexts": true, - "cliVersion": "0.1.178", - "$schema": "https://unpkg.com/@plasmicapp/cli@0.1.178/dist/plasmic.schema.json" + "cliVersion": "0.1.182", + "$schema": "https://unpkg.com/@plasmicapp/cli@0.1.182/dist/plasmic.schema.json" } diff --git a/plasmic.lock b/plasmic.lock index d8a2bf0..1d873c1 100644 --- a/plasmic.lock +++ b/plasmic.lock @@ -166,6 +166,16 @@ "assetId": "3lOXnHZSFmncl", "checksum": "6f88bbd1e5f3edd6b37f1182c64cbbcb" }, + { + "type": "renderModule", + "assetId": "OWF7fqE1kH", + "checksum": "9e4553e8d63f421a9b20ceeac8754e07" + }, + { + "type": "cssRules", + "assetId": "OWF7fqE1kH", + "checksum": "9e4553e8d63f421a9b20ceeac8754e07" + }, { "assetId": "ujWBNnbL2n4RZDdiZiYFdw", "type": "projectCss", diff --git a/src/components/RootContainer.tsx b/src/components/RootContainer.tsx new file mode 100644 index 0000000..247eece --- /dev/null +++ b/src/components/RootContainer.tsx @@ -0,0 +1,48 @@ +// This is a skeleton starter React component generated by Plasmic. +// This file is owned by you, feel free to edit as you see fit. +import * as React from "react"; +import { + PlasmicRootContainer, + DefaultRootContainerProps +} from "./plasmic/marsbase_components/PlasmicRootContainer"; +import { HTMLElementRefOf } from "@plasmicapp/react-web"; + +// Your component props start with props for variants and slots you defined +// in Plasmic, but you can add more here, like event handlers that you can +// attach to named nodes in your component. +// +// If you don't want to expose certain variants or slots as a prop, you can use +// Omit to hide them: +// +// interface RootContainerProps extends Omit { +// // etc. +// } +// +// You can also stop extending from DefaultRootContainerProps altogether and have +// total control over the props for your component. +export interface RootContainerProps extends DefaultRootContainerProps {} + +function RootContainer_( + props: RootContainerProps, + ref: HTMLElementRefOf<"div"> +) { + // Use PlasmicRootContainer to render this component as it was + // designed in Plasmic, by activating the appropriate variants, + // attaching the appropriate event handlers, etc. You + // can also install whatever React hooks you need here to manage state or + // fetch data. + // + // Props you can pass into PlasmicRootContainer are: + // 1. Variants you want to activate, + // 2. Contents for slots you want to fill, + // 3. Overrides for any named node in the component to attach behavior and data, + // 4. Props to set on the root node. + // + // By default, we are just piping all RootContainerProps here, but feel free + // to do whatever works for you. + + return ; +} + +const RootContainer = React.forwardRef(RootContainer_); +export default RootContainer; diff --git a/src/components/molecules/HowIsDistributionDone.tsx b/src/components/molecules/HowIsDistributionDone.tsx index 729e07a..86da487 100644 --- a/src/components/molecules/HowIsDistributionDone.tsx +++ b/src/components/molecules/HowIsDistributionDone.tsx @@ -30,7 +30,7 @@ const HowIsDistributionDone: FC = ({title, subTitle}) => { }; const wrapper = style({ - padding: '20px', + // padding: '20px', marginBottom: '80px' }) diff --git a/src/components/molecules/TokenDashboardHeader.tsx b/src/components/molecules/TokenDashboardHeader.tsx index 9abd19d..c48b429 100644 --- a/src/components/molecules/TokenDashboardHeader.tsx +++ b/src/components/molecules/TokenDashboardHeader.tsx @@ -5,6 +5,8 @@ import {NftOverviewLocalized} from "./HeaderOverview"; import {HeaderActionsLocalized} from "./HeaderActions"; import Container from "../Container"; import {Queries, useMediaQuery} from "../../hooks/mediaQuery"; +import RootContainer from "../RootContainer"; +import {style} from "typestyle"; export const TokenDashboardHeader = () => { const {data, handlers} = useContext(AppStateContext) @@ -15,18 +17,26 @@ export const TokenDashboardHeader = () => { const isDesktop = (!isMobile && !isTablet); return ( - - - - + + + + + + + ) } +const styledRootContainer = style({ + borderBottom: '1px solid rgba(104,106,110,0.6)', + background: 'linear-gradient(97deg, rgba(0,0,0,1) 0%, rgba(26,1,47,1) 100%)' +}) + diff --git a/src/components/organisms/NftTable.tsx b/src/components/organisms/NftTable.tsx index 267aac4..06dd50f 100644 --- a/src/components/organisms/NftTable.tsx +++ b/src/components/organisms/NftTable.tsx @@ -6,6 +6,7 @@ import TableSorterState from "../stateful/TableSorterState"; import {NftsContainer} from "../stateful/NftContainer"; import Container from "../Container"; import {Queries, useMediaQuery} from "../../hooks/mediaQuery"; +import {HowIsLocalized} from "../molecules/HowIsDistributionDone"; export const NftTable: FC = ({nfts, onClaim, onActions}) => { const isMobile = useMediaQuery(Queries.mobile); @@ -14,14 +15,22 @@ export const NftTable: FC = ({nfts, onClaim, onActions}) => { const isNotDesktop = (isMobile || isTablet); return ( - - {!isNotDesktop && } - + + + {!isNotDesktop && } + + + + ) } diff --git a/src/components/pages/TokenDashboard.tsx b/src/components/pages/TokenDashboard.tsx index 19905f5..830178d 100644 --- a/src/components/pages/TokenDashboard.tsx +++ b/src/components/pages/TokenDashboard.tsx @@ -1,41 +1,39 @@ import React from "react" - -import {TokenDashboardTemplate} from "../templates/TokenDashboardTemplate" import TokenDashboardNavbar from "../organisms/TokenDasboardNavbar"; import {TokenDashboardHeader} from "../molecules/TokenDashboardHeader" import {useContext} from "react" import {AppStateContext} from "../../contexts/AppStateContext" import {ConnectWithMetamask} from "../organisms/ConnectWithMetamask" -import {Header} from "../templates" import {NftsContext} from "../../contexts/NftsContext"; import {NftTableSummaryWrapper} from "../stateful/NftTableSummaryWrapper"; import {NftTable} from "../organisms/NftTable"; +import RootContainer from "../RootContainer"; const TokenDashboard = () => { const { handlers } = useContext(AppStateContext) - const { nftsG, loading } = useContext(NftsContext) + const { nftsG } = useContext(NftsContext) return ( <> - + - - + + ) } const MemoHeader = React.memo(() => ( -
+ <> -
+ )) const MemoTableSummary = React.memo(() => ( diff --git a/src/components/plasmic/marsbase_components/PlasmicRootContainer.module.css b/src/components/plasmic/marsbase_components/PlasmicRootContainer.module.css new file mode 100644 index 0000000..9e7ef8f --- /dev/null +++ b/src/components/plasmic/marsbase_components/PlasmicRootContainer.module.css @@ -0,0 +1,26 @@ +.root { + display: flex; + flex-direction: column; + position: relative; + width: 100%; + height: auto; + justify-content: flex-start; + align-items: center; + min-width: 0; +} +.freeBox { + display: flex; + position: relative; + flex-direction: column; + align-items: center; + justify-content: flex-start; + width: 100%; + height: auto; + min-width: 0; + padding: 8px; +} +@media (min-width: 1024px) { + .freeBox { + max-width: 1488px; + } +} diff --git a/src/components/plasmic/marsbase_components/PlasmicRootContainer.tsx b/src/components/plasmic/marsbase_components/PlasmicRootContainer.tsx new file mode 100644 index 0000000..5d61c79 --- /dev/null +++ b/src/components/plasmic/marsbase_components/PlasmicRootContainer.tsx @@ -0,0 +1,187 @@ +// @ts-nocheck +/* eslint-disable */ +/* tslint:disable */ +/* prettier-ignore-start */ + +/** @jsxRuntime classic */ +/** @jsx createPlasmicElementProxy */ +/** @jsxFrag React.Fragment */ + +// This class is auto-generated by Plasmic; please do not edit! +// Plasmic Project: ujWBNnbL2n4RZDdiZiYFdw +// Component: OWF7fqE1kH +import * as React from "react"; + +import * as p from "@plasmicapp/react-web"; +import * as ph from "@plasmicapp/host"; + +import { + hasVariant, + classNames, + wrapWithClassName, + createPlasmicElementProxy, + makeFragment, + MultiChoiceArg, + SingleBooleanChoiceArg, + SingleChoiceArg, + pick, + omit, + useTrigger, + StrictProps, + deriveRenderOpts, + ensureGlobalVariants +} from "@plasmicapp/react-web"; + +import "@plasmicapp/react-web/lib/plasmic.css"; + +import projectcss from "./plasmic_marsbase_components.module.css"; // plasmic-import: ujWBNnbL2n4RZDdiZiYFdw/projectcss +import sty from "./PlasmicRootContainer.module.css"; // plasmic-import: OWF7fqE1kH/css + +export type PlasmicRootContainer__VariantMembers = {}; + +export type PlasmicRootContainer__VariantsArgs = {}; +type VariantPropType = keyof PlasmicRootContainer__VariantsArgs; +export const PlasmicRootContainer__VariantProps = new Array(); + +export type PlasmicRootContainer__ArgsType = { + children?: React.ReactNode; +}; + +type ArgPropType = keyof PlasmicRootContainer__ArgsType; +export const PlasmicRootContainer__ArgProps = new Array( + "children" +); + +export type PlasmicRootContainer__OverridesType = { + root?: p.Flex<"div">; + freeBox?: p.Flex<"div">; +}; + +export interface DefaultRootContainerProps { + children?: React.ReactNode; + className?: string; +} + +export const defaultRootContainer__Args: Partial = + {}; + +function PlasmicRootContainer__RenderFunc(props: { + variants: PlasmicRootContainer__VariantsArgs; + args: PlasmicRootContainer__ArgsType; + overrides: PlasmicRootContainer__OverridesType; + + forNode?: string; +}) { + const { variants, overrides, forNode } = props; + const args = Object.assign({}, defaultRootContainer__Args, props.args); + const $props = args; + const $ctx = ph.useDataEnv?.() || {}; + + return ( +
+
+ {p.renderPlasmicSlot({ + defaultContents: null, + value: args.children + })} +
+
+ ) as React.ReactElement | null; +} + +const PlasmicDescendants = { + root: ["root", "freeBox"], + freeBox: ["freeBox"] +} as const; +type NodeNameType = keyof typeof PlasmicDescendants; +type DescendantsType = + typeof PlasmicDescendants[T][number]; +type NodeDefaultElementType = { + root: "div"; + freeBox: "div"; +}; + +type ReservedPropsType = "variants" | "args" | "overrides"; +type NodeOverridesType = Pick< + PlasmicRootContainer__OverridesType, + DescendantsType +>; +type NodeComponentProps = + // Explicitly specify variants, args, and overrides as objects + { + variants?: PlasmicRootContainer__VariantsArgs; + args?: PlasmicRootContainer__ArgsType; + overrides?: NodeOverridesType; + } & Omit & // Specify variants directly as props + // Specify args directly as props + Omit & + // Specify overrides for each element directly as props + Omit< + NodeOverridesType, + ReservedPropsType | VariantPropType | ArgPropType + > & + // Specify props for the root element + Omit< + Partial>, + ReservedPropsType | VariantPropType | ArgPropType | DescendantsType + >; + +function makeNodeComponent(nodeName: NodeName) { + type PropsType = NodeComponentProps & { key?: React.Key }; + const func = function ( + props: T & StrictProps + ) { + const { variants, args, overrides } = deriveRenderOpts(props, { + name: nodeName, + descendantNames: [...PlasmicDescendants[nodeName]], + internalArgPropNames: PlasmicRootContainer__ArgProps, + internalVariantPropNames: PlasmicRootContainer__VariantProps + }); + + return PlasmicRootContainer__RenderFunc({ + variants, + args, + overrides, + forNode: nodeName + }); + }; + if (nodeName === "root") { + func.displayName = "PlasmicRootContainer"; + } else { + func.displayName = `PlasmicRootContainer.${nodeName}`; + } + return func; +} + +export const PlasmicRootContainer = Object.assign( + // Top-level PlasmicRootContainer renders the root element + makeNodeComponent("root"), + { + // Helper components rendering sub-elements + freeBox: makeNodeComponent("freeBox"), + + // Metadata about props expected for PlasmicRootContainer + internalVariantProps: PlasmicRootContainer__VariantProps, + internalArgProps: PlasmicRootContainer__ArgProps + } +); + +export default PlasmicRootContainer; +/* prettier-ignore-end */ diff --git a/src/components/templates/TokenDashboardTemplate.tsx b/src/components/templates/TokenDashboardTemplate.tsx deleted file mode 100644 index 0d9e6e4..0000000 --- a/src/components/templates/TokenDashboardTemplate.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import React, {FC, ReactNode} from "react" -import {style} from "typestyle" -import {Queries, useMediaQuery} from "../../hooks/mediaQuery"; -import {HowIsLocalized} from "../molecules/HowIsDistributionDone"; -import Container from "../Container"; - -export const TokenDashboardTemplate: FC<{ children: ReactNode }> = ({children}) => { - const isMobile = useMediaQuery(Queries.mobile); - const isTablet = useMediaQuery(Queries.tablet) - - return ( -
- - {children} - - {(isMobile || !isTablet) && ( - - )} -
- ) -} - -const main = (isMobile: boolean, isTablet: boolean) => style({ - display: "flex", - flexDirection: isMobile ? 'column' : "row", - maxWidth: '1433px', - margin: '0 auto', -}) diff --git a/src/components/templates/VestingSplitTemplate.tsx b/src/components/templates/VestingSplitTemplate.tsx deleted file mode 100644 index 8cec2e9..0000000 --- a/src/components/templates/VestingSplitTemplate.tsx +++ /dev/null @@ -1 +0,0 @@ -export {}; \ No newline at end of file diff --git a/src/components/templates/index.tsx b/src/components/templates/index.tsx deleted file mode 100644 index cf0ea1b..0000000 --- a/src/components/templates/index.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import React, {FC, ReactNode, useEffect} from 'react'; -import {Queries, useMediaQuery} from "../../hooks/mediaQuery"; -import {style} from "typestyle"; -import Container from "../Container"; - -export const Header: FC<{children: ReactNode}> = ({ children }) => { - return
- - {children} - -
-} - -const container = style({ - borderBottom: '1px solid rgba(104,106,110,0.6)', - width: '100%', - background: 'linear-gradient(97deg, rgba(0,0,0,1) 0%, rgba(26,1,47,1) 100%)' -}) - -const content = style({ - margin: 'auto', -}) \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 40abc5c..626e26e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -17,12 +17,38 @@ dependencies: "@babel/highlight" "^7.16.7" -"@babel/compat-data@^7.13.11", "@babel/compat-data@^7.17.10": +"@babel/compat-data@^7.13.11": version "7.17.10" resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.17.10.tgz#711dc726a492dfc8be8220028b1b92482362baab" integrity sha512-GZt/TCsG70Ms19gfZO1tM4CVnXsPgEPBCpJu+Qz3L0LUDsY5nZqFZglIoPC1kIYOtNBZlrnFT+klg12vFGZXrw== -"@babel/core@^7.12.3", "@babel/core@^7.17.10": +"@babel/compat-data@^7.17.10": + version "7.18.5" + resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.18.5.tgz#acac0c839e317038c73137fbb6ef71a1d6238471" + integrity sha512-BxhE40PVCBxVEJsSBhB6UWyAuqJRxGsAw8BdHMJ3AKGydcwuWW4kOO3HmqBQAdcq/OP+/DlTVxLvsCzRTnZuGg== + +"@babel/core@^7.12.3": + version "7.18.5" + resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.18.5.tgz#c597fa680e58d571c28dda9827669c78cdd7f000" + integrity sha512-MGY8vg3DxMnctw0LdvSEojOsumc70g0t18gNyUdAZqB1Rpd1Bqo/svHGvt+UJ6JcGX+DIekGFDxxIWofBxLCnQ== + dependencies: + "@ampproject/remapping" "^2.1.0" + "@babel/code-frame" "^7.16.7" + "@babel/generator" "^7.18.2" + "@babel/helper-compilation-targets" "^7.18.2" + "@babel/helper-module-transforms" "^7.18.0" + "@babel/helpers" "^7.18.2" + "@babel/parser" "^7.18.5" + "@babel/template" "^7.16.7" + "@babel/traverse" "^7.18.5" + "@babel/types" "^7.18.4" + convert-source-map "^1.7.0" + debug "^4.1.0" + gensync "^1.0.0-beta.2" + json5 "^2.2.1" + semver "^6.3.0" + +"@babel/core@^7.17.10": version "7.17.10" resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.17.10.tgz#74ef0fbf56b7dfc3f198fc2d927f4f03e12f4b05" integrity sha512-liKoppandF3ZcBnIYFjfSDHZLKdLHGJRkoWtG8zQyGJBQfIYobpnVGI5+pLBNtS6psFLDzyq8+h5HiVljW9PNA== @@ -43,13 +69,13 @@ json5 "^2.2.1" semver "^6.3.0" -"@babel/generator@^7.12.1", "@babel/generator@^7.17.10": - version "7.17.10" - resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.17.10.tgz#c281fa35b0c349bbe9d02916f4ae08fc85ed7189" - integrity sha512-46MJZZo9y3o4kmhBVc7zW7i8dtR1oIK/sdO5NcfcZRhTGYi+KKJRtHNgsU6c4VUcJmUNV/LQdebD/9Dlv4K+Tg== +"@babel/generator@^7.12.1", "@babel/generator@^7.17.10", "@babel/generator@^7.18.2": + version "7.18.2" + resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.18.2.tgz#33873d6f89b21efe2da63fe554460f3df1c5880d" + integrity sha512-W1lG5vUwFvfMd8HVXqdfbuG7RuaSrTCCD8cl8fP8wOivdbtbIg2Db3IWUcgvfxKbbn6ZBGYRW/Zk1MIwK49mgw== dependencies: - "@babel/types" "^7.17.10" - "@jridgewell/gen-mapping" "^0.1.0" + "@babel/types" "^7.18.2" + "@jridgewell/gen-mapping" "^0.3.0" jsesc "^2.5.1" "@babel/helper-annotate-as-pure@^7.16.7": @@ -59,7 +85,7 @@ dependencies: "@babel/types" "^7.16.7" -"@babel/helper-compilation-targets@^7.13.0", "@babel/helper-compilation-targets@^7.17.10": +"@babel/helper-compilation-targets@^7.13.0": version "7.17.10" resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.17.10.tgz#09c63106d47af93cf31803db6bc49fef354e2ebe" integrity sha512-gh3RxjWbauw/dFiU/7whjd0qN9K6nPJMqe6+Er7rOavFh0CQUSwhAE3IcTho2rywPJFxej6TUUHDkWcYI6gGqQ== @@ -69,6 +95,16 @@ browserslist "^4.20.2" semver "^6.3.0" +"@babel/helper-compilation-targets@^7.17.10", "@babel/helper-compilation-targets@^7.18.2": + version "7.18.2" + resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.18.2.tgz#67a85a10cbd5fc7f1457fec2e7f45441dc6c754b" + integrity sha512-s1jnPotJS9uQnzFtiZVBUxe67CuBa679oWFHpxYYnTpRL/1ffhyX44R9uYiXoa/pLXcY9H2moJta0iaanlk/rQ== + dependencies: + "@babel/compat-data" "^7.17.10" + "@babel/helper-validator-option" "^7.16.7" + browserslist "^4.20.2" + semver "^6.3.0" + "@babel/helper-define-polyfill-provider@^0.3.1": version "0.3.1" resolved "https://registry.yarnpkg.com/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.3.1.tgz#52411b445bdb2e676869e5a74960d2d3826d2665" @@ -83,12 +119,10 @@ resolve "^1.14.2" semver "^6.1.2" -"@babel/helper-environment-visitor@^7.16.7": - version "7.16.7" - resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.16.7.tgz#ff484094a839bde9d89cd63cba017d7aae80ecd7" - integrity sha512-SLLb0AAn6PkUeAfKJCCOl9e1R53pQlGAfc4y4XuMRZfqeMYLE0dM1LMhqbGAlGQY0lfw5/ohoYWAe9V1yibRag== - dependencies: - "@babel/types" "^7.16.7" +"@babel/helper-environment-visitor@^7.16.7", "@babel/helper-environment-visitor@^7.18.2": + version "7.18.2" + resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.2.tgz#8a6d2dedb53f6bf248e31b4baf38739ee4a637bd" + integrity sha512-14GQKWkX9oJzPiQQ7/J36FTXcD4kSp8egKjO9nINlSKiHITRA9q/R74qu8S9xlc/b/yjsJItQUeeh3xnGN0voQ== "@babel/helper-function-name@^7.17.9": version "7.17.9" @@ -112,10 +146,10 @@ dependencies: "@babel/types" "^7.16.7" -"@babel/helper-module-transforms@^7.17.7": - version "7.17.7" - resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.17.7.tgz#3943c7f777139e7954a5355c815263741a9c1cbd" - integrity sha512-VmZD99F3gNTYB7fJRDTi+u6l/zxY0BE6OIxPSU7a50s6ZUQkHwSDmV92FfM+oCG0pZRVojGYhkR8I0OGeCVREw== +"@babel/helper-module-transforms@^7.17.7", "@babel/helper-module-transforms@^7.18.0": + version "7.18.0" + resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.18.0.tgz#baf05dec7a5875fb9235bd34ca18bad4e21221cd" + integrity sha512-kclUYSUBIjlvnzN2++K9f2qzYKFgjmnmjwL4zlmU5f8ZtzgWe8s0rUPSTGy2HmK4P8T52MQsS+HTQAgZd3dMEA== dependencies: "@babel/helper-environment-visitor" "^7.16.7" "@babel/helper-module-imports" "^7.16.7" @@ -123,8 +157,8 @@ "@babel/helper-split-export-declaration" "^7.16.7" "@babel/helper-validator-identifier" "^7.16.7" "@babel/template" "^7.16.7" - "@babel/traverse" "^7.17.3" - "@babel/types" "^7.17.0" + "@babel/traverse" "^7.18.0" + "@babel/types" "^7.18.0" "@babel/helper-plugin-utils@^7.13.0", "@babel/helper-plugin-utils@^7.16.7": version "7.16.7" @@ -137,11 +171,11 @@ integrity sha512-JDkf04mqtN3y4iAbO1hv9U2ARpPyPL1zqyWs/2WG1pgSq9llHFjStX5jdxb84himgJm+8Ng+x0oiWF/nw/XQKA== "@babel/helper-simple-access@^7.17.7": - version "7.17.7" - resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.17.7.tgz#aaa473de92b7987c6dfa7ce9a7d9674724823367" - integrity sha512-txyMCGroZ96i+Pxr3Je3lzEJjqwaRC9buMUgtomcrLe5Nd0+fk1h0LLA+ixUF5OW7AhHuQ7Es1WcQJZmZsz2XA== + version "7.18.2" + resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.18.2.tgz#4dc473c2169ac3a1c9f4a51cfcd091d1c36fcff9" + integrity sha512-7LIrjYzndorDY88MycupkpQLKS1AFfsVRm2k/9PtKScSy5tZq0McZTj+DiMRynboZfIqOKvo03pmhTaUgiD6fQ== dependencies: - "@babel/types" "^7.17.0" + "@babel/types" "^7.18.2" "@babel/helper-split-export-declaration@^7.16.7": version "7.16.7" @@ -160,28 +194,28 @@ resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.16.7.tgz#b203ce62ce5fe153899b617c08957de860de4d23" integrity sha512-TRtenOuRUVo9oIQGPC5G9DgK4743cdxvtOw0weQNpZXaS16SCBi5MNjZF8vba3ETURjZpTbVn7Vvcf2eAwFozQ== -"@babel/helpers@^7.17.9": - version "7.17.9" - resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.17.9.tgz#b2af120821bfbe44f9907b1826e168e819375a1a" - integrity sha512-cPCt915ShDWUEzEp3+UNRktO2n6v49l5RSnG9M5pS24hA+2FAc5si+Pn1i4VVbQQ+jh+bIZhPFQOJOzbrOYY1Q== +"@babel/helpers@^7.17.9", "@babel/helpers@^7.18.2": + version "7.18.2" + resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.18.2.tgz#970d74f0deadc3f5a938bfa250738eb4ac889384" + integrity sha512-j+d+u5xT5utcQSzrh9p+PaJX94h++KN+ng9b9WEJq7pkUPAd61FGqhjuUEdfknb3E/uDBb7ruwEeKkIxNJPIrg== dependencies: "@babel/template" "^7.16.7" - "@babel/traverse" "^7.17.9" - "@babel/types" "^7.17.0" + "@babel/traverse" "^7.18.2" + "@babel/types" "^7.18.2" "@babel/highlight@^7.16.7": - version "7.17.9" - resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.17.9.tgz#61b2ee7f32ea0454612def4fccdae0de232b73e3" - integrity sha512-J9PfEKCbFIv2X5bjTMiZu6Vf341N05QIY+d6FvVKynkG1S7G0j3I0QoRtWIrXhZ+/Nlb5Q0MzqL7TokEJ5BNHg== + version "7.17.12" + resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.17.12.tgz#257de56ee5afbd20451ac0a75686b6b404257351" + integrity sha512-7yykMVF3hfZY2jsHZEEgLc+3x4o1O+fYyULu11GynEUQNwB6lua+IIQn1FiJxNucd5UlyJryrwsOh8PL9Sn8Qg== dependencies: "@babel/helper-validator-identifier" "^7.16.7" chalk "^2.0.0" js-tokens "^4.0.0" -"@babel/parser@*", "@babel/parser@^7.1.0", "@babel/parser@^7.12.3", "@babel/parser@^7.16.7", "@babel/parser@^7.17.10": - version "7.17.10" - resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.17.10.tgz#873b16db82a8909e0fbd7f115772f4b739f6ce78" - integrity sha512-n2Q6i+fnJqzOaq2VkdXxy2TCPCWQZHiCo0XqmrCvDWcZQKRyZzYi4Z0yxlBuN0w+r2ZHmre+Q087DSrw3pbJDQ== +"@babel/parser@*", "@babel/parser@^7.1.0", "@babel/parser@^7.12.3", "@babel/parser@^7.16.7", "@babel/parser@^7.17.10", "@babel/parser@^7.18.5": + version "7.18.5" + resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.18.5.tgz#337062363436a893a2d22faa60be5bb37091c83c" + integrity sha512-YZWVaglMiplo7v8f1oMQ5ZPQr0vn7HPeZXxXWsxXJRjGVrzUFn9OxFQl1sb5wzfootjA/yChhW84BV+383FSOw== "@babel/plugin-syntax-jsx@^7.12.13": version "7.17.12" @@ -264,7 +298,23 @@ "@babel/parser" "^7.16.7" "@babel/types" "^7.16.7" -"@babel/traverse@^7.12.1", "@babel/traverse@^7.13.0", "@babel/traverse@^7.17.10", "@babel/traverse@^7.17.3", "@babel/traverse@^7.17.9": +"@babel/traverse@^7.12.1", "@babel/traverse@^7.17.10", "@babel/traverse@^7.18.0", "@babel/traverse@^7.18.2", "@babel/traverse@^7.18.5": + version "7.18.5" + resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.18.5.tgz#94a8195ad9642801837988ab77f36e992d9a20cd" + integrity sha512-aKXj1KT66sBj0vVzk6rEeAO6Z9aiiQ68wfDgge3nHhA/my6xMM/7HGQUNumKZaoa2qUPQ5whJG9aAifsxUKfLA== + dependencies: + "@babel/code-frame" "^7.16.7" + "@babel/generator" "^7.18.2" + "@babel/helper-environment-visitor" "^7.18.2" + "@babel/helper-function-name" "^7.17.9" + "@babel/helper-hoist-variables" "^7.16.7" + "@babel/helper-split-export-declaration" "^7.16.7" + "@babel/parser" "^7.18.5" + "@babel/types" "^7.18.4" + debug "^4.1.0" + globals "^11.1.0" + +"@babel/traverse@^7.13.0": version "7.17.10" resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.17.10.tgz#1ee1a5ac39f4eac844e6cf855b35520e5eb6f8b5" integrity sha512-VmbrTHQteIdUUQNTb+zE12SHS/xQVIShmBPhlNP12hD5poF2pbITW1Z4172d03HegaQWhLffdkRJYtAzp0AGcw== @@ -280,10 +330,10 @@ debug "^4.1.0" globals "^11.1.0" -"@babel/types@^7.0.0", "@babel/types@^7.12.1", "@babel/types@^7.16.7", "@babel/types@^7.17.0", "@babel/types@^7.17.10", "@babel/types@^7.3.0": - version "7.17.10" - resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.17.10.tgz#d35d7b4467e439fcf06d195f8100e0fea7fc82c4" - integrity sha512-9O26jG0mBYfGkUYCYZRnBwbVLd1UZOICEr2Em6InB6jVfsAv1GKgwXHmrSg+WFWDmeKTA6vyTZiN8tCSM5Oo3A== +"@babel/types@^7.0.0", "@babel/types@^7.12.1", "@babel/types@^7.16.7", "@babel/types@^7.17.0", "@babel/types@^7.17.10", "@babel/types@^7.18.0", "@babel/types@^7.18.2", "@babel/types@^7.18.4", "@babel/types@^7.3.0": + version "7.18.4" + resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.18.4.tgz#27eae9b9fd18e9dccc3f9d6ad051336f307be354" + integrity sha512-ThN1mBcMq5pG/Vm2IcBmPPfyPXbd8S02rS+OBIDENdufvqC7Z/jHPCv9IcP01277aKtDI8g/2XysBN4hA8niiw== dependencies: "@babel/helper-validator-identifier" "^7.16.7" to-fast-properties "^2.0.0" @@ -794,6 +844,15 @@ "@jridgewell/set-array" "^1.0.0" "@jridgewell/sourcemap-codec" "^1.4.10" +"@jridgewell/gen-mapping@^0.3.0": + version "0.3.1" + resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.1.tgz#cf92a983c83466b8c0ce9124fadeaf09f7c66ea9" + integrity sha512-GcHwniMlA2z+WFPWuY8lp3fsza0I8xPFMWL5+n8LYyP6PSvPrXf4+n8stDHZY2DM0zy9sVkRDy1jDI4XGzYVqg== + dependencies: + "@jridgewell/set-array" "^1.0.0" + "@jridgewell/sourcemap-codec" "^1.4.10" + "@jridgewell/trace-mapping" "^0.3.9" + "@jridgewell/resolve-uri@^3.0.3": version "3.0.7" resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.0.7.tgz#30cd49820a962aff48c8fffc5cd760151fca61fe" @@ -856,9 +915,9 @@ "@openzeppelin/contracts" "^4.5.0" "@plasmicapp/cli@^0.1.178": - version "0.1.178" - resolved "https://registry.yarnpkg.com/@plasmicapp/cli/-/cli-0.1.178.tgz#71045f4bd9df3c9e189c02e39a716602fd391097" - integrity sha512-GEl7Bw7pNvXZkSWqkOZZEuIBNemLJESGYr3EV54bwXdQ0VESI+BQdq8Ehphtnr/rELXjZF6XD9eQwsfsppPjkQ== + version "0.1.182" + resolved "https://registry.yarnpkg.com/@plasmicapp/cli/-/cli-0.1.182.tgz#02670a1e8d6453adc0f3bd9df35d490388a702c4" + integrity sha512-c4vDsNulHhMoDMFmNeS8dWRQKB36Ob6dalCijqvSDzk//lAD039xwswDH9KtCRapdbIZyf8i3lS8ZWnzhMg8Ew== dependencies: "@babel/core" "^7.12.3" "@babel/generator" "^7.12.1" @@ -1579,9 +1638,9 @@ ansi-styles@^4.0.0, ansi-styles@^4.1.0: color-convert "^2.0.1" async@^3.2.3: - version "3.2.3" - resolved "https://registry.yarnpkg.com/async/-/async-3.2.3.tgz#ac53dafd3f4720ee9e8a160628f18ea91df196c9" - integrity sha512-spZRyzKL5l5BZQrr/6m/SqFdBN0q3OCI0f9rjfBzCMBIP4p75P620rR3gTmaksNOhmzgdxcaxdNfMy6anrbM0g== + version "3.2.4" + resolved "https://registry.yarnpkg.com/async/-/async-3.2.4.tgz#2d22e00f8cddeb5fde5dd33522b56d1cf569a81c" + integrity sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ== axios@^0.21.1: version "0.21.4" @@ -1643,7 +1702,7 @@ babel-runtime@^6.26.0: backo2@~1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/backo2/-/backo2-1.0.2.tgz#31ab1ac8b129363463e35b3ebb69f4dfcfba7947" - integrity sha1-MasayLEpNjRj41s+u2n038+6eUc= + integrity sha512-zj6Z6M7Eq+PBZ7PQxl5NT665MvJdAkzp0f60nAJ+sLaSCBPMwVak5ZegFbgVCzFcCJTKFoMizvM5Ld7+JrRJHA== balanced-match@^1.0.0: version "1.0.2" @@ -1653,7 +1712,7 @@ balanced-match@^1.0.0: base64-arraybuffer@0.1.4: version "0.1.4" resolved "https://registry.yarnpkg.com/base64-arraybuffer/-/base64-arraybuffer-0.1.4.tgz#9818c79e059b1355f97e0428a017c838e90ba812" - integrity sha1-mBjHngWbE1X5fgQooBfIOOkLqBI= + integrity sha512-a1eIFi4R9ySrbiMuyTGx5e92uRH5tQY6kArNcFaKBUleIoLjdjBg7Zxm3Mqm3Kmkf27HLR/1fnxX9q8GQ7Iavg== bech32@1.1.4: version "1.1.4" @@ -1699,7 +1758,18 @@ brorand@^1.1.0: resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f" integrity sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8= -browserslist@^4.20.2, browserslist@^4.20.3: +browserslist@^4.20.2: + version "4.20.4" + resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.20.4.tgz#98096c9042af689ee1e0271333dbc564b8ce4477" + integrity sha512-ok1d+1WpnU24XYN7oC3QWgTyMhY/avPJ/r9T00xxvUOIparA/gc+UPUMaod3i+G6s+nI2nUb9xZ5k794uIwShw== + dependencies: + caniuse-lite "^1.0.30001349" + electron-to-chromium "^1.4.147" + escalade "^3.1.1" + node-releases "^2.0.5" + picocolors "^1.0.0" + +browserslist@^4.20.3: version "4.20.3" resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.20.3.tgz#eb7572f49ec430e054f56d52ff0ebe9be915f8bf" integrity sha512-NBhymBQl1zM0Y5dQT/O+xiLP9/rzOIQdKM/eMJBAq7yBgaB6krIYLGejrwVYnSHZdqjscB1SPuAjHwxjvN6Wdg== @@ -1733,10 +1803,10 @@ camelcase@^5.0.0, camelcase@^5.3.1: resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320" integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg== -caniuse-lite@^1.0.30001332: - version "1.0.30001340" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001340.tgz#029a2f8bfc025d4820fafbfaa6259fd7778340c7" - integrity sha512-jUNz+a9blQTQVu4uFcn17uAD8IDizPzQkIKh3LCJfg9BkyIqExYYdyc/ZSlWUSKb8iYiXxKsxbv4zYSvkqjrxw== +caniuse-lite@^1.0.30001332, caniuse-lite@^1.0.30001349: + version "1.0.30001354" + resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001354.tgz#95c5efdb64148bb4870771749b9a619304755ce5" + integrity sha512-mImKeCkyGDAHNywYFA4bqnLAzTUvVkqPvhY4DV47X+Gl2c5Z8c3KNETnXp14GQt11LvxE8AwjzGxJ+rsikiOzg== chalk@^2.0.0: version "2.4.2" @@ -1807,7 +1877,7 @@ cliui@^6.0.0: clone-response@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/clone-response/-/clone-response-1.0.2.tgz#d1dc973920314df67fbeb94223b4ee350239e96b" - integrity sha1-0dyXOSAxTfZ/vrlCI7TuNQI56Ws= + integrity sha512-yjLXh88P599UOyPTFX0POsd7WxnbsVsGohcwzHOLspIhhpalPw1BcqED8NblyZLKcGrL8dTgMlcaZxV2jAD41Q== dependencies: mimic-response "^1.0.0" @@ -1833,7 +1903,7 @@ color-convert@^2.0.1: color-name@1.1.3: version "1.1.3" resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25" - integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU= + integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw== color-name@^1.0.0, color-name@~1.1.4: version "1.1.4" @@ -1872,7 +1942,7 @@ component-emitter@~1.3.0: concat-map@0.0.1: version "0.0.1" resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b" - integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s= + integrity sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg== configstore@^5.0.1: version "5.0.1" @@ -1947,12 +2017,12 @@ debug@4, debug@^4.1.0, debug@^4.1.1, debug@~4.3.1: decamelize@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290" - integrity sha1-9lNNFRSCabIDUue+4m9QH5oZEpA= + integrity sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA== decompress-response@^3.3.0: version "3.3.0" resolved "https://registry.yarnpkg.com/decompress-response/-/decompress-response-3.3.0.tgz#80a4dd323748384bfa248083622aedec982adff3" - integrity sha1-gKTdMjdIOEv6JICDYirt7Jgq3/M= + integrity sha512-BzRPQuY1ip+qDonAOz42gRm/pg9F768C+npV/4JOsxRC2sq+Rlk+Q4ZCAsOhnIaMrgarILY+RMUIvMmmX1qAEA== dependencies: mimic-response "^1.0.0" @@ -1974,7 +2044,7 @@ define-lazy-prop@^2.0.0: detect-file@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/detect-file/-/detect-file-1.0.0.tgz#f0d66d03672a825cb1b73bdb3fe62310c8e552b7" - integrity sha1-8NZtA2cqglyxtzvbP+YjEMjlUrc= + integrity sha512-DtCOLG98P007x7wiiOmfI0fi3eIKyWiLTGJ2MDnVi/E04lWGbf+JzrRHMm0rgIIZJGtHpKpbVgLWHrv8xXpc3Q== diff@^4.0.2: version "4.0.2" @@ -1999,12 +2069,12 @@ dot-prop@^5.2.0: duplexer3@^0.1.4: version "0.1.4" resolved "https://registry.yarnpkg.com/duplexer3/-/duplexer3-0.1.4.tgz#ee01dd1cac0ed3cbc7fdbea37dc0a8f1ce002ce2" - integrity sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI= + integrity sha512-CEj8FwwNA4cVH2uFCoHUrmojhYh1vmCdOaneKJXwkeY1i9jnlslVo9dx+hQ5Hl9GnH/Bwy/IjxAyOePyPKYnzA== -electron-to-chromium@^1.4.118: - version "1.4.137" - resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.137.tgz#186180a45617283f1c012284458510cd99d6787f" - integrity sha512-0Rcpald12O11BUogJagX3HsCN3FE83DSqWjgXoHo5a72KUKMSfI39XBgJpgNNxS9fuGzytaFjE06kZkiVFy2qA== +electron-to-chromium@^1.4.118, electron-to-chromium@^1.4.147: + version "1.4.155" + resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.155.tgz#9c7190bf5e8608c5a5e4953b1ccf0facf3d1b49d" + integrity sha512-niPzKBSYPG06gxLKO0c2kEmgdRMTtIbNrBlvD31Ld8Q57b/K0218U4j8u/OOt25XE1eFOn47FcmQVdx9R1qqxA== elliptic@6.5.4: version "6.5.4" @@ -2205,7 +2275,7 @@ escape-goat@^2.0.0: escape-string-regexp@^1.0.5: version "1.0.5" resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4" - integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ= + integrity sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg== escape-string-regexp@^4.0.0: version "4.0.0" @@ -2256,7 +2326,7 @@ ethers@^5.6.4: expand-tilde@^2.0.0, expand-tilde@^2.0.2: version "2.0.2" resolved "https://registry.yarnpkg.com/expand-tilde/-/expand-tilde-2.0.2.tgz#97e801aa052df02454de46b02bf621642cdc8502" - integrity sha1-l+gBqgUt8CRU3kawK/YhZCzchQI= + integrity sha512-A5EmesHW6rfnZ9ysHQjPdJRni0SRar0tjtG5MNtm9n5TUvsYU8oozprtRD4AqHxcZWWlVuAmQo2nWKfN9oyjTw== dependencies: homedir-polyfill "^1.0.1" @@ -2335,9 +2405,9 @@ fn.name@1.x.x: integrity sha512-GRnmB5gPyJpAhTQdSZTSp9uaPSvl09KoYcMQtsB9rQoOmzs9dH6ffeccH+Z+cv6P68Hu5bC6JjRh4Ah/mHSNRw== follow-redirects@^1.14.0: - version "1.15.0" - resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.0.tgz#06441868281c86d0dda4ad8bdaead2d02dca89d4" - integrity sha512-aExlJShTV4qOUOL7yF1U5tvLCB0xQuudbf6toyYA0E/acBNw71mvjFTnLaRp50aQaYocMR0a/RMMBIHeZnGyjQ== + version "1.15.1" + resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.1.tgz#0ca6a452306c9b276e4d3127483e29575e207ad5" + integrity sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA== free-style@3.1.0: version "3.1.0" @@ -2347,12 +2417,12 @@ free-style@3.1.0: fs.realpath@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f" - integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8= + integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw== fs@^0.0.1-security: version "0.0.1-security" resolved "https://registry.yarnpkg.com/fs/-/fs-0.0.1-security.tgz#8a7bd37186b6dddf3813f23858b57ecaaf5e41d4" - integrity sha1-invTcYa23d84E/I4WLV+yq9eQdQ= + integrity sha512-3XY9e1pP0CVEUCdj5BmfIZxRBTSDycnbqhIOGec9QYtmVH2fbLpj86CFWkrNOkt/Fvty4KZG5lTglL9j/gJ87w== fsevents@~2.3.2: version "2.3.2" @@ -2396,14 +2466,14 @@ glob-parent@^5.1.2: is-glob "^4.0.1" glob@^7.1.6: - version "7.2.0" - resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.0.tgz#d15535af7732e02e948f4c41628bd910293f6023" - integrity sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q== + version "7.2.3" + resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b" + integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q== dependencies: fs.realpath "^1.0.0" inflight "^1.0.4" inherits "2" - minimatch "^3.0.4" + minimatch "^3.1.1" once "^1.3.0" path-is-absolute "^1.0.0" @@ -2426,7 +2496,7 @@ global-modules@^1.0.0: global-prefix@^1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/global-prefix/-/global-prefix-1.0.2.tgz#dbf743c6c14992593c655568cb66ed32c0122ebe" - integrity sha1-2/dDxsFJklk8ZVVoy2btMsASLr4= + integrity sha512-5lsx1NUDHtSjfg0eHlmYvZKv8/nVqX4ckFbM+FrGcQ+04KWcWFo9P5MxPZYSzUvyzmdTbI7Eix8Q4IbELDqzKg== dependencies: expand-tilde "^2.0.2" homedir-polyfill "^1.0.1" @@ -2464,12 +2534,12 @@ graceful-fs@^4.1.2: has-cors@1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/has-cors/-/has-cors-1.1.0.tgz#5e474793f7ea9843d1bb99c23eef49ff126fff39" - integrity sha1-XkdHk/fqmEPRu5nCPu9J/xJv/zk= + integrity sha512-g5VNKdkFuUuVCP9gYfDJHjK2nqdQJ7aDLTnycnc2+RvsOQbuLdF5pm7vuE5J76SEBIQjs4kQY/BWq74JUmjbXA== has-flag@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd" - integrity sha1-tdRU3CGZriJWmfNGfloH87lVuv0= + integrity sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw== has-flag@^4.0.0: version "4.0.0" @@ -2550,17 +2620,17 @@ import-fresh@^3.1.0: import-lazy@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/import-lazy/-/import-lazy-2.1.0.tgz#05698e3d45c88e8d7e9d92cb0584e77f096f3e43" - integrity sha1-BWmOPUXIjo1+nZLLBYTnfwlvPkM= + integrity sha512-m7ZEHgtw69qOGw+jwxXkHlrlIPdTGkyh66zXZ1ajZbxkDBNjSY/LGbmjc7h0s2ELsUDTAhFr55TrPSSqJGPG0A== imurmurhash@^0.1.4: version "0.1.4" resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea" - integrity sha1-khi5srkoojixPcT7a21XbyMUU+o= + integrity sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA== inflight@^1.0.4: version "1.0.6" resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9" - integrity sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk= + integrity sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA== dependencies: once "^1.3.0" wrappy "1" @@ -2573,7 +2643,7 @@ inherits@2, inherits@^2.0.3, inherits@^2.0.4: inherits@2.0.3: version "2.0.3" resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de" - integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4= + integrity sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw== ini@1.3.7: version "1.3.7" @@ -2646,7 +2716,7 @@ is-docker@^2.0.0, is-docker@^2.1.1: is-extglob@^2.1.1: version "2.1.1" resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2" - integrity sha1-qIwCU1eR8C7TfHahueqXc8gz+MI= + integrity sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ== is-fullwidth-code-point@^3.0.0: version "3.0.0" @@ -2696,7 +2766,7 @@ is-stream@^2.0.0: is-typedarray@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a" - integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo= + integrity sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA== is-windows@^1.0.1: version "1.0.2" @@ -2718,7 +2788,7 @@ is-yarn-global@^0.3.0: isexe@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10" - integrity sha1-6PvzdNxVb/iUehDcsFctYz8s+hA= + integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw== isomorphic-unfetch@^3.1.0: version "3.1.0" @@ -2746,7 +2816,7 @@ jsesc@^2.5.1: json-buffer@3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/json-buffer/-/json-buffer-3.0.0.tgz#5b1f397afc75d677bde8bcfc0e47e1f9a3d9a898" - integrity sha1-Wx85evx11ne96Lz8Dkfh+aPZqJg= + integrity sha512-CuUqjv0FUZIdXkHPI8MezCnFCdaTAacej1TZYulLoAg1h/PhwkdXFN4V/gzY4g+fMBCOV2xF+rp7t2XD2ns/NQ== json-logic-js@^2.0.2: version "2.0.2" @@ -2842,7 +2912,7 @@ lru-cache@^6.0.0: lru_map@^0.3.3: version "0.3.3" resolved "https://registry.yarnpkg.com/lru_map/-/lru_map-0.3.3.tgz#b5c8351b9464cbd750335a79650a0ec0e56118dd" - integrity sha1-tcg1G5Rky9dQM1p5ZQoOwOVhGN0= + integrity sha512-Pn9cox5CsMYngeDbmChANltQl+5pi6XmTrraMSzhPmMBbmgcxmqWry0U3PGapCU1yB4/LqCcom7qhHZiF/jGfQ== make-dir@^3.0.0: version "3.1.0" @@ -2889,7 +2959,7 @@ minimalistic-crypto-utils@^1.0.1: resolved "https://registry.yarnpkg.com/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz#f6c00c1c0b082246e5c4d99dfb8c7c083b2b582a" integrity sha1-9sAMHAsIIkblxNmd+4x8CDsrWCo= -minimatch@^3.0.4: +minimatch@^3.1.1: version "3.1.2" resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b" integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw== @@ -2933,10 +3003,10 @@ node-fetch@^2.6.1: dependencies: whatwg-url "^5.0.0" -node-releases@^2.0.3: - version "2.0.4" - resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.4.tgz#f38252370c43854dc48aa431c766c6c398f40476" - integrity sha512-gbMzqQtTtDz/00jQzZ21PQzdI9PyLYqUSvD0p3naOhX4odFji0ZxYdnVwPTxmSwkmxhcFImpozceidSG+AgoPQ== +node-releases@^2.0.3, node-releases@^2.0.5: + version "2.0.5" + resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.5.tgz#280ed5bc3eba0d96ce44897d8aee478bfb3d9666" + integrity sha512-U9h1NLROZTq9uE1SNffn6WuPDg8icmi3ns4rEl/oTfIle4iLjTliCzgTsbaIFMq/Xn078/lfY/BL0GWZ+psK4Q== normalize-url@^4.1.0: version "4.5.1" @@ -2951,7 +3021,7 @@ object-assign@^4.1.1: once@^1.3.0, once@^1.3.1, once@^1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1" - integrity sha1-WDsap3WWHUsROsF9nFC6753Xa9E= + integrity sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w== dependencies: wrappy "1" @@ -2981,7 +3051,7 @@ open@^8.0.9: os-tmpdir@~1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274" - integrity sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ= + integrity sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g== p-cancelable@^1.0.0: version "1.1.0" @@ -3042,7 +3112,7 @@ parse-json@^5.0.0: parse-passwd@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/parse-passwd/-/parse-passwd-1.0.0.tgz#6d5b934a456993b23d37f40a382d6f1666a8e5c6" - integrity sha1-bVuTSkVpk7I9N/QKOC1vFmao5cY= + integrity sha512-1Y1A//QUXEZK7YKz+rD9WydcE1+EuPr6ZBgKecAB8tmoW6UFv0NREVJe1p+jRxtThkcbbKkfwIbWJe/IeE6m2Q== parseqs@0.0.6: version "0.0.6" @@ -3067,7 +3137,7 @@ path-exists@^4.0.0: path-is-absolute@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f" - integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18= + integrity sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg== path-parse@^1.0.7: version "1.0.7" @@ -3082,7 +3152,7 @@ path-type@^4.0.0: path@^0.12.7: version "0.12.7" resolved "https://registry.yarnpkg.com/path/-/path-0.12.7.tgz#d4dc2a506c4ce2197eb481ebfcd5b36c0140b10f" - integrity sha1-1NwqUGxM4hl+tIHr/NWzbAFAsQ8= + integrity sha512-aXXC6s+1w7otVF9UletFkFcDsJeO7lSZBPUQhtb5O0xJe8LtYhj/GxldoL09bBj9+ZmE2hNoHqQSFMN5fikh4Q== dependencies: process "^0.11.1" util "^0.10.3" @@ -3109,17 +3179,17 @@ postcss@^8.4.13: prepend-http@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-2.0.0.tgz#e92434bfa5ea8c19f41cdfd401d741a3c819d897" - integrity sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc= + integrity sha512-ravE6m9Atw9Z/jjttRUZ+clIXogdghyZAuWJ3qEzjT+jI/dL1ifAqhZeC5VHzQp1MSt1+jxKkFNemj/iO7tVUA== prettier@^2.0.5: - version "2.6.2" - resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.6.2.tgz#e26d71a18a74c3d0f0597f55f01fb6c06c206032" - integrity sha512-PkUpF+qoXTqhOeWL9fu7As8LXsIUZ1WYaJiY/a7McAQzxjk82OF0tibkFXVCDImZtWxbvojFjerkiLb0/q8mew== + version "2.7.0" + resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.7.0.tgz#a4fdae07e5596c51c9857ea676cd41a0163879d6" + integrity sha512-nwoX4GMFgxoPC6diHvSwmK/4yU8FFH3V8XWtLQrbj4IBsK2pkYhG4kf/ljF/haaZ/aii+wNJqISrCDPgxGWDVQ== process@^0.11.1: version "0.11.10" resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182" - integrity sha1-czIwDoQBYb2j5podHZGn1LwW8YI= + integrity sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A== prop-types@^15.6.2: version "15.8.1" @@ -3253,7 +3323,7 @@ registry-url@^5.0.0: require-directory@^2.1.1: version "2.1.1" resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42" - integrity sha1-jGStX9MNqxyXbiNE/+f3kqam30I= + integrity sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q== require-main-filename@^2.0.0: version "2.0.0" @@ -3263,7 +3333,7 @@ require-main-filename@^2.0.0: resolve-dir@^1.0.0, resolve-dir@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/resolve-dir/-/resolve-dir-1.0.1.tgz#79a40644c362be82f26effe739c9bb5382046f43" - integrity sha1-eaQGRMNivoLybv/nOcm7U4IEb0M= + integrity sha512-R7uiTjECzvOsWSfdM0QKFNBVFcK27aHOUwdvK53BcW8zqnGdYp0Fbj82cy54+2A4P2tFM22J5kRfe1R+lM/1yg== dependencies: expand-tilde "^2.0.0" global-modules "^1.0.0" @@ -3285,7 +3355,7 @@ resolve@^1.12.0, resolve@^1.14.2, resolve@^1.22.0: responselike@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/responselike/-/responselike-1.0.2.tgz#918720ef3b631c5642be068f15ade5a46f4ba1e7" - integrity sha1-kYcg7ztjHFZCvgaPFa3lpG9Loec= + integrity sha512-/Fpe5guzJk1gPqdJLJR5u7eG/gNY4nImjbRDaVWVMRhne55TCmj2i9Q+54PBRfatRC8v/rIiv9BN0pMd9OV5EQ== dependencies: lowercase-keys "^1.0.0" @@ -3387,7 +3457,7 @@ semver@^7.3.2: set-blocking@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7" - integrity sha1-BF+XgtARrppoA93TgrJDkrPYkPc= + integrity sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw== signal-exit@^3.0.2: version "3.0.7" @@ -3397,7 +3467,7 @@ signal-exit@^3.0.2: simple-swizzle@^0.2.2: version "0.2.2" resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a" - integrity sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo= + integrity sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg== dependencies: is-arrayish "^0.3.1" @@ -3436,7 +3506,7 @@ source-map@^0.5.7: stack-trace@0.0.x: version "0.0.10" resolved "https://registry.yarnpkg.com/stack-trace/-/stack-trace-0.0.10.tgz#547c70b347e8d32b4e108ea1a2a159e5fdde19c0" - integrity sha1-VHxws0fo0ytOEI6hoqFZ5f3eGcA= + integrity sha512-KGzahc7puUKkzyMt+IqAep+TVNbKP+k2Lmwhub39m1AsTSkaDutx56aDCo+HLDzf/D26BIHTJWNiTG1KAJiQCg== string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0: version "4.2.3" @@ -3464,7 +3534,7 @@ strip-ansi@^6.0.0, strip-ansi@^6.0.1: strip-json-comments@~2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a" - integrity sha1-PFMZQukIwml8DsNEhYwobHygpgo= + integrity sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ== stylis@4.0.13: version "4.0.13" @@ -3508,7 +3578,7 @@ text-hex@1.0.x: through@^2.3.6: version "2.3.8" resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5" - integrity sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU= + integrity sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg== tmp@^0.0.33: version "0.0.33" @@ -3520,7 +3590,7 @@ tmp@^0.0.33: to-fast-properties@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e" - integrity sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4= + integrity sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog== to-readable-stream@^1.0.0: version "1.0.0" @@ -3628,7 +3698,7 @@ update-notifier@^4.1.0: url-parse-lax@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/url-parse-lax/-/url-parse-lax-3.0.0.tgz#16b5cafc07dbe3676c1b1999177823d6503acb0c" - integrity sha1-FrXK/Afb42dsGxmZF3gj1lA6yww= + integrity sha512-NjFKA0DidqPa5ciFcSrXnAltTtzz84ogy+NebPvfEgAck0+TNg4UJ4IN+fB7zRZfbgUf0syOo9MDxFkDSMuFaQ== dependencies: prepend-http "^2.0.0" @@ -3640,7 +3710,7 @@ use-metamask@^1.3.2: util-deprecate@^1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf" - integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8= + integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw== util@^0.10.3: version "0.10.4" @@ -3692,7 +3762,7 @@ whatwg-url@^5.0.0: which-module@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a" - integrity sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho= + integrity sha512-B+enWhmw6cjfVC7kS8Pj9pCrKSc5txArRyaYGe088shv/FGWH+0Rjx/xPgtsWfsUtS27FkP697E4DDhgrgoc0Q== which@^1.2.14: version "1.3.1" @@ -3759,7 +3829,7 @@ wrap-ansi@^7.0.0: wrappy@1: version "1.0.2" resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f" - integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8= + integrity sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ== write-file-atomic@^3.0.0: version "3.0.3" @@ -3829,4 +3899,4 @@ yargs@^15.4.1: yeast@0.1.2: version "0.1.2" resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419" - integrity sha1-AI4G2AlDIMNy28L47XagymyKxBk= + integrity sha512-8HFIh676uyGYP6wP13R/j6OJ/1HwJ46snpvzE7aHAN3Ryqh2yX6Xox2B4CUmTwwOIzlG3Bs7ocsP5dZH/R1Qbg== From 9a93fc201cebd89255e4ff1e625747e5111fe73c Mon Sep 17 00:00:00 2001 From: Alex5 Date: Wed, 15 Jun 2022 13:36:12 +0300 Subject: [PATCH 08/18] view fix --- plasmic.lock | 8 +-- src/components/molecules/HeaderActions.tsx | 6 +- src/components/molecules/HeaderOverview.tsx | 2 +- .../molecules/HowIsDistributionDone.tsx | 13 +++- src/components/molecules/NftCard.tsx | 2 +- src/components/molecules/NftCardOverview.tsx | 10 +-- .../molecules/TokenDashboardHeader.tsx | 7 +- src/components/organisms/NftTable.tsx | 9 ++- src/components/organisms/NftTableSummary.tsx | 2 - .../organisms/TokenDasboardNavbar.tsx | 3 +- src/components/pages/TokenDashboard.tsx | 19 ++++-- .../PlasmicContainer.module.css | 68 +++++++++++++++++++ .../marsbase_components/PlasmicContainer.tsx | 9 ++- .../PlasmicRootContainer.module.css | 3 +- 14 files changed, 127 insertions(+), 34 deletions(-) diff --git a/plasmic.lock b/plasmic.lock index 1d873c1..f313683 100644 --- a/plasmic.lock +++ b/plasmic.lock @@ -154,12 +154,12 @@ { "type": "renderModule", "assetId": "514gf0jdxr", - "checksum": "cd1c8cc6d8e6e6be972de5fb42242084" + "checksum": "1c6b5e2e4f8001ce2808be8c41add7a2" }, { "type": "cssRules", "assetId": "514gf0jdxr", - "checksum": "cd1c8cc6d8e6e6be972de5fb42242084" + "checksum": "1c6b5e2e4f8001ce2808be8c41add7a2" }, { "type": "globalVariant", @@ -169,12 +169,12 @@ { "type": "renderModule", "assetId": "OWF7fqE1kH", - "checksum": "9e4553e8d63f421a9b20ceeac8754e07" + "checksum": "84523962fa1a6ab540fbae28616f41e2" }, { "type": "cssRules", "assetId": "OWF7fqE1kH", - "checksum": "9e4553e8d63f421a9b20ceeac8754e07" + "checksum": "84523962fa1a6ab540fbae28616f41e2" }, { "assetId": "ujWBNnbL2n4RZDdiZiYFdw", diff --git a/src/components/molecules/HeaderActions.tsx b/src/components/molecules/HeaderActions.tsx index 0f7bafd..fc6975e 100644 --- a/src/components/molecules/HeaderActions.tsx +++ b/src/components/molecules/HeaderActions.tsx @@ -17,13 +17,15 @@ export const HeaderActions: FC = ( }) => { const isMobile = useMediaQuery(Queries.mobile); const isTablet = useMediaQuery(Queries.tablet); + const isDesktop = (!isMobile && !isTablet) return ( diff --git a/src/components/molecules/NftCardOverview.tsx b/src/components/molecules/NftCardOverview.tsx index 7b7b997..a35b1e2 100644 --- a/src/components/molecules/NftCardOverview.tsx +++ b/src/components/molecules/NftCardOverview.tsx @@ -24,8 +24,8 @@ export const NftCardOverview: FC = ( return ( - - + {`${kind} + {isDesktop && ( {amount} MBase diff --git a/src/components/molecules/TokenDashboardHeader.tsx b/src/components/molecules/TokenDashboardHeader.tsx index 2d60df5..4579aac 100644 --- a/src/components/molecules/TokenDashboardHeader.tsx +++ b/src/components/molecules/TokenDashboardHeader.tsx @@ -7,6 +7,7 @@ import Container from "../Container"; import {Queries, useMediaQuery} from "../../hooks/mediaQuery"; import RootContainer from "../RootContainer"; import {style} from "typestyle"; +import {AppStateContext} from "../../contexts/AppStateContext"; export const TokenDashboardHeader = () => { const { data } = useContext(AppStateContext) diff --git a/src/components/organisms/NftTable.tsx b/src/components/organisms/NftTable.tsx index 323ff07..84fde46 100644 --- a/src/components/organisms/NftTable.tsx +++ b/src/components/organisms/NftTable.tsx @@ -6,7 +6,6 @@ import TableSorterState from "../stateful/TableSorterState"; import {NftsContainer} from "../stateful/NftContainer"; import Container from "../Container"; import {Queries, useMediaQuery} from "../../hooks/mediaQuery"; -import {HowIsLocalized} from "../molecules/HowIsDistributionDone"; export const NftTable: FC = ({nfts, onClaim, onActions}) => { const isMobile = useMediaQuery(Queries.mobile); @@ -17,9 +16,9 @@ export const NftTable: FC = ({nfts, onClaim, onActions}) => { return ( {isDesktop && } = ( return ( { - const { handlers } = useContext(AppStateContext) + const { handlers } = useContext(HandlersContext) const { nftsG } = useContext(NftsContext) return ( <> - + diff --git a/src/components/plasmic/marsbase_components/PlasmicContainer.module.css b/src/components/plasmic/marsbase_components/PlasmicContainer.module.css index 8c41d6f..bf3ca0d 100644 --- a/src/components/plasmic/marsbase_components/PlasmicContainer.module.css +++ b/src/components/plasmic/marsbase_components/PlasmicContainer.module.css @@ -181,6 +181,15 @@ .rootpadding__10 { padding: 10px; } +.rootmr__5 { + margin-right: 5px; +} +.rootmr__10 { + margin-right: 10px; +} +.rootmr__15 { + margin-right: 15px; +} .rootpadding__15 { padding: 15px; } diff --git a/src/components/plasmic/marsbase_components/PlasmicContainer.tsx b/src/components/plasmic/marsbase_components/PlasmicContainer.tsx index d4ad59f..4badb43 100644 --- a/src/components/plasmic/marsbase_components/PlasmicContainer.tsx +++ b/src/components/plasmic/marsbase_components/PlasmicContainer.tsx @@ -49,6 +49,7 @@ export type PlasmicContainer__VariantMembers = { margin: "_5" | "_10"; mb: "_5" | "_10" | "_15" | "_20" | "_25" | "_30"; gapRow: "_5" | "_10" | "_30"; + mr: "_5" | "_10" | "_15"; }; export type PlasmicContainer__VariantsArgs = { @@ -63,6 +64,7 @@ export type PlasmicContainer__VariantsArgs = { margin?: SingleChoiceArg<"_5" | "_10">; mb?: SingleChoiceArg<"_5" | "_10" | "_15" | "_20" | "_25" | "_30">; gapRow?: MultiChoiceArg<"_5" | "_10" | "_30">; + mr?: SingleChoiceArg<"_5" | "_10" | "_15">; }; type VariantPropType = keyof PlasmicContainer__VariantsArgs; @@ -77,7 +79,8 @@ export const PlasmicContainer__VariantProps = new Array( "borderRadius", "margin", "mb", - "gapRow" + "gapRow", + "mr" ); export type PlasmicContainer__ArgsType = { @@ -104,6 +107,7 @@ export interface DefaultContainerProps { margin?: SingleChoiceArg<"_5" | "_10">; mb?: SingleChoiceArg<"_5" | "_10" | "_15" | "_20" | "_25" | "_30">; gapRow?: MultiChoiceArg<"_5" | "_10" | "_30">; + mr?: SingleChoiceArg<"_5" | "_10" | "_15">; className?: string; } @@ -166,6 +170,9 @@ function PlasmicContainer__RenderFunc(props: { [sty.rootmb__25]: hasVariant(variants, "mb", "_25"), [sty.rootmb__30]: hasVariant(variants, "mb", "_30"), [sty.rootmb__5]: hasVariant(variants, "mb", "_5"), + [sty.rootmr__10]: hasVariant(variants, "mr", "_10"), + [sty.rootmr__15]: hasVariant(variants, "mr", "_15"), + [sty.rootmr__5]: hasVariant(variants, "mr", "_5"), [sty.rootpadding__0]: hasVariant(variants, "padding", "_0"), [sty.rootpadding__10]: hasVariant(variants, "padding", "_10"), [sty.rootpadding__15]: hasVariant(variants, "padding", "_15"), diff --git a/src/components/plasmic/marsbase_components/PlasmicRootContainer.module.css b/src/components/plasmic/marsbase_components/PlasmicRootContainer.module.css index bedf0f4..777855d 100644 --- a/src/components/plasmic/marsbase_components/PlasmicRootContainer.module.css +++ b/src/components/plasmic/marsbase_components/PlasmicRootContainer.module.css @@ -25,3 +25,6 @@ padding: 0px; } } +.freeBoxmb__110 { + margin-bottom: 110px; +} diff --git a/src/components/plasmic/marsbase_components/PlasmicRootContainer.tsx b/src/components/plasmic/marsbase_components/PlasmicRootContainer.tsx index 5d61c79..8ba6690 100644 --- a/src/components/plasmic/marsbase_components/PlasmicRootContainer.tsx +++ b/src/components/plasmic/marsbase_components/PlasmicRootContainer.tsx @@ -37,11 +37,18 @@ import "@plasmicapp/react-web/lib/plasmic.css"; import projectcss from "./plasmic_marsbase_components.module.css"; // plasmic-import: ujWBNnbL2n4RZDdiZiYFdw/projectcss import sty from "./PlasmicRootContainer.module.css"; // plasmic-import: OWF7fqE1kH/css -export type PlasmicRootContainer__VariantMembers = {}; +export type PlasmicRootContainer__VariantMembers = { + mb: "_110"; +}; + +export type PlasmicRootContainer__VariantsArgs = { + mb?: SingleChoiceArg<"_110">; +}; -export type PlasmicRootContainer__VariantsArgs = {}; type VariantPropType = keyof PlasmicRootContainer__VariantsArgs; -export const PlasmicRootContainer__VariantProps = new Array(); +export const PlasmicRootContainer__VariantProps = new Array( + "mb" +); export type PlasmicRootContainer__ArgsType = { children?: React.ReactNode; @@ -59,6 +66,7 @@ export type PlasmicRootContainer__OverridesType = { export interface DefaultRootContainerProps { children?: React.ReactNode; + mb?: SingleChoiceArg<"_110">; className?: string; } @@ -95,7 +103,9 @@ function PlasmicRootContainer__RenderFunc(props: {
{p.renderPlasmicSlot({ defaultContents: null, diff --git a/src/components/stateful/NftTableSummaryWrapper.tsx b/src/components/stateful/NftTableSummaryWrapper.tsx index 0c4bf57..aac041d 100644 --- a/src/components/stateful/NftTableSummaryWrapper.tsx +++ b/src/components/stateful/NftTableSummaryWrapper.tsx @@ -5,7 +5,7 @@ import {useModal} from "../../hooks/modal"; import {ClaimRewardsModalLocalized} from "../molecules/ClaimRewardsModal"; export const NftTableSummaryWrapper = () => { - const {data, handlers} = useContext(AppStateContext); + const {data} = useContext(AppStateContext); const [Modal, visible, setVisible] = useModal('claimAllRewards') return ( diff --git a/src/config.ts b/src/config.ts index e3bed84..c1edbfd 100644 --- a/src/config.ts +++ b/src/config.ts @@ -3,7 +3,7 @@ const chainIdToHex = (chainId: number) => `0x${chainId.toString(16)}` const mbaseTokenAddress = '0x765Eb9A1518C2906D11D330a11dBA294a7673E84' -const mbaseVestingAddress = '0xd37A38DC1BE88c33033821025A7CC5664d2b7328' +const mbaseVestingAddress = '0x9184B801B148838436E15B399681B40A37F7f009' export const NETWORKS = ([ { From 94466ed0360e4ca1bbbbe6f633f58520b839b649 Mon Sep 17 00:00:00 2001 From: Alex5 Date: Thu, 16 Jun 2022 15:47:02 +0300 Subject: [PATCH 10/18] components optimisation --- plasmic.lock | 18 +-- src/components/molecules/HeaderActions.tsx | 2 +- src/components/molecules/HeaderOverview.tsx | 10 +- .../molecules/HowIsDistributionDone.tsx | 25 ++-- src/components/molecules/LearningBlock.tsx | 47 ------- src/components/molecules/NftCard.tsx | 9 +- src/components/molecules/NftCardActions.tsx | 13 +- src/components/molecules/NftCardOverview.tsx | 8 +- ...ileProgressBar.tsx => NftCardProgress.tsx} | 18 ++- src/components/molecules/NftDetailsItem.tsx | 55 --------- src/components/molecules/NftOverview.tsx | 75 ----------- src/components/molecules/NftProgress.tsx | 73 ----------- src/components/molecules/Notification.tsx | 44 +++---- .../molecules/SummaryDestribution.tsx | 19 +-- .../molecules/TokenDashboardHeader.tsx | 2 +- src/components/molecules/types.ts | 18 ++- src/components/organisms/NftTableSummary.tsx | 1 + src/components/organisms/NftView.tsx | 1 - .../PlasmicContainer.module.css | 62 +++++++++- .../marsbase_components/PlasmicContainer.tsx | 28 ++++- .../PlasmicCount.module.css | 18 +-- .../marsbase_components/PlasmicCount.tsx | 32 ++--- .../PlasmicGlobalVariant__Screen.tsx | 5 +- .../PlasmicRootContainer.module.css | 2 +- .../PlasmicText.module.css | 4 + .../marsbase_components/PlasmicText.tsx | 116 ++++++++++-------- src/data.ts | 10 ++ src/plasmic-host.tsx | 27 ---- 28 files changed, 290 insertions(+), 452 deletions(-) delete mode 100644 src/components/molecules/LearningBlock.tsx rename src/components/molecules/{NftMobileProgressBar.tsx => NftCardProgress.tsx} (75%) delete mode 100644 src/components/molecules/NftDetailsItem.tsx delete mode 100644 src/components/molecules/NftOverview.tsx delete mode 100644 src/components/molecules/NftProgress.tsx diff --git a/plasmic.lock b/plasmic.lock index ea5779b..e84e756 100644 --- a/plasmic.lock +++ b/plasmic.lock @@ -19,22 +19,22 @@ { "type": "renderModule", "assetId": "sIxKMhfpOf", - "checksum": "089dd1829d762f997e18c1d1ff0ab7d7" + "checksum": "8c6861a78ab89fcf9c9be7819ccfaec8" }, { "type": "cssRules", "assetId": "sIxKMhfpOf", - "checksum": "089dd1829d762f997e18c1d1ff0ab7d7" + "checksum": "8c6861a78ab89fcf9c9be7819ccfaec8" }, { "type": "renderModule", "assetId": "ArKwfI2osU", - "checksum": "fde4bb3fb282fa515ae8e1783b241b49" + "checksum": "dfc4236e16bd17ace6fdad25f25e932f" }, { "type": "cssRules", "assetId": "ArKwfI2osU", - "checksum": "fde4bb3fb282fa515ae8e1783b241b49" + "checksum": "dfc4236e16bd17ace6fdad25f25e932f" }, { "type": "renderModule", @@ -154,27 +154,27 @@ { "type": "renderModule", "assetId": "514gf0jdxr", - "checksum": "d1b5bff2142b87a302e46a0e96b61c27" + "checksum": "88968b9df0564f2ccbb823e258482367" }, { "type": "cssRules", "assetId": "514gf0jdxr", - "checksum": "d1b5bff2142b87a302e46a0e96b61c27" + "checksum": "88968b9df0564f2ccbb823e258482367" }, { "type": "globalVariant", "assetId": "3lOXnHZSFmncl", - "checksum": "6f88bbd1e5f3edd6b37f1182c64cbbcb" + "checksum": "8c89fccd16276fb11024eb39e8907277" }, { "type": "renderModule", "assetId": "OWF7fqE1kH", - "checksum": "64c8d9737f407c147663d7c52c6e3476" + "checksum": "f6a1f5f230400688565e88bb827c4554" }, { "type": "cssRules", "assetId": "OWF7fqE1kH", - "checksum": "64c8d9737f407c147663d7c52c6e3476" + "checksum": "f6a1f5f230400688565e88bb827c4554" }, { "assetId": "ujWBNnbL2n4RZDdiZiYFdw", diff --git a/src/components/molecules/HeaderActions.tsx b/src/components/molecules/HeaderActions.tsx index fc6975e..f4c587e 100644 --- a/src/components/molecules/HeaderActions.tsx +++ b/src/components/molecules/HeaderActions.tsx @@ -25,7 +25,7 @@ export const HeaderActions: FC = ( direction={isMobile ? undefined : 'horizontal'} gapRow={isDesktop ? '_10' : undefined} justify={isTablet ? 'start' : undefined} - gap={'_15'} + gap={isDesktop ? undefined : '_15'} > + - - - - - + + setModal(false)} + availableForClaim={unclaimed} + onClaim={() => onClaim(id)} + kind={kind} + /> + + + ); }; diff --git a/src/components/molecules/TablePagination.tsx b/src/components/molecules/TablePagination.tsx deleted file mode 100644 index 360e05e..0000000 --- a/src/components/molecules/TablePagination.tsx +++ /dev/null @@ -1,83 +0,0 @@ -import React from "react" - -import { FC, ReactNode, useContext } from "react" -import { style } from "typestyle" -import {Text} from '../atoms/Text' -import {Count} from '../atoms/Count' -import { DictionaryContext } from "../../contexts/DictionaryContext" - -interface TablePaginationProps { - prevText: ReactNode - nextText: ReactNode - startNumbers: ReactNode[] - endNumbers: ReactNode[] -} - -export const TablePagination: FC = ({ prevText, nextText, startNumbers, endNumbers }) => { - return ( -
-
- - Prev - - - 1 - - - 2 - - - 3 - - - ... - - - 25 - - - 25 - - - 26 - - - Next - -
-
- ) -} - -const container = style({ - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - width: '100%' -}) - -const numbers = style({ - display: 'flex', - justifyContent: 'space-between', - alignItems: 'center', - width: '300px' -}) - - -type TablePaginationLocalizedProps = Omit - -export const TablePaginationLocalized: FC = (props) => { - const { nft } = useContext(DictionaryContext) - - return -} - -interface TablePaginationWrapperProps { - startNumbers: number[]; - endNumbers: number[]; -} - -export const TablePaginationWrapper: FC = (props) => { - return -} diff --git a/src/components/molecules/types.ts b/src/components/molecules/types.ts index 563df82..9820a62 100644 --- a/src/components/molecules/types.ts +++ b/src/components/molecules/types.ts @@ -112,11 +112,12 @@ export interface ClaimRewardsModalProps { inputLabelUp: ReactNode btnClaim: ReactNode token: ReactNode - amount: ReactNode + amount?: ReactNode onClose: () => void availableForClaim: ReactNode; onClaim: () => void - btnClaimLoad: boolean + btnClaimLoad?: boolean + kind: TagLabelColors; } export type ClaimRewardsModalLocalizedProps = Omit + Pick & { claim_btn: ReactNode, actions_btn: ReactNode } export type NftCardActionsLocalizedProps = Omit export type NftCardProgressProps = Pick & {claim_btn: ReactNode} + 'locked' | 'token' | 'percentComplete' | 'timePassed' | 'timeLeft'> & { claim_btn: ReactNode } export type NftOverviewProps = { amount: React.ReactNode @@ -169,4 +170,4 @@ export type NftCardOverviewLocalizedProps = Omit = props => ( diff --git a/src/components/organisms/NftTable.tsx b/src/components/organisms/NftTable.tsx index 84fde46..7155092 100644 --- a/src/components/organisms/NftTable.tsx +++ b/src/components/organisms/NftTable.tsx @@ -9,9 +9,6 @@ import {Queries, useMediaQuery} from "../../hooks/mediaQuery"; export const NftTable: FC = ({nfts, onClaim, onActions}) => { const isMobile = useMediaQuery(Queries.mobile); - const isTablet = useMediaQuery(Queries.tablet); - - const isDesktop = (!isMobile && !isTablet); return ( @@ -20,7 +17,6 @@ export const NftTable: FC = ({nfts, onClaim, onActions}) => { borderRadius={'_8'} padding={!isMobile ? '_10' : undefined} > - {isDesktop && } { const { handlers } = useContext(HandlersContext) - const { nftsG } = useContext(NftsContext) + const { nftsG } = useContext(NftsContext); + const [Modal, ,setModal] = useModal('false'); return ( <> @@ -31,7 +34,19 @@ const TokenDashboard = () => { + + + + setModal(false)} + availableForClaim={0} + onClaim={() => null} + kind={'silver'} + /> + ) } @@ -40,6 +55,7 @@ const MemoHeader = React.memo(() => ( <> + )) diff --git a/src/components/stateful/NftContainer.tsx b/src/components/stateful/NftContainer.tsx index 1b2bb99..b455b22 100644 --- a/src/components/stateful/NftContainer.tsx +++ b/src/components/stateful/NftContainer.tsx @@ -4,6 +4,7 @@ import {style} from "typestyle"; import {IMobileNftsContainer} from "../organisms/types"; import NftCard from "../molecules/NftCard"; import React from "react"; +import TableSorterState from "./TableSorterState"; export const NftsContainer: FC> = ( { @@ -13,18 +14,22 @@ export const NftsContainer: FC> = ( }) => { const isMobile = useMediaQuery(Queries.mobile); const isTablet = useMediaQuery(Queries.tablet); + const isDesktop = (!isMobile && !isTablet); return ( -
- {nfts.map((nft) => - - )} -
+ <> + {isDesktop && } +
+ {nfts.map((nft) => + + )} +
+ ) } diff --git a/src/hooks/modal.ts b/src/hooks/modal.ts index b056563..8e333c3 100644 --- a/src/hooks/modal.ts +++ b/src/hooks/modal.ts @@ -14,7 +14,7 @@ export const useModal = (id: string): [FC>, boolean, Dispa const element = document.createElement("div"); element.setAttribute("id", id); - const modalRoot = document.getElementById('modals'); + const modalRoot = document.getElementById('modal-root'); if (!modalRoot) { throw new Error('modalRoot not exist') From b0f539f4c3c7077de613cf267d056df49aacb645 Mon Sep 17 00:00:00 2001 From: Alex5 Date: Fri, 17 Jun 2022 13:26:21 +0300 Subject: [PATCH 12/18] add new logic to modal.ts --- index.html | 1 - package.json | 2 + .../molecules/ClaimRewardsModal.tsx | 72 +++++++++---------- src/components/molecules/NftCardActions.tsx | 5 +- .../organisms/MetaMaskStateWrappers.tsx | 3 +- .../organisms/TokenDasboardNavbar.tsx | 4 +- .../organisms/VestingSplitDetails.tsx | 2 +- src/components/pages/TokenDashboard.tsx | 23 ++---- src/components/stateful/NftContainer.tsx | 4 +- .../stateful/NftTableSummaryWrapper.tsx | 5 +- src/hooks/modal.ts | 46 ------------ src/hooks/modal.tsx | 36 ++++++++++ yarn.lock | 38 +++++++++- 13 files changed, 123 insertions(+), 118 deletions(-) delete mode 100644 src/hooks/modal.ts create mode 100644 src/hooks/modal.tsx diff --git a/index.html b/index.html index c3084ae..8f6522b 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,6 @@
- diff --git a/package.json b/package.json index c60dbd2..2c28b50 100644 --- a/package.json +++ b/package.json @@ -8,11 +8,13 @@ "@otcmarsbase/token-contract-types": "^0.1.1", "@plasmicapp/loader-react": "^1.0.54", "@plasmicapp/react-web": "^0.2.96", + "@types/react-modal": "^3.13.1", "babel-polyfill": "^6.26.0", "ethers": "^5.6.4", "metamask-react": "^2.4.0", "react": "^18.0.0", "react-dom": "^18.0.0", + "react-modal": "^3.15.1", "react-spinners": "^0.12.0", "swr": "^1.3.0", "typestyle": "^2.3.0", diff --git a/src/components/molecules/ClaimRewardsModal.tsx b/src/components/molecules/ClaimRewardsModal.tsx index aafdcf7..c49d292 100644 --- a/src/components/molecules/ClaimRewardsModal.tsx +++ b/src/components/molecules/ClaimRewardsModal.tsx @@ -1,4 +1,4 @@ -import React, {FC, useContext, useEffect} from 'react'; +import React, {FC, memo, useContext, useEffect} from 'react'; import {Queries, useMediaQuery} from "../../hooks/mediaQuery"; import {createPortal} from "react-dom"; import {style} from "typestyle"; @@ -24,53 +24,46 @@ const ClaimRewardsModal: FC = ({all, ...props}) => { } }, []) - return
-
-
-
-
-
- {props.headerTitle} - {props.headerTitle} -
- + return ( +
+
+
+
+
+
+ {props.headerTitle} + {props.headerTitle} +
+ {props.bodyTitle} - {!all && ( -
- - {props.amount} {props.token} -
- )} - } - withIconRight - > - {props.inputLabelUp} - } - showUpLabel - color={'whiteStroke'} - value={props.availableForClaim} - /> - - - - + {!all && ( +
+ + {props.amount} {props.token} +
+ )} + + {props.availableForClaim} + + + + + + +
-
- + ) }; export const ClaimRewardsModalLocalized: FC = (props) => { @@ -106,7 +99,6 @@ const modalContainer = style({ display: 'flex', width: '100%', justifyContent: 'center', - marginBottom: '83px', }) const modalWrapper = (isMobile: boolean) => style({ diff --git a/src/components/molecules/NftCardActions.tsx b/src/components/molecules/NftCardActions.tsx index 8ae5a19..e73d5e4 100644 --- a/src/components/molecules/NftCardActions.tsx +++ b/src/components/molecules/NftCardActions.tsx @@ -5,8 +5,9 @@ import {Text} from "../atoms/Text"; import Container from "../Container"; import {Queries, useMediaQuery} from "../../hooks/mediaQuery"; import {DictionaryContext} from "../../contexts/DictionaryContext"; -import {useModal} from "../../hooks/modal"; +import Modal from 'react-modal'; import {ClaimRewardsModalLocalized} from "./ClaimRewardsModal"; +import {useModal} from "../../hooks/modal"; const NftCardActions: FC = ( { @@ -23,7 +24,7 @@ const NftCardActions: FC = ( const isMobile = useMediaQuery(Queries.mobile); const isTablet = useMediaQuery(Queries.tablet); const isDesktop = (!isMobile && !isTablet); - const [Modal, , setModal] = useModal('claimRewards'); + const [Modal, ,setModal] = useModal(); return ( <> diff --git a/src/components/organisms/MetaMaskStateWrappers.tsx b/src/components/organisms/MetaMaskStateWrappers.tsx index f083f39..89f51a4 100644 --- a/src/components/organisms/MetaMaskStateWrappers.tsx +++ b/src/components/organisms/MetaMaskStateWrappers.tsx @@ -3,10 +3,9 @@ import { EvmNetwork } from "../../config" import { AppStateProvider } from "../../contexts/AppStateContext" import { HandlersProvider } from "../../contexts/HandlersContext" import { NftsContextProvider } from "../../contexts/NftsContext" -import { RoundingContext, RoundingContextProvider } from "../../contexts/RoundingsContext" +import { RoundingContextProvider } from "../../contexts/RoundingsContext" import { MarsbaseTokenProvider, MarsbaseVestingProvider } from "../../hooks/mbase-contract" import TokenDashboard from "../pages/TokenDashboard" -import {ClaimRewardsModalLocalized} from "../molecules/ClaimRewardsModal"; export const MetamaskConnected: React.FC<{ network: EvmNetwork }> = props => ( diff --git a/src/components/organisms/TokenDasboardNavbar.tsx b/src/components/organisms/TokenDasboardNavbar.tsx index 334bfe6..de6e5f4 100644 --- a/src/components/organisms/TokenDasboardNavbar.tsx +++ b/src/components/organisms/TokenDasboardNavbar.tsx @@ -78,7 +78,7 @@ const TokenDashboardNavbar = () => { return null } - return createPortal( + return (
{navbarMenu.map(menuItem => ( @@ -94,7 +94,7 @@ const TokenDashboardNavbar = () => { ))}
- , modalsRoot); + ) }; const navbar = style({ diff --git a/src/components/organisms/VestingSplitDetails.tsx b/src/components/organisms/VestingSplitDetails.tsx index 9372765..c7b7c2c 100644 --- a/src/components/organisms/VestingSplitDetails.tsx +++ b/src/components/organisms/VestingSplitDetails.tsx @@ -114,7 +114,7 @@ const VestingSplitDetails: React.FC = props => { -
diff --git a/src/components/pages/TokenDashboard.tsx b/src/components/pages/TokenDashboard.tsx index 2879d26..fd42e9a 100644 --- a/src/components/pages/TokenDashboard.tsx +++ b/src/components/pages/TokenDashboard.tsx @@ -1,4 +1,4 @@ -import React, {useState} from "react" +import React from "react" import TokenDashboardNavbar from "../organisms/TokenDasboardNavbar"; import {TokenDashboardHeader} from "../molecules/TokenDashboardHeader" import {useContext} from "react" @@ -10,13 +10,10 @@ import RootContainer from "../RootContainer"; import Container from "../Container"; import {HowIsLocalized} from "../molecules/HowIsDistributionDone"; import {HandlersContext} from "../../contexts/HandlersContext"; -import {ClaimRewardsModalLocalized} from "../molecules/ClaimRewardsModal"; -import {useModal} from "../../hooks/modal"; const TokenDashboard = () => { - const { handlers } = useContext(HandlersContext) - const { nftsG } = useContext(NftsContext); - const [Modal, ,setModal] = useModal('false'); + const {handlers} = useContext(HandlersContext) + const {nftsG} = useContext(NftsContext); return ( <> @@ -33,20 +30,8 @@ const TokenDashboard = () => { - - + {/**/} - - - setModal(false)} - availableForClaim={0} - onClaim={() => null} - kind={'silver'} - /> - ) } diff --git a/src/components/stateful/NftContainer.tsx b/src/components/stateful/NftContainer.tsx index b455b22..7534cc0 100644 --- a/src/components/stateful/NftContainer.tsx +++ b/src/components/stateful/NftContainer.tsx @@ -1,4 +1,4 @@ -import {FC, PropsWithChildren} from "react"; +import {FC, PropsWithChildren, useMemo} from "react"; import {Queries, useMediaQuery} from "../../hooks/mediaQuery"; import {style} from "typestyle"; import {IMobileNftsContainer} from "../organisms/types"; @@ -16,6 +16,8 @@ export const NftsContainer: FC> = ( const isTablet = useMediaQuery(Queries.tablet); const isDesktop = (!isMobile && !isTablet); + + return ( <> {isDesktop && } diff --git a/src/components/stateful/NftTableSummaryWrapper.tsx b/src/components/stateful/NftTableSummaryWrapper.tsx index aac041d..f8f0383 100644 --- a/src/components/stateful/NftTableSummaryWrapper.tsx +++ b/src/components/stateful/NftTableSummaryWrapper.tsx @@ -1,12 +1,12 @@ import React, {FC, ReactNode, useContext} from "react"; import {AppStateContext} from "../../contexts/AppStateContext"; import {NftTableSummary} from "../organisms/NftTableSummary"; -import {useModal} from "../../hooks/modal"; import {ClaimRewardsModalLocalized} from "../molecules/ClaimRewardsModal"; +import {useModal} from "../../hooks/modal"; export const NftTableSummaryWrapper = () => { const {data} = useContext(AppStateContext); - const [Modal, visible, setVisible] = useModal('claimAllRewards') + const [Modal, visible, setVisible] = useModal(); return ( <> @@ -25,6 +25,7 @@ export const NftTableSummaryWrapper = () => { availableForClaim={123123123} onClaim={() => console.log('on claim click')} btnClaimLoad={false} + kind={'silver'} /> diff --git a/src/hooks/modal.ts b/src/hooks/modal.ts deleted file mode 100644 index 8e333c3..0000000 --- a/src/hooks/modal.ts +++ /dev/null @@ -1,46 +0,0 @@ -import {createPortal} from "react-dom"; -import { - Dispatch, - FC, PropsWithChildren, - ReactNode, - SetStateAction, - useState -} from "react"; - -export const useModal = (id: string): [FC>, boolean, Dispatch>] => { - const [open, setOpen] = useState(false); - - const handleOpen = (children: ReactNode) => { - const element = document.createElement("div"); - element.setAttribute("id", id); - - const modalRoot = document.getElementById('modal-root'); - - if (!modalRoot) { - throw new Error('modalRoot not exist') - } - - modalRoot.appendChild(element); - - return createPortal(children, element) - } - - const handleClose = () => { - const el = document.getElementById(id); - - if (el) { - el.remove() - } - - return null; - } - - - const Modal: FC> = ({children}) => { - return open - ? handleOpen(children) - : handleClose() - } - - return [Modal, open, setOpen] -} \ No newline at end of file diff --git a/src/hooks/modal.tsx b/src/hooks/modal.tsx new file mode 100644 index 0000000..696e437 --- /dev/null +++ b/src/hooks/modal.tsx @@ -0,0 +1,36 @@ +import { + Dispatch, + FC, PropsWithChildren, + SetStateAction, + useState +} from "react"; +import Modal from "react-modal"; +import React from "react"; + +Modal.setAppElement('#modals'); + +export const useModal = (): [FC>, boolean, Dispatch>] => { + const [modalIsOpen, setIsOpen] = useState(false); + + const customStyles = { + overlay: { + backgroundColor: 'unset' + }, + content: { + inset: 0, + border: 'unset', + borderRadius: 'unset', + backgroundColor: 'unset' + }, + }; + + const ReturnModal: FC> = ({children}) => { + return modalIsOpen + ? + {children} + + : null + } + + return [ReturnModal, modalIsOpen, setIsOpen] +} \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 626e26e..281bb1f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1559,6 +1559,13 @@ dependencies: "@types/react" "*" +"@types/react-modal@^3.13.1": + version "3.13.1" + resolved "https://registry.yarnpkg.com/@types/react-modal/-/react-modal-3.13.1.tgz#5b9845c205fccc85d9a77966b6e16dc70a60825a" + integrity sha512-iY/gPvTDIy6Z+37l+ibmrY+GTV4KQTHcCyR5FIytm182RQS69G5ps4PH2FxtC7bAQ2QRHXMevsBgck7IQruHNg== + dependencies: + "@types/react" "*" + "@types/react@*", "@types/react@^18.0.6": version "18.0.9" resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.9.tgz#d6712a38bd6cd83469603e7359511126f122e878" @@ -2323,6 +2330,11 @@ ethers@^5.6.4: "@ethersproject/web" "5.6.0" "@ethersproject/wordlists" "5.6.0" +exenv@^1.2.0: + version "1.2.2" + resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d" + integrity sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw== + expand-tilde@^2.0.0, expand-tilde@^2.0.2: version "2.0.2" resolved "https://registry.yarnpkg.com/expand-tilde/-/expand-tilde-2.0.2.tgz#97e801aa052df02454de46b02bf621642cdc8502" @@ -2885,7 +2897,7 @@ logform@^2.3.2, logform@^2.4.0: safe-stable-stringify "^2.3.1" triple-beam "^1.3.0" -loose-envify@^1.1.0, loose-envify@^1.4.0: +loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf" integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q== @@ -3191,7 +3203,7 @@ process@^0.11.1: resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182" integrity sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A== -prop-types@^15.6.2: +prop-types@^15.6.2, prop-types@^15.7.2: version "15.8.1" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== @@ -3248,6 +3260,21 @@ react-is@^17.0.2: resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0" integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w== +react-lifecycles-compat@^3.0.0: + version "3.0.4" + resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" + integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA== + +react-modal@^3.15.1: + version "3.15.1" + resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-3.15.1.tgz#950ce67bfef80971182dd0ed38f2d9b1a681288b" + integrity sha512-duB9bxOaYg7Zt6TMFldIFxQRtSP+Dg3F1ZX3FXxSUn+3tZZ/9JCgeAQKDg7rhZSAqopq8TFRw3yIbnx77gyFTw== + dependencies: + exenv "^1.2.0" + prop-types "^15.7.2" + react-lifecycles-compat "^3.0.0" + warning "^4.0.3" + react-refresh@^0.13.0: version "0.13.0" resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.13.0.tgz#cbd01a4482a177a5da8d44c9755ebb1f26d5a1c1" @@ -3746,6 +3773,13 @@ vite@^2.9.5: optionalDependencies: fsevents "~2.3.2" +warning@^4.0.3: + version "4.0.3" + resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3" + integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w== + dependencies: + loose-envify "^1.0.0" + webidl-conversions@^3.0.0: version "3.0.1" resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871" From 2b98308f3d6652d011fb92509842827414cb1a37 Mon Sep 17 00:00:00 2001 From: Alex5 Date: Fri, 17 Jun 2022 14:05:11 +0300 Subject: [PATCH 13/18] add onAvailableForClaimChange props to ClaimRewardsModal.tsx --- .../molecules/ClaimRewardsModal.tsx | 22 ++++++++++++++----- src/components/molecules/NftCardActions.tsx | 1 + src/components/molecules/types.ts | 1 + src/components/pages/TokenDashboard.tsx | 2 +- src/hooks/modal.tsx | 6 +++-- 5 files changed, 23 insertions(+), 9 deletions(-) diff --git a/src/components/molecules/ClaimRewardsModal.tsx b/src/components/molecules/ClaimRewardsModal.tsx index c49d292..4181efe 100644 --- a/src/components/molecules/ClaimRewardsModal.tsx +++ b/src/components/molecules/ClaimRewardsModal.tsx @@ -26,7 +26,7 @@ const ClaimRewardsModal: FC = ({all, ...props}) => { return (
-
+
@@ -45,10 +45,19 @@ const ClaimRewardsModal: FC = ({all, ...props}) => { {props.amount} {props.token}
)} - - {props.availableForClaim} - - + } + withIconRight + > + {props.inputLabelUp} + } + showUpLabel + color={'whiteStroke'} + value={props.availableForClaim} + onChange={props.onAvailableForClaimChange} + /> + + + ) } diff --git a/src/hooks/modal.tsx b/src/hooks/modal.tsx index b0b7327..ff196e1 100644 --- a/src/hooks/modal.tsx +++ b/src/hooks/modal.tsx @@ -5,8 +5,7 @@ import { useState } from "react"; import Modal from "react-modal"; -import React from "react"; -import {Queries, useMediaQuery} from "./mediaQuery"; +import React from "react" Modal.setAppElement('#modals'); @@ -22,7 +21,6 @@ export const useModal = (): [FC>, boolean, Dispatch Date: Tue, 21 Jun 2022 15:02:18 +0300 Subject: [PATCH 15/18] fix README.md --- README.md | 57 ++++++++++++++++--------------------------------------- 1 file changed, 16 insertions(+), 41 deletions(-) diff --git a/README.md b/README.md index b58e0af..4df4db1 100644 --- a/README.md +++ b/README.md @@ -1,46 +1,21 @@ -# Getting Started with Create React App +# Token-Dashboard -This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). +## The process of creating a new View component in plasmics -## Available Scripts +- Go to the [plasmic website](https://www.plasmic.app) +- Log in to the application by clicking on the Sign In + button - We get to the page of your projects, select the project you need (In my case, this is Marsbase Components) +- Select the Outline item in the left menu (You can see the name of the item if you put the cursor on it and wait a little) +- To the right of the menu is the control panel based on the selected menu +- Let's go through the interface of the panel, from above we see the search and to the right of it the add entity button +- Click on the add button to the right of the search +- Select New component +- A modal window opens, enter a new name for the component, click on the Create component button +- After you will be transferred to the editing panel of the coponent you created +- Congratulations, a new component has been created -In the project directory, you can run: +Plasmic has an excellent interactive guide to all the necessary basics [Plasmic Levels](https://studio.plasmic.app/projects/neE2eL2574vq4hqWRfrzQK) -### `yarn start` +## How to throw propses into components in plasmics -Runs the app in the development mode.\ -Open [http://localhost:3000](http://localhost:3000) to view it in the browser. - -The page will reload if you make edits.\ -You will also see any lint errors in the console. - -### `yarn test` - -Launches the test runner in the interactive watch mode.\ -See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. - -### `yarn build` - -Builds the app for production to the `build` folder.\ -It correctly bundles React in production mode and optimizes the build for the best performance. - -The build is minified and the filenames include the hashes.\ -Your app is ready to be deployed! - -See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. - -### `yarn eject` - -**Note: this is a one-way operation. Once you `eject`, you can’t go back!** - -If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. - -Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. - -You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. - -## Learn More - -You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). - -To learn React, check out the [React documentation](https://reactjs.org/). +- All props are created automatically based on the added options \ No newline at end of file From d17d48fdadd4c018c9a196f28291e0fce8be7ae5 Mon Sep 17 00:00:00 2001 From: Alex5 Date: Tue, 21 Jun 2022 21:33:52 +0300 Subject: [PATCH 16/18] component optimisation --- src/components/molecules/NftCardProgress.tsx | 15 +++---- src/components/molecules/NftSelectCard.tsx | 27 +++++++++--- src/components/molecules/Notification.tsx | 6 +-- .../molecules/SplitDetailsSection.tsx | 43 +++++++++++-------- src/components/molecules/types.ts | 19 +++++++- src/data.ts | 5 +++ 6 files changed, 79 insertions(+), 36 deletions(-) diff --git a/src/components/molecules/NftCardProgress.tsx b/src/components/molecules/NftCardProgress.tsx index ff11d06..962b90a 100644 --- a/src/components/molecules/NftCardProgress.tsx +++ b/src/components/molecules/NftCardProgress.tsx @@ -3,6 +3,7 @@ import {Text} from "../atoms/Text"; import {style} from "typestyle"; import {NftCardProgressProps} from "./types"; import {DictionaryContext} from "../../contexts/DictionaryContext"; +import Container from "../Container"; const NftCardProgress: FC = ( { @@ -13,18 +14,16 @@ const NftCardProgress: FC = ( timeLeft }) => { return ( -
+
{locked} {token} Locked
-
-
-
-
+
+
-
+
{100 - percentComplete}% {timePassed} @@ -33,8 +32,8 @@ const NftCardProgress: FC = ( {percentComplete}% {timeLeft}
-
-
+ + ); }; diff --git a/src/components/molecules/NftSelectCard.tsx b/src/components/molecules/NftSelectCard.tsx index 28b4ba9..b658ce6 100644 --- a/src/components/molecules/NftSelectCard.tsx +++ b/src/components/molecules/NftSelectCard.tsx @@ -1,10 +1,11 @@ -import React, {FC} from 'react'; +import React, {FC, useContext} from 'react'; import {Text} from '../atoms/Text' import {Label} from '../atoms/Label' import {style} from "typestyle"; import {INftSelectCard} from "./types"; -import { colors } from './CONSTANTS'; +import {colors} from './CONSTANTS'; +import {DictionaryContext} from "../../contexts/DictionaryContext"; const NftSelectCard: FC = ( { @@ -14,7 +15,9 @@ const NftSelectCard: FC = ( token, usd, price, - started + started, + priceText, + startedText }) => { return ( @@ -27,10 +30,10 @@ const NftSelectCard: FC = (
@@ -38,6 +41,20 @@ const NftSelectCard: FC = ( ); }; +type NftSelectCardLocalizedProps = Omit + +export const NftSelectCardLocalized: FC = (props) => { + const {nft} = useContext(DictionaryContext); + + return ( + + ) +} + const container = style({ display: 'flex', padding: '12px 24px 12px 24px' diff --git a/src/components/molecules/Notification.tsx b/src/components/molecules/Notification.tsx index 4e97279..739dfdc 100644 --- a/src/components/molecules/Notification.tsx +++ b/src/components/molecules/Notification.tsx @@ -8,7 +8,7 @@ import {NotificationsProps} from "./types"; import Container from "../Container"; import {DictionaryContext} from "../../contexts/DictionaryContext"; -const Notification: FC = ({type}) => { +const Notification: FC = ({type, title, subTitle}) => { const isMobile = useMediaQuery(Queries.mobile); const isTablet = useMediaQuery(Queries.tablet) const isPc = (!isMobile && !isTablet); @@ -20,9 +20,9 @@ const Notification: FC = ({type}) => {
- Done + {title} {isPc && ( - Every time after using Mars Base, we recommend you to disconnect. + {subTitle} )}
diff --git a/src/components/molecules/SplitDetailsSection.tsx b/src/components/molecules/SplitDetailsSection.tsx index 081126c..c423570 100644 --- a/src/components/molecules/SplitDetailsSection.tsx +++ b/src/components/molecules/SplitDetailsSection.tsx @@ -1,16 +1,8 @@ -import React, {FC} from 'react'; +import React, {FC, ReactNode, useContext} from 'react'; import {Text} from "../atoms/Text"; import {style} from "typestyle"; - -interface SplitDetailsSectionProps { - amount?: number; - token?: string; - usd?: number; - percent?: number; - partIndex?: number; - totalFee?: boolean; - totalParts?: number; -} +import {SplitDetailsSectionLocalizedProps, SplitDetailsSectionProps} from "./types"; +import {DictionaryContext} from "../../contexts/DictionaryContext"; const SplitDetailsSection: FC = ( { @@ -20,14 +12,18 @@ const SplitDetailsSection: FC = ( percent, partIndex, totalFee, - totalParts + totalParts, + totalPartsLabel, + totalFeeLabel, + partsLabel }) => { + return (
- {totalFee && Total fee} - {partIndex && Part ${partIndex}} - {totalParts && Total parts} + {totalFee && {totalPartsLabel}} + {partIndex && {partsLabel} ${partIndex}} + {totalParts && {totalFeeLabel}}
{totalParts} @@ -35,7 +31,7 @@ const SplitDetailsSection: FC = ( <> {amount} {token} ({percent}%) {usd && ( - ~20,000,00 $ + ~{usd} $ )} )} @@ -44,6 +40,17 @@ const SplitDetailsSection: FC = ( ); }; +export const SplitDetailsSectionLocalized: FC = (props) => { + const {nft} = useContext(DictionaryContext); + + return +} + const container = style({ display: 'flex', justifyContent: 'space-between', @@ -51,6 +58,4 @@ const container = style({ paddingBottom: '10px', borderBottom: '1px solid rgba(42, 42, 44, 1)', marginBottom: '10px' -}) - -export default SplitDetailsSection; \ No newline at end of file +}) \ No newline at end of file diff --git a/src/components/molecules/types.ts b/src/components/molecules/types.ts index 189245e..b7a7777 100644 --- a/src/components/molecules/types.ts +++ b/src/components/molecules/types.ts @@ -93,6 +93,8 @@ export interface INftSelectCard { usd: ReactNode; price: ReactNode; started: ReactNode; + priceText: ReactNode; + startedText: ReactNode; } export interface SummaryDestributionProps { @@ -173,4 +175,19 @@ export type NotificationsProps = { export interface SelectNftModalProps { nfts: INft[] -} \ No newline at end of file +} + +export interface SplitDetailsSectionProps { + amount?: ReactNode + token?: ReactNode + usd?: ReactNode + percent?: ReactNode + partIndex?: ReactNode + totalFee?: ReactNode + totalParts?: ReactNode + totalFeeLabel: ReactNode + totalPartsLabel: ReactNode + partsLabel: ReactNode +} + +export type SplitDetailsSectionLocalizedProps = Omit \ No newline at end of file diff --git a/src/data.ts b/src/data.ts index 7bc9a25..92eb1ed 100644 --- a/src/data.ts +++ b/src/data.ts @@ -74,6 +74,11 @@ export const DICT = { "without slippage or market price impact", sell_with_premium_btn: (token: string) => `Sell ${token} with premium`, buy_now_btn: (token: string) => `Buy ${token} now`, + splitDetails: { + totalFeeLabel: 'Total fee', + partsLabel: 'Part', + totalPartsLabel: 'Total parts' + } } } }, From 404471540089be15ce082a49b67d9a18a0e01bfc Mon Sep 17 00:00:00 2001 From: Alex5 Date: Wed, 22 Jun 2022 15:07:07 +0300 Subject: [PATCH 17/18] optimisation VestingSplit components --- .../molecules/ClaimRewardsModal.tsx | 4 +- src/components/molecules/NftCardProgress.tsx | 6 +- src/components/molecules/NftSelectCard.tsx | 17 ++---- src/components/molecules/Notification.tsx | 3 +- src/components/molecules/VestingActions.tsx | 11 +--- .../molecules/VestingSplitOverview.tsx | 19 ++---- .../organisms/MetaMaskStateWrappers.tsx | 4 +- src/components/organisms/NftView.tsx | 2 +- src/components/organisms/SelectNftModal.tsx | 4 +- .../organisms/VestingSplitDetails.tsx | 10 ++-- .../organisms/VestingSplitHeader.tsx | 8 +-- .../organisms/VestingSplitSteps.tsx | 58 ++++++++----------- src/components/organisms/types.ts | 14 ++++- src/components/pages/TokenDashboard.tsx | 6 -- src/components/pages/VestingSplit.tsx | 34 +++++------ .../stateful/NftTableSummaryWrapper.tsx | 1 + src/data.ts | 19 +++++- 17 files changed, 104 insertions(+), 116 deletions(-) diff --git a/src/components/molecules/ClaimRewardsModal.tsx b/src/components/molecules/ClaimRewardsModal.tsx index 4181efe..eefc48b 100644 --- a/src/components/molecules/ClaimRewardsModal.tsx +++ b/src/components/molecules/ClaimRewardsModal.tsx @@ -41,7 +41,8 @@ const ClaimRewardsModal: FC = ({all, ...props}) => { {!all && (
- + {props.amount} {props.token}
)} @@ -66,7 +67,6 @@ const ClaimRewardsModal: FC = ({all, ...props}) => { {props.btnClaim} -
diff --git a/src/components/molecules/NftCardProgress.tsx b/src/components/molecules/NftCardProgress.tsx index 962b90a..436bd57 100644 --- a/src/components/molecules/NftCardProgress.tsx +++ b/src/components/molecules/NftCardProgress.tsx @@ -13,6 +13,7 @@ const NftCardProgress: FC = ( timePassed, timeLeft }) => { + return (
@@ -23,7 +24,7 @@ const NftCardProgress: FC = (
- +
{100 - percentComplete}% {timePassed} @@ -51,7 +52,8 @@ const progressContainer = style({ backgroundColor: 'rgba(104, 106, 110, 1)', borderRadius: '4px', position: 'relative', - height: '6px' + height: '6px', + width: '100%' }) const progressLine = (progress: number) => style({ diff --git a/src/components/molecules/NftSelectCard.tsx b/src/components/molecules/NftSelectCard.tsx index b658ce6..adc50e4 100644 --- a/src/components/molecules/NftSelectCard.tsx +++ b/src/components/molecules/NftSelectCard.tsx @@ -21,8 +21,8 @@ const NftSelectCard: FC = ( }) => { return ( -
- +
+ {`${colors[kind].icon}
{`${amount} ${token}`} @@ -55,15 +55,8 @@ export const NftSelectCardLocalized: FC = (props) = ) } -const container = style({ - display: 'flex', - padding: '12px 24px 12px 24px' -}) - -const containerActive = style({ +const container = (active?: boolean) => style({ display: 'flex', padding: '12px 24px 12px 24px', - backgroundColor: 'rgba(173, 54, 19, 0.2)' -}); - -export default NftSelectCard; \ No newline at end of file + backgroundColor: active ? 'rgba(173, 54, 19, 0.2)' : 'unset' +}) \ No newline at end of file diff --git a/src/components/molecules/Notification.tsx b/src/components/molecules/Notification.tsx index 739dfdc..d19b7c7 100644 --- a/src/components/molecules/Notification.tsx +++ b/src/components/molecules/Notification.tsx @@ -17,7 +17,8 @@ const Notification: FC = ({type, title, subTitle}) => {
- + {'notification
{title} diff --git a/src/components/molecules/VestingActions.tsx b/src/components/molecules/VestingActions.tsx index cf7d46b..90f4873 100644 --- a/src/components/molecules/VestingActions.tsx +++ b/src/components/molecules/VestingActions.tsx @@ -37,7 +37,7 @@ const VestingActions: FC = (props) => { type VestingActionsLocalizedProps = Omit -const VestingActionsLocalized: FC = (props) => { +export const VestingActionsLocalized: FC = (props) => { const {nft} = useContext(DictionaryContext); return ( @@ -49,15 +49,6 @@ const VestingActionsLocalized: FC = (props) => { ) } -interface VestingActionsWrapperProps { - token: string; - onSellWithPremium: () => void; - onBuyNow: () => void -} - -export const VestingActionsWrapper: FC = (props) => { - return -} const container = (isMobile: boolean) => style({ display: 'flex', diff --git a/src/components/molecules/VestingSplitOverview.tsx b/src/components/molecules/VestingSplitOverview.tsx index ecdb6f5..54a5d78 100644 --- a/src/components/molecules/VestingSplitOverview.tsx +++ b/src/components/molecules/VestingSplitOverview.tsx @@ -4,12 +4,7 @@ import {style} from 'typestyle'; import {DictionaryContext} from "../../contexts/DictionaryContext"; import q from '../../assets/question.png'; import {Queries, useMediaQuery} from "../../hooks/mediaQuery"; - -interface VestingSplitOverviewProps { - title: ReactNode - howToUse: ReactNode; - subTitle: ReactNode -} +import {VestingSplitOverviewProps} from "../organisms/types"; const VestingSplitOverview: FC = ( { @@ -17,8 +12,8 @@ const VestingSplitOverview: FC = ( howToUse, subTitle }) => { - const isMobile = useMediaQuery(Queries.mobile) - const isTablet = useMediaQuery(Queries.tablet) + const isMobile = useMediaQuery(Queries.mobile); + const isTablet = useMediaQuery(Queries.tablet); return (
@@ -37,7 +32,7 @@ const VestingSplitOverview: FC = ( ); }; -const VestingSplitOverviewLocalized = () => { +export const VestingSplitOverviewLocalized = () => { const {nft} = useContext(DictionaryContext); return { const container = (isMobile: boolean) => style({ width: isMobile ? '100%' : '500px' -}) - -export const VestingSplitOverviewWrapper = () => - -export default VestingSplitOverview; \ No newline at end of file +}) \ No newline at end of file diff --git a/src/components/organisms/MetaMaskStateWrappers.tsx b/src/components/organisms/MetaMaskStateWrappers.tsx index 89f51a4..3a343b5 100644 --- a/src/components/organisms/MetaMaskStateWrappers.tsx +++ b/src/components/organisms/MetaMaskStateWrappers.tsx @@ -6,6 +6,7 @@ import { NftsContextProvider } from "../../contexts/NftsContext" import { RoundingContextProvider } from "../../contexts/RoundingsContext" import { MarsbaseTokenProvider, MarsbaseVestingProvider } from "../../hooks/mbase-contract" import TokenDashboard from "../pages/TokenDashboard" +import {VestingSplit} from "../pages/VestingSplit"; export const MetamaskConnected: React.FC<{ network: EvmNetwork }> = props => ( @@ -14,7 +15,8 @@ export const MetamaskConnected: React.FC<{ network: EvmNetwork }> = props => ( - + {/**/} + diff --git a/src/components/organisms/NftView.tsx b/src/components/organisms/NftView.tsx index 75bddf2..04bd752 100644 --- a/src/components/organisms/NftView.tsx +++ b/src/components/organisms/NftView.tsx @@ -93,7 +93,7 @@ const container = (isMobile: boolean, isTablet: boolean) => style({ width: isTablet ? 'unset' : '822px', padding: '16px', borderRadius: '20px', - background: `linear-gradient(34deg, rgba(27, 27, 28,100%) 48%, rgba(255,227,161,40%) 100%)` + background: `linear-gradient(34deg, rgba(27, 27, 28,100%) 48%, rgba(255,227,161,40%) 100%)`, }) const containerBody = (isMobile: boolean) => style({ diff --git a/src/components/organisms/SelectNftModal.tsx b/src/components/organisms/SelectNftModal.tsx index f4a6aad..fa36c9f 100644 --- a/src/components/organisms/SelectNftModal.tsx +++ b/src/components/organisms/SelectNftModal.tsx @@ -5,7 +5,7 @@ import changeViewIcon from '../../assets/changeViewIcon.svg'; import sortIcon from '../../assets/sortIcon.svg'; import {Text} from '../atoms/Text' -import NftSelectCard from "../molecules/NftSelectCard"; +import {NftSelectCardLocalized} from "../molecules/NftSelectCard"; import {Queries, useMediaQuery} from "../../hooks/mediaQuery"; import {SelectNftModalProps} from "../molecules/types"; @@ -34,7 +34,7 @@ const SelectNftModal: FC = ({nfts}) => {
{nfts.map(nft => ( - { @@ -53,24 +53,24 @@ const VestingSplitDetails: React.FC = props => {
- - - - { const isMobile = useMediaQuery(Queries.mobile) @@ -11,8 +11,8 @@ const VestingSplitHeader = () => { return (
- - null} onSellWithPremium={() => null}/> + + null} onSellWithPremium={() => null}/>
); }; diff --git a/src/components/organisms/VestingSplitSteps.tsx b/src/components/organisms/VestingSplitSteps.tsx index cb1aea2..088084a 100644 --- a/src/components/organisms/VestingSplitSteps.tsx +++ b/src/components/organisms/VestingSplitSteps.tsx @@ -1,47 +1,37 @@ -import React from 'react'; +import React, {FC, useContext} from 'react'; import VestingStepCard from "../molecules/VestingStepCard"; -import {style} from "typestyle"; import {Queries, useMediaQuery} from "../../hooks/mediaQuery"; +import Container from "../Container"; +import {DictionaryContext} from "../../contexts/DictionaryContext"; +import {VestingSplitStepsLocalizedProps, VestingSplitStepsProps} from "./types"; -const container = style({ - width: '100%', - display: 'flex', - justifyContent: 'space-between', - gap: '32px', - marginBottom: '66px' -}) +const VestingSplitSteps: FC = ({steps}) => { + const isMobile = useMediaQuery(Queries.mobile); -const VestingSplitSteps = () => { - const steps = [ - { - active: false, - title: 'Parameters', - subTitle: 'Set suitable conditions' - }, - { - active: true, - title: 'Split details', - subTitle: 'Verify and approve the offer' - }, - { - active: false, - title: 'Publication', - subTitle: 'Send the offer to the market' - } - ] + const formattedSteps = () => { + return steps.map((step, idx) => ({active: idx === 1, ...step})); + }; - const isMobile = useMediaQuery(Queries.mobile) - const isTablet = useMediaQuery(Queries.tablet) + const getActiveStep = () => formattedSteps().filter(s => s.active); return ( -
- {(isMobile ? steps.filter(s => s.active) : steps).map((step, index) => ( + + {(isMobile ? getActiveStep() : steps).map((step, index) => ( + index={index + 1} + {...step} + /> ))} -
+ ); }; -export default VestingSplitSteps; \ No newline at end of file +export const VestingSplitStepsLocalized: FC = (props) => { + const {nft} = useContext(DictionaryContext); + + return +} \ No newline at end of file diff --git a/src/components/organisms/types.ts b/src/components/organisms/types.ts index 768fa38..3140e0b 100644 --- a/src/components/organisms/types.ts +++ b/src/components/organisms/types.ts @@ -28,4 +28,16 @@ export interface NftTableProps { onActions: (nftId: string) => void } -export type IMobileNftsContainer = Pick \ No newline at end of file +export type IMobileNftsContainer = Pick; + +export interface VestingSplitOverviewProps { + title: ReactNode + howToUse: ReactNode; + subTitle: ReactNode +} + +export interface VestingSplitStepsProps { + steps: { title: string, subTitle: string }[] +} + +export type VestingSplitStepsLocalizedProps = Omit; \ No newline at end of file diff --git a/src/components/pages/TokenDashboard.tsx b/src/components/pages/TokenDashboard.tsx index 8ce0010..ad5a2f3 100644 --- a/src/components/pages/TokenDashboard.tsx +++ b/src/components/pages/TokenDashboard.tsx @@ -19,8 +19,6 @@ const TokenDashboard = () => { const {handlers} = useContext(HandlersContext) const {nftsG} = useContext(NftsContext); - const [SelectModal, , setVisible] = useModal(); - return ( <> @@ -38,10 +36,6 @@ const TokenDashboard = () => { - - - - ) } diff --git a/src/components/pages/VestingSplit.tsx b/src/components/pages/VestingSplit.tsx index 1c92285..3a76b81 100644 --- a/src/components/pages/VestingSplit.tsx +++ b/src/components/pages/VestingSplit.tsx @@ -1,44 +1,38 @@ import React from 'react'; import VestingSplitHeader from "../organisms/VestingSplitHeader"; -import VestingSplitSteps from "../organisms/VestingSplitSteps"; import {style} from "typestyle"; import NftView from "../organisms/NftView"; -import VestingSplitDetails from "../organisms/VestingSplitDetails"; import {Queries, useMediaQuery} from "../../hooks/mediaQuery"; import VestingSplitNavbar from "../organisms/TokenDasboardNavbar"; +import RootContainer from "../RootContainer"; +import VestingToSplit from "../organisms/VestingToSplit"; +import {VestingSplitStepsLocalized} from '../organisms/VestingSplitSteps'; +import Container from "../Container"; -const VestingSplit = () => { - const isMobile = useMediaQuery(Queries.mobile) - const isTablet = useMediaQuery(Queries.tablet) +export const VestingSplit = () => { + const isMobile = useMediaQuery(Queries.mobile); + const isTablet = useMediaQuery(Queries.tablet); + const isDesktop = (!isMobile || !isTablet) return ( -
+ - + {/**/} {/**/} {/**/}
- {/**/} - + + {/**/}
- {(isTablet || isMobile) && } + {/**/} -
+ ); }; -const container = style({ - display: 'flex', - flexDirection: 'column', - maxWidth: '1433px', - width: '100%', - margin: 'auto', - position: 'relative', -}) - const body = (isTablet: boolean) => style({ display: 'flex', flexDirection: isTablet ? 'column' : 'row', diff --git a/src/components/stateful/NftTableSummaryWrapper.tsx b/src/components/stateful/NftTableSummaryWrapper.tsx index f8f0383..2283811 100644 --- a/src/components/stateful/NftTableSummaryWrapper.tsx +++ b/src/components/stateful/NftTableSummaryWrapper.tsx @@ -26,6 +26,7 @@ export const NftTableSummaryWrapper = () => { onClaim={() => console.log('on claim click')} btnClaimLoad={false} kind={'silver'} + onAvailableForClaimChange={e => console.log(e)} /> diff --git a/src/data.ts b/src/data.ts index 92eb1ed..34bc19f 100644 --- a/src/data.ts +++ b/src/data.ts @@ -78,7 +78,24 @@ export const DICT = { totalFeeLabel: 'Total fee', partsLabel: 'Part', totalPartsLabel: 'Total parts' - } + }, + steps: [ + { + active: false, + title: 'Parameters', + subTitle: 'Set suitable conditions' + }, + { + active: true, + title: 'Split details', + subTitle: 'Verify and approve the offer' + }, + { + active: false, + title: 'Publication', + subTitle: 'Send the offer to the market' + } + ] } } }, From a6bb033229bf675d2f65aae5814d4675ae14493c Mon Sep 17 00:00:00 2001 From: Alex5 Date: Thu, 23 Jun 2022 18:01:19 +0300 Subject: [PATCH 18/18] optimisation VestingSplit components --- src/components/molecules/NftViewHeader.tsx | 42 +++++++++++++++++++ .../molecules/SplitDetailsSection.tsx | 6 +-- src/components/molecules/SplitError.tsx | 31 ++++++++++---- src/components/molecules/types.ts | 20 ++++++++- src/components/organisms/NftView.tsx | 13 +----- src/data.ts | 22 +++++++--- 6 files changed, 107 insertions(+), 27 deletions(-) create mode 100644 src/components/molecules/NftViewHeader.tsx diff --git a/src/components/molecules/NftViewHeader.tsx b/src/components/molecules/NftViewHeader.tsx new file mode 100644 index 0000000..ffcacac --- /dev/null +++ b/src/components/molecules/NftViewHeader.tsx @@ -0,0 +1,42 @@ +import React, {FC, ReactNode, useContext} from 'react'; +import {Text} from "../atoms/Text"; +import {Label} from "../atoms/Label"; +import gold2 from "../../assets/gold-2.svg"; +import {Queries, useMediaQuery} from "../../hooks/mediaQuery"; +import {DictionaryContext} from "../../contexts/DictionaryContext"; +import {NftViewHeaderLocalizedProps, NftViewHeaderProps} from "./types"; + +const NftViewHeader: FC = ( + { + viewText, + nftDetailsText, + buyPriceText, + usd + }) => { + const isMobile = useMediaQuery(Queries.mobile) + + return ( +
+
+ {viewText} + {nftDetailsText} + +
+ {isMobile && nft gold} +
+ ); +}; + +export const NftViewHeaderLocalized: FC = (props) => { + const {nft} = useContext(DictionaryContext) + + return +} \ No newline at end of file diff --git a/src/components/molecules/SplitDetailsSection.tsx b/src/components/molecules/SplitDetailsSection.tsx index c423570..2bdc630 100644 --- a/src/components/molecules/SplitDetailsSection.tsx +++ b/src/components/molecules/SplitDetailsSection.tsx @@ -44,9 +44,9 @@ export const SplitDetailsSectionLocalized: FC const {nft} = useContext(DictionaryContext); return } diff --git a/src/components/molecules/SplitError.tsx b/src/components/molecules/SplitError.tsx index c3412b4..70cdabf 100644 --- a/src/components/molecules/SplitError.tsx +++ b/src/components/molecules/SplitError.tsx @@ -1,30 +1,47 @@ -import React from 'react'; +import React, {FC, useContext} from 'react'; import {Text} from '../atoms/Text' import {Button} from '../atoms/Button' import splitError from '../../assets/splitErrorIllustration.png'; import {Queries, useMediaQuery} from "../../hooks/mediaQuery"; +import {SplitErrorProps, SplitErrorPropsLocalized} from "./types"; +import {DictionaryContext} from "../../contexts/DictionaryContext"; -const SplitError = () => { +const SplitError: FC = ( + { + title, + subTitle, + backText, + tryAgainText + }) => { const isMobile = useMediaQuery(Queries.mobile) const isTablet = useMediaQuery(Queries.tablet) return (
- NFT could not be splitted - Whoops, something went wrong. Please try again later. + {title} + {subTitle}
); }; -export default SplitError; \ No newline at end of file +export const SplitErrorLocalized: FC = (props) => { + const {nft} = useContext(DictionaryContext) + return +} \ No newline at end of file diff --git a/src/components/molecules/types.ts b/src/components/molecules/types.ts index b7a7777..7ea8995 100644 --- a/src/components/molecules/types.ts +++ b/src/components/molecules/types.ts @@ -190,4 +190,22 @@ export interface SplitDetailsSectionProps { partsLabel: ReactNode } -export type SplitDetailsSectionLocalizedProps = Omit \ No newline at end of file +export type SplitDetailsSectionLocalizedProps = Omit + +export type NftViewHeaderProps = { + viewText: ReactNode; + nftDetailsText: ReactNode; + buyPriceText: ReactNode; + usd: ReactNode; +} + +export type NftViewHeaderLocalizedProps = Omit; + +export type SplitErrorProps = { + title: ReactNode; + subTitle: ReactNode; + backText: ReactNode; + tryAgainText: ReactNode; +} + +export type SplitErrorPropsLocalized = Omit \ No newline at end of file diff --git a/src/components/organisms/NftView.tsx b/src/components/organisms/NftView.tsx index 04bd752..73081c2 100644 --- a/src/components/organisms/NftView.tsx +++ b/src/components/organisms/NftView.tsx @@ -5,6 +5,7 @@ import {Label} from '../atoms/Label' import {style} from 'typestyle'; import gold2 from '../../assets/gold-2.svg'; import {Queries, useMediaQuery} from "../../hooks/mediaQuery"; +import {NftViewHeaderLocalized} from "../molecules/NftViewHeader"; const NftView = () => { const isMobile = useMediaQuery(Queries.mobile) @@ -44,17 +45,7 @@ const NftView = () => {
-
-
- VIEW - NFT Details - -
- {isMobile && nft gold} -
+ {nftDetails.map((nftDetail, index) =>
diff --git a/src/data.ts b/src/data.ts index 34bc19f..99a97b1 100644 --- a/src/data.ts +++ b/src/data.ts @@ -1,5 +1,6 @@ import { FixedNumber } from "ethers" import {INft} from "./components/organisms/types"; +import {ReactNode} from "react"; export type LocalizedDictionary = typeof DICT[keyof typeof DICT] export const DICT = { @@ -74,10 +75,10 @@ export const DICT = { "without slippage or market price impact", sell_with_premium_btn: (token: string) => `Sell ${token} with premium`, buy_now_btn: (token: string) => `Buy ${token} now`, - splitDetails: { - totalFeeLabel: 'Total fee', - partsLabel: 'Part', - totalPartsLabel: 'Total parts' + split_details: { + total_fee_label: 'Total fee', + parts_label: 'Part', + total_parts_label: 'Total parts' }, steps: [ { @@ -95,7 +96,18 @@ export const DICT = { title: 'Publication', subTitle: 'Send the offer to the market' } - ] + ], + nft_view_card: { + view_text: "View", + nft_details_text: "NFT Details", + buy_price_text: "Buy price " + }, + split_error: { + title: "", + sub_title: "", + back_text: "Back to dashboard", + try_again_text: "" + } } } },