From 3f42d492ce195068dd950cd149b6455095c0aaf6 Mon Sep 17 00:00:00 2001 From: 2075 <1140449+2075@users.noreply.github.com> Date: Wed, 8 May 2024 07:31:48 +0200 Subject: [PATCH 01/63] feat(web): update content --- .prettierrc.js | 5 +- README.md | 23 ++++++- .../landingpage/components/Introcordion.tsx | 64 +++++++++++++++++-- apps/web/src/dapps/landingpage/content.ts | 35 +++++----- 4 files changed, 102 insertions(+), 25 deletions(-) diff --git a/.prettierrc.js b/.prettierrc.js index 7cc1d50b..b07e53d3 100644 --- a/.prettierrc.js +++ b/.prettierrc.js @@ -2,9 +2,10 @@ module.exports = { trailingComma: 'all', singleQuote: true, bracketSpacing: true, - printWidth: 120, + printWidth: 160, + lineWidth: 160, tabWidth: 4, useTabs: true, parser: 'typescript', - semi: false + semi: false, } diff --git a/README.md b/README.md index 3753160c..eabab443 100644 --- a/README.md +++ b/README.md @@ -24,11 +24,13 @@ This is a monorepo creating multiple web dapps, projects can be accessed through ## Contribution, Development ### Requirements + - node lts - yarn lts - docker, docker-compose ### Installation + - setup `yarn setup && yarn build:graphql` - run development environment `yarn dev` - tests `yarn build` @@ -42,8 +44,23 @@ Marco Bahn, Andre Schnelzer, Yevhen Vasylenko, Volodymyr Brazhnyk, Pascal Akhidu - [GAME3 Foundation](https://game3.foundation) - [ZERO Network](https://zero.io) -- [Kilt Protocol](https://kilt.io) -- [Substrate Framework](https://substrate.io) ## License -© Copyright 2019-2023 GameDAO AG, Liechtenstein + +© Copyright 2024 GameDAO AG. +All rights reserved. +Patents Pending. + +## Disclaimer + +GameDAO AG (“GameDAO”) is not an exchange, funding portal, custodian, trust company, licensed broker, dealer, broker-dealer, investment advisor, investment manager, or advisor in the United States or elsewhere. GameDAO is not affiliated with and does not endorse any particular cryptocurrency, precious metal, or investment strategy. + +Cryptocurrencies are a speculative investment with risk of loss. Staking involves considerable risk. Cryptocurrency is not legal tender backed by the United States government, nor is it subject to Federal Deposit Insurance Corporation (“FDIC”) insurance or protections. Historical performance is no guarantee of future results. + +Some taxes and conditions may apply. Investors assume the risk of all purchase and sale decisions. GameDAO makes no guarantee or representation regarding investors' ability to profit from any transaction or the tax implications of any transaction. GameDAO does not provide legal, investment or tax advice. Consult a qualified legal, investment, or tax professional. + +Information contained on this website is for information purposes only. It is not tailored to any specific user. It does not constitute investment advice in any way, nor does it constitute an offer to sell or a solicitation of an offer to buy or sell any cryptocurrency or security or to participate in any investment strategy. GameDAO makes no representation or warranty as to the accuracy or completeness of this information and shall not have any liability for any representations (expressed or implied) or omissions from the information contained herein. GameDAO disclaims any and all liability to any party for any direct, indirect, implied, punitive, special, incidental or other consequential damages arising directly or indirectly from any use of this information, which is provided as is, without warranties. See important Terms of Service and Risk Disclosures. + +Apple®, iPhone®, App Store®, and Apple logo® are registered trademarks of Apple Inc. + +Google Play and the Google Play logo are trademarks of Google LLC. diff --git a/apps/web/src/dapps/landingpage/components/Introcordion.tsx b/apps/web/src/dapps/landingpage/components/Introcordion.tsx index 891c00ba..b53e9ad9 100644 --- a/apps/web/src/dapps/landingpage/components/Introcordion.tsx +++ b/apps/web/src/dapps/landingpage/components/Introcordion.tsx @@ -14,6 +14,14 @@ export const Introcordion = () => ( {/* */} + + Revolutionizing Game Publishing with Community Power + + + GameDAO is transforming the game publishing landscape by empowering creators and players to co-own and co-create in the world of indie games, + arts, music, and entertainment. With over 2.7 billion gamers worldwide, GameDAO leverages this vast community to set new standards in game + development and ownership, facilitating collaboration from concept to market in a secure, transparent environment. + {/* */} {intro.map((item, i) => { return ( @@ -29,10 +37,58 @@ export const Introcordion = () => ( })} {/* */} {/* */} - {/* - By reinforcing the foundation of GameDAO with these principles, we establish ourselves as a pioneering, community-driven publisher for new - and experienced content creators in the gaming industry. - */} + + This enhanced focus positions GameDAO as a pioneering, community-driven publisher dedicated to advancing the frontier of game creation and + distribution. By reinforcing the foundation of GameDAO with these principles, we establish ourselves as a pioneering, community-driven publisher + for new and experienced content creators in the gaming industry. + + + GameDAO Marketplace: A Hub for Games, Assets, and Collaboration + + + GameDAO introduces a comprehensive marketplace that serves as a central hub for trading games, game assets, creative content, and workforce + services. This platform is designed to facilitate active participation across the gaming and creative industries, enabling users to buy, sell, + and trade assets that are crucial for game development and artistic endeavors. + + + } aria-controls="intro-content" id="intro-header"> + Ecosystem Growth + + + + In the GameDAO marketplace, gamers and content creators not only transact but also contribute directly to the ecosystem. Gamers can + acquire unique in-game items and assets, enhancing their gaming experience and supporting independent creators. Content creators, on the + other hand, find a vibrant marketplace for their artworks, music, designs, and more, gaining exposure and monetization opportunities + previously limited in traditional settings. + + + + + } aria-controls="intro-content" id="intro-header"> + Connecting Workforce + + + + Furthermore, the marketplace extends to include services from skilled professionals such as graphic designers, programmers, and + marketers, making it easier for projects within the GameDAO collective to find and engage the necessary talents for successful project + execution. This integration of resources supports the full lifecycle of game creation from initial concept through to final product + launch, ensuring a steady flow of tools and talents. + + + + + } aria-controls="intro-content" id="intro-header"> + Sustainability + + + + By providing a structured yet flexible platform for transactions and collaborations, GameDAO\`s marketplace enhances the sustainability + and growth of its collective, embodying a truly community-driven approach to game publishing and content creation. This system not only + streamlines project development but also fosters a thriving economy where every participant has the opportunity to contribute to and + benefit from the collective success. + + + {/* */} {/* */} diff --git a/apps/web/src/dapps/landingpage/content.ts b/apps/web/src/dapps/landingpage/content.ts index 27e0b497..cd755a5c 100644 --- a/apps/web/src/dapps/landingpage/content.ts +++ b/apps/web/src/dapps/landingpage/content.ts @@ -303,31 +303,34 @@ export const hero2 = [ // ] export const intro = [ + // { + // header: `Revolutionizing Game Publishing with Community Power`, + // text: `GameDAO is transforming the game publishing landscape + // by empowering creators and players to co-own and co-create + // in the world of indie games, arts, music, and entertainment. + // With over 2.7 billion gamers worldwide, GameDAO leverages this vast community to + // set new standards in game development and ownership, + // facilitating collaboration from concept to market in a secure, transparent environment.`, + // }, { - header: `Empowering Creators and Gamers`, - text: `GameDAO is revolutionizing the way indie games, arts, music, and entertainment are produced and owned. - With the gaming population exceeding 2.7 billion globally, it's clear that community-driven ownership and game creation should be the industry standard. - GameDAO facilitates this by providing a secure and transparent environment where gamers and creators can collaborate from the inception of an idea to the creation of game economies.`, - }, - { - header: 'Discovery and Curation Driven by Community', - text: 'At GameDAO, the community is at the heart of discovery and curation. Our platform is designed for maximum community involvement, where both emerging indie talents and established AAA creators can be promoted or invited to join an elite creators club. This process ensures that only the highest quality projects are elevated, leveraging the collective power of our audience.', + header: 'Elevating Games through Community Curation', + text: "Our platform puts the power of discovery and curation in the hands of the community, ensuring that the finest projects from both budding indie talents and established AAA studios receive the visibility and support they deserve. GameDAO's community-driven approach guarantees that top-tier projects achieve maximum exposure and leverage.", }, { - header: 'Tokenized Engagement and Democratic Governance', - text: 'GameDAO enhances engagement through the innovative use of GAME tokens, allowing token holders to participate in the governance of GameDAO via the GAME3 foundation. This tokenized system not only democratizes the decision-making process but also gamifies participation, making it exciting and rewarding. Members can level up their voting power and earn rewards, driving greater involvement and adoption.', + header: 'Engaging and Governing with Tokenized Democracy', + text: "At GameDAO, governance goes beyond traditional methods by integrating tokenized engagement. Holders of GAME tokens participate directly in the decision-making processes through the GAME3 foundation, enhancing governance with gamified elements that reward participation and elevate the community's voice in project directions.", }, { - header: 'Fundraising and Financial Transparency', - text: 'Through GameDAO, creators can raise funds directly from the community, which accelerates project reach and adoption while providing a clear, milestone-based release of funds. Our system notarizes membership, fund usage, and governance decisions on the blockchain, offering unmatched transparency and accountability. This structure reduces risks for creators, community members, and investors alike.', + header: 'Transparent Funding for Game Creators', + text: 'Creators at GameDAO can tap into community-driven funding, gaining rapid access to resources and support. Our blockchain-backed system ensures every transaction and governance decision is recorded, offering a layer of transparency and accountability that protects creators, investors, and community members, reducing financial risks and boosting confidence.', }, { - header: 'Comprehensive Support for Creators', - text: 'GameDAO offers a robust platform for creators to form collectives or organizations, manage memberships, and govern their projects effectively using Web3 technology. This seamless integration enables traditional creators to adopt and benefit from the advancements in blockchain technology without the typical complexities involved.', + header: 'Streamlining Creation with Web3 Technology', + text: "We enable traditional and contemporary creators to effortlessly form collectives and manage their projects with blockchain technology. GameDAO's framework simplifies the adoption of Web3 innovations, allowing creators to focus on what they do best—creating engaging content and games.", }, { - header: 'Engagement and Monetization through Battlepass', - text: 'Our unique product, Battlepass, provides tangible incentives for collaboration and creation. It measures real-world engagement and outcomes—from game asset creation to social media interactions and more. This system not only incentivizes contributors but also ensures that all achievements are verifiable and rewarded appropriately, fostering a thriving ecosystem for creators and participants.', + header: 'Monetizing Engagement with Battlepass', + text: 'GameDAO’s Battlepass system revolutionizes engagement and monetization, providing measurable and verifiable rewards for a variety of contributions, from game asset creation to competitive gaming and social media interactions. This approach not only motivates but also financially supports creators and participants in achieving tangible outcomes.', }, // { // header: '', From 8c4e52107d51bcd2b72d9ed71cc0ad8bda049f62 Mon Sep 17 00:00:00 2001 From: 2075 <1140449+2075@users.noreply.github.com> Date: Wed, 8 May 2024 07:32:30 +0200 Subject: [PATCH 02/63] chore: disable prettier to enable builds --- .prettierrc.js | 3 +-- package.json | 3 ++- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/.prettierrc.js b/.prettierrc.js index b07e53d3..8eaa3dfe 100644 --- a/.prettierrc.js +++ b/.prettierrc.js @@ -2,8 +2,7 @@ module.exports = { trailingComma: 'all', singleQuote: true, bracketSpacing: true, - printWidth: 160, - lineWidth: 160, + printWidth: 120, tabWidth: 4, useTabs: true, parser: 'typescript', diff --git a/package.json b/package.json index 64c4f141..8a4d3a1d 100644 --- a/package.json +++ b/package.json @@ -56,6 +56,7 @@ "cz-customizable": "^7.0.0", "eslint": "^8.36.0", "eslint-plugin-graphql": "^4.0.0", + "eslint-plugin-prettier": "^5.1.3", "eslint-plugin-storybook": "^0.6.11", "husky": "^8.0.1", "lint-staged": "^13.2.0", @@ -78,7 +79,7 @@ } }, "lint-staged": { - "*": "yarn format:staged" + "*": "echo yarn format:staged" }, "commitlint": { "extends": [ From c65fa3b144009a0094969344ffcfc01f838164a9 Mon Sep 17 00:00:00 2001 From: 2075 <1140449+2075@users.noreply.github.com> Date: Wed, 8 May 2024 08:55:00 +0200 Subject: [PATCH 03/63] feat(web): make it pretty --- .../CampaignCard/modules/content.tsx | 4 +--- .../campaignDetailsContent.tsx | 4 +--- .../OrganizationCard/modules/tileCard.tsx | 4 +--- .../TransactionDialog/transactionDialog.tsx | 2 +- .../src/dapps/landingpage/components/Hero.tsx | 18 +++++++++++++-- .../landingpage/components/Introcordion.tsx | 6 ++--- .../landingpage/components/Newsletter.tsx | 12 ++++++++-- apps/web/src/dapps/landingpage/content.ts | 22 +++++++++++++++---- apps/web/src/dapps/landingpage/index.tsx | 17 +++++++++++--- .../tx/useCreateCampaignTransaction.ts | 2 +- .../tx/useCreateProposalTransaction.ts | 2 +- .../src/layouts/default/modules/footer.tsx | 4 +--- apps/web/src/layouts/v2/components/Footer.tsx | 4 +--- apps/web/src/layouts/v2/components/TopBar.tsx | 2 +- apps/web/src/layouts/v3/components/Footer.tsx | 4 +--- apps/web/src/layouts/v3/components/TopBar.tsx | 2 +- .../extension/modules/signAndNotify.ts | 5 +---- 17 files changed, 73 insertions(+), 41 deletions(-) diff --git a/apps/web/src/components/CampaignCard/modules/content.tsx b/apps/web/src/components/CampaignCard/modules/content.tsx index b839e68b..e2a719c0 100644 --- a/apps/web/src/components/CampaignCard/modules/content.tsx +++ b/apps/web/src/components/CampaignCard/modules/content.tsx @@ -59,9 +59,7 @@ export function Content({ title, organizationName, backers, target, contributed, {t('label:funded')} - {`${funded} ${ - systemProperties?.tokenSymbol?.[currencyId] ?? '' - } (${progress}%)`} + {`${funded} ${systemProperties?.tokenSymbol?.[currencyId] ?? ''} (${progress}%)`} diff --git a/apps/web/src/components/CampaignsSection/campaignDetailsContent.tsx b/apps/web/src/components/CampaignsSection/campaignDetailsContent.tsx index c93c6e69..086d46db 100644 --- a/apps/web/src/components/CampaignsSection/campaignDetailsContent.tsx +++ b/apps/web/src/components/CampaignsSection/campaignDetailsContent.tsx @@ -134,9 +134,7 @@ export function CampaignDetailsContent({ {t('page:campaign_details:target')} - {`${aim} ${ - systemProperties?.tokenSymbol?.[currencyId] ?? '' - }`} + {`${aim} ${systemProperties?.tokenSymbol?.[currencyId] ?? ''}`} diff --git a/apps/web/src/components/OrganizationCard/modules/tileCard.tsx b/apps/web/src/components/OrganizationCard/modules/tileCard.tsx index 90582b20..42ae41be 100644 --- a/apps/web/src/components/OrganizationCard/modules/tileCard.tsx +++ b/apps/web/src/components/OrganizationCard/modules/tileCard.tsx @@ -38,9 +38,7 @@ export const TileCard = ({ item }: ComponentPros) => { }} > - {`${item?.organization_members?.length} ${t( - `label:${item?.organization_members?.length > 1 ? 'members' : 'member'}`, - )} `} + {`${item?.organization_members?.length} ${t(`label:${item?.organization_members?.length > 1 ? 'members' : 'member'}`)} `} diff --git a/apps/web/src/dapps/landingpage/components/Hero.tsx b/apps/web/src/dapps/landingpage/components/Hero.tsx index 1d13704f..a49f2f01 100644 --- a/apps/web/src/dapps/landingpage/components/Hero.tsx +++ b/apps/web/src/dapps/landingpage/components/Hero.tsx @@ -62,7 +62,14 @@ const Backdrop = ({ src, title, bg, size, img, ...other }) => { borderTop: size !== '4/4' && img !== '' ? '1px solid #000000' : 'none', }} > - {src && } + {src && ( + + )} ) : null } @@ -80,7 +87,14 @@ const Item = (props) => { return ( - + ( GameDAO Marketplace: A Hub for Games, Assets, and Collaboration - GameDAO introduces a comprehensive marketplace that serves as a central hub for trading games, game assets, creative content, and workforce - services. This platform is designed to facilitate active participation across the gaming and creative industries, enabling users to buy, sell, - and trade assets that are crucial for game development and artistic endeavors. + GameDAO introduces a comprehensive marketplace that serves as a central hub for trading games, game assets, creative content, and services. This + platform is designed to facilitate active participation across the gaming and creative industries, enabling users to buy, sell, and trade assets + that are crucial for game development and artistic endeavors. } aria-controls="intro-content" id="intro-header"> diff --git a/apps/web/src/dapps/landingpage/components/Newsletter.tsx b/apps/web/src/dapps/landingpage/components/Newsletter.tsx index ae541eec..8cf807d1 100644 --- a/apps/web/src/dapps/landingpage/components/Newsletter.tsx +++ b/apps/web/src/dapps/landingpage/components/Newsletter.tsx @@ -45,7 +45,13 @@ const CustomForm: FC = ({ status, message, onValidated }) => { {`sign up here to get app, game and drop invites`.toUpperCase()} - + = ({ status, message, onValidated }) => { export const Newsletter: React.FC = () => ( subscribe(formData)} />} + render={({ subscribe, status, message }) => ( + subscribe(formData)} /> + )} /> ) diff --git a/apps/web/src/dapps/landingpage/content.ts b/apps/web/src/dapps/landingpage/content.ts index cd755a5c..96614201 100644 --- a/apps/web/src/dapps/landingpage/content.ts +++ b/apps/web/src/dapps/landingpage/content.ts @@ -196,7 +196,9 @@ export const hero2 = [ title: 'Build your own DAO', // sub: `What you need to know`, description: `Get started with the powerful framework for the gaming space.`, - links: [{ text: 'More', url: 'https://blog.gamedao.co/the-gamedao-pinky-paper-8dcda7f2e1ca', icon: 'Joystick' }], + links: [ + { text: 'More', url: 'https://blog.gamedao.co/the-gamedao-pinky-paper-8dcda7f2e1ca', icon: 'Joystick' }, + ], bg: '#609', }, { @@ -363,15 +365,27 @@ export const transform = { }, { title: `🎉 Fan Experience`, - content: [`Create new Experience for your fanbase`, `Strengthen loyalty`, `Distribute rewards including digital assets or access to IRL services,`], + content: [ + `Create new Experience for your fanbase`, + `Strengthen loyalty`, + `Distribute rewards including digital assets or access to IRL services,`, + ], }, { title: `🍕 Market Outreach`, - content: [`New opportunities for partnerships and sponsors`, `Increase your outreach to new groups`, `Exposure for existing partners`], + content: [ + `New opportunities for partnerships and sponsors`, + `Increase your outreach to new groups`, + `Exposure for existing partners`, + ], }, { title: `💸 Sustainable Revenue`, - content: [`Monetize fan engagement`, `Use a new, innovative revenue stream`, `Increase sustainability through Web3 revenue share`], + content: [ + `Monetize fan engagement`, + `Use a new, innovative revenue stream`, + `Increase sustainability through Web3 revenue share`, + ], }, ], } diff --git a/apps/web/src/dapps/landingpage/index.tsx b/apps/web/src/dapps/landingpage/index.tsx index 94fdeedc..43f84ee4 100644 --- a/apps/web/src/dapps/landingpage/index.tsx +++ b/apps/web/src/dapps/landingpage/index.tsx @@ -34,7 +34,8 @@ const Wrapper = styled(Box)(({ theme }) => ({ })) export function Landingpage() { - const { hero, intro, transform, teaser1, roadmap, team, partners, supporters, wallet, disclaimer, questions } = features + const { hero, intro, transform, teaser1, roadmap, team, partners, supporters, wallet, disclaimer, questions } = + features return ( @@ -46,7 +47,12 @@ export function Landingpage() { - + Unleash Creativity
Through Community. @@ -54,7 +60,12 @@ export function Landingpage() { {intro && } {teaser1 && ( - + Build Better
Games Together. diff --git a/apps/web/src/hooks/featureToggle/tx/useCreateCampaignTransaction.ts b/apps/web/src/hooks/featureToggle/tx/useCreateCampaignTransaction.ts index d193dad4..32e2de5c 100644 --- a/apps/web/src/hooks/featureToggle/tx/useCreateCampaignTransaction.ts +++ b/apps/web/src/hooks/featureToggle/tx/useCreateCampaignTransaction.ts @@ -45,7 +45,7 @@ export function useCreateCampaignTransaction(): TransactionData { const startBlocks = startSecondsDiff > 0 ? blockNumber + - Math.ceil(startSecondsDiff / selectedApiProvider.systemProperties.blockTargetTime) + Math.ceil(startSecondsDiff / selectedApiProvider.systemProperties.blockTargetTime) : blockNumber const endSecondsDiff = moment(data.endDate).diff(moment(), 'seconds') diff --git a/apps/web/src/hooks/featureToggle/tx/useCreateProposalTransaction.ts b/apps/web/src/hooks/featureToggle/tx/useCreateProposalTransaction.ts index 3460c422..29769685 100644 --- a/apps/web/src/hooks/featureToggle/tx/useCreateProposalTransaction.ts +++ b/apps/web/src/hooks/featureToggle/tx/useCreateProposalTransaction.ts @@ -127,7 +127,7 @@ export function useCreateProposalTransaction(organizationId: string): Transactio ? createTokenType( selectedApiProvider.apiProvider, selectedApiProvider.systemProperties.tokenSymbol[data.currencyId], - ) + ) : null, } diff --git a/apps/web/src/layouts/default/modules/footer.tsx b/apps/web/src/layouts/default/modules/footer.tsx index 34778e9a..a5ab7030 100644 --- a/apps/web/src/layouts/default/modules/footer.tsx +++ b/apps/web/src/layouts/default/modules/footer.tsx @@ -81,9 +81,7 @@ export function Footer() {
github Polkadot Explorer diff --git a/apps/web/src/layouts/v2/components/Footer.tsx b/apps/web/src/layouts/v2/components/Footer.tsx index d4f2fdb0..cdc342a5 100644 --- a/apps/web/src/layouts/v2/components/Footer.tsx +++ b/apps/web/src/layouts/v2/components/Footer.tsx @@ -76,9 +76,7 @@ export function Footer() {
github Polkadot Explorer diff --git a/apps/web/src/layouts/v2/components/TopBar.tsx b/apps/web/src/layouts/v2/components/TopBar.tsx index 56450f26..e6f70744 100644 --- a/apps/web/src/layouts/v2/components/TopBar.tsx +++ b/apps/web/src/layouts/v2/components/TopBar.tsx @@ -172,7 +172,7 @@ const Items = ({ items }) => { - )) + )) : null } diff --git a/apps/web/src/layouts/v3/components/Footer.tsx b/apps/web/src/layouts/v3/components/Footer.tsx index d4f2fdb0..cdc342a5 100644 --- a/apps/web/src/layouts/v3/components/Footer.tsx +++ b/apps/web/src/layouts/v3/components/Footer.tsx @@ -76,9 +76,7 @@ export function Footer() {
github Polkadot Explorer diff --git a/apps/web/src/layouts/v3/components/TopBar.tsx b/apps/web/src/layouts/v3/components/TopBar.tsx index 56450f26..e6f70744 100644 --- a/apps/web/src/layouts/v3/components/TopBar.tsx +++ b/apps/web/src/layouts/v3/components/TopBar.tsx @@ -172,7 +172,7 @@ const Items = ({ items }) => { - )) + )) : null } diff --git a/apps/web/src/providers/extension/modules/signAndNotify.ts b/apps/web/src/providers/extension/modules/signAndNotify.ts index 3a64feed..3a2ccc1d 100644 --- a/apps/web/src/providers/extension/modules/signAndNotify.ts +++ b/apps/web/src/providers/extension/modules/signAndNotify.ts @@ -53,10 +53,7 @@ export async function SignAndNotify( : null const errorMessage = translationMessage || docsMessage console.log( - `Wallet Transaction Result : LOG ${section}.${method}: ${[ - translationMessage, - docsMessage, - ].join('; ')}`, + `Wallet Transaction Result : LOG ${section}.${method}: ${[translationMessage, docsMessage].join('; ')}`, ) createErrorNotification( `${section}.${method}${errorMessage ? ': ' + errorMessage : ''}.`, From fb6a91edf9f4b973792b3955d01f313ec49dedb1 Mon Sep 17 00:00:00 2001 From: 2075 <1140449+2075@users.noreply.github.com> Date: Wed, 8 May 2024 15:09:15 +0200 Subject: [PATCH 04/63] feat: update content --- apps/web/package.json | 1 + .../landingpage/components/AspectRatio.tsx | 24 ++++ .../src/dapps/landingpage/components/Hero.tsx | 38 ++--- .../landingpage/components/Introcordion.tsx | 2 +- .../landingpage/components/Newsletter.tsx | 14 +- apps/web/src/dapps/landingpage/content.ts | 131 +++++++++--------- apps/web/src/dapps/landingpage/index.tsx | 20 +-- .../query/apiProviders/apiProviderResolver.ts | 2 +- .../resolvers/query/displayValues/data.json | 14 +- 9 files changed, 134 insertions(+), 112 deletions(-) create mode 100644 apps/web/src/dapps/landingpage/components/AspectRatio.tsx diff --git a/apps/web/package.json b/apps/web/package.json index d8cbd811..0d70c5c0 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -91,6 +91,7 @@ "sharp": "^0.32.1", "slugify": "^1.6.6", "stripe": "^11.9.1", + "styled-components": "^6.1.10", "three": "^0.151.3", "utf8": "^3.0.0", "uuid": "^9.0.0", diff --git a/apps/web/src/dapps/landingpage/components/AspectRatio.tsx b/apps/web/src/dapps/landingpage/components/AspectRatio.tsx new file mode 100644 index 00000000..9fc10329 --- /dev/null +++ b/apps/web/src/dapps/landingpage/components/AspectRatio.tsx @@ -0,0 +1,24 @@ +import styled from 'styled-components' + +const Root = styled.div` + position: relative; +` +const Wrapper = styled.div` + position: 'absolute', + top: 0, + left: 0, + right: 0, + bottom: 0, + '& > *': { height: '100%', width: '100%' }, +` + +export const AspectRatio = ({ children, ratio = 1 }) => { + return ( + + {children} +
+ + ) +} + +export default AspectRatio diff --git a/apps/web/src/dapps/landingpage/components/Hero.tsx b/apps/web/src/dapps/landingpage/components/Hero.tsx index a49f2f01..f1a04b2a 100644 --- a/apps/web/src/dapps/landingpage/components/Hero.tsx +++ b/apps/web/src/dapps/landingpage/components/Hero.tsx @@ -12,25 +12,30 @@ import { Fragment } from 'react' import Carousel from 'react-material-ui-carousel' import Link from 'src/components/Link' -type Size = '1/4' | '2/4' | '3/4' | '4/4' +import { AspectRatio } from './AspectRatio' + +type Size = '1' | '1/4' | '2/4' | '3/4' | '4/4' | '1/5' | '2/5' | '3/5' | '4/5' const dimensions = (size: Size) => { switch (size) { case '1/4': return { minHeight: { xs: '50vh', md: '25vh' }, height: { xs: '50vh', md: '25vh' } } - break case '2/4': return { minHeight: { xs: '100vh', md: '50vh' }, height: { xs: '100vh', md: '50vh' } } - break case '3/4': return { minHeight: { xs: '100vh', md: '75vh' }, height: { xs: '100vh', md: '75vh' } } - break - case '4/4': + case '1/5': + return { minHeight: { xs: '100vh', md: '20vh' }, height: { xs: '100vh', md: '20vh' } } + case '2/5': + return { minHeight: { xs: '100vh', md: '40vh' }, height: { xs: '100vh', md: '40vh' } } + case '3/5': + return { minHeight: { xs: '100vh', md: '60vh' }, height: { xs: '100vh', md: '60vh' } } + case '4/5': + return { minHeight: { xs: '100vh', md: '80vh' }, height: { xs: '100vh', md: '80vh' } } + case '1': return { minHeight: { xs: '100vh' }, height: { xs: '100vh' } } - break default: - return { minHeight: { xs: '100vh' }, height: { xs: '100vh' } } - break + return { minHeight: { xs: '100%' }, height: { xs: '100%' } } } } @@ -48,9 +53,9 @@ const Teaser = styled(Typography)(({ theme }) => ({ textAlign: 'left', })) -const Backdrop = ({ src, title, bg, size, img, ...other }) => { +const Backdrop = ({ src, title, bg, size, img, imagePosition, ...other }) => { const computedStyles = dimensions(size) - console.log('bg', bg, src, title, size) + console.log('bg', bg, src, title, size, imagePosition) return src ? ( { borderTop: size !== '4/4' && img !== '' ? '1px solid #000000' : 'none', }} > - {src && ( - - )} + {src && } ) : null } @@ -94,6 +92,7 @@ const Item = (props) => { src={props.item.image} title={props.item.title} priority={props?.index === 0} + imagePosition={props.item.imagePosition} /> size?: Size slide?: boolean + ratio?: number } -export const Hero = ({ content, size = '4/4', slide = false }: HeroProps) => { +export const Hero = ({ content, size = '4/4', slide = false, ratio }: HeroProps) => { const theme = useTheme() const isSm = useMediaQuery(theme.breakpoints.up('md'), { defaultMatches: true, diff --git a/apps/web/src/dapps/landingpage/components/Introcordion.tsx b/apps/web/src/dapps/landingpage/components/Introcordion.tsx index 2ef39998..7e8bcb6a 100644 --- a/apps/web/src/dapps/landingpage/components/Introcordion.tsx +++ b/apps/web/src/dapps/landingpage/components/Introcordion.tsx @@ -45,7 +45,7 @@ export const Introcordion = () => ( GameDAO Marketplace: A Hub for Games, Assets, and Collaboration - + GameDAO introduces a comprehensive marketplace that serves as a central hub for trading games, game assets, creative content, and services. This platform is designed to facilitate active participation across the gaming and creative industries, enabling users to buy, sell, and trade assets that are crucial for game development and artistic endeavors. diff --git a/apps/web/src/dapps/landingpage/components/Newsletter.tsx b/apps/web/src/dapps/landingpage/components/Newsletter.tsx index 8cf807d1..bd2b5c0f 100644 --- a/apps/web/src/dapps/landingpage/components/Newsletter.tsx +++ b/apps/web/src/dapps/landingpage/components/Newsletter.tsx @@ -38,20 +38,14 @@ const CustomForm: FC = ({ status, message, onValidated }) => { } return ( - + {`sign up here to get app, game and drop invites`.toUpperCase()} - + = ({ status, message, onValidated }) => { export const Newsletter: React.FC = () => ( ( - subscribe(formData)} /> - )} + render={({ subscribe, status, message }) => subscribe(formData)} />} /> ) diff --git a/apps/web/src/dapps/landingpage/content.ts b/apps/web/src/dapps/landingpage/content.ts index 96614201..10601811 100644 --- a/apps/web/src/dapps/landingpage/content.ts +++ b/apps/web/src/dapps/landingpage/content.ts @@ -191,58 +191,75 @@ export const hero = [ // // -export const hero2 = [ +export const coming_soon = [ { - title: 'Build your own DAO', - // sub: `What you need to know`, - description: `Get started with the powerful framework for the gaming space.`, - links: [ - { text: 'More', url: 'https://blog.gamedao.co/the-gamedao-pinky-paper-8dcda7f2e1ca', icon: 'Joystick' }, - ], - bg: '#609', - }, - { - title: `Fundraising for Creators`, - // sub: `Fundraising and go to market for your game project on GameDAO`, - description: `Raising funds and awareness has never been easy. GameDAO navigates you through the process of lifting off.`, - links: [ - { - text: 'More', - url: 'https://blog.gamedao.co/the-art-of-videogames-funding-a81ce6867d43', - icon: 'Joystick', - }, - ], - bg: '#006699', - }, - - { - title: 'Battlepass', - // sub: `What you need to know`, - description: `What is a Battlepass and why would you need it to set up your gaming organization..`, - links: [ - { - text: 'More', - url: 'https://blog.gamedao.co/how-gamedaos-battlepass-boosts-growth-458b33a6be64', - icon: 'Joystick', - }, - ], - bg: '#660099', + title: `Esports Tournaments`, + sub: `Reach another level of competitiveness with Battlepass`, + description: `500 slots not reached, let's try another time!`, + image: '/teaser.jpg', + align: 'center', + // links: [ + // { text: 'LEARN MORE', url: '/cases/esports', icon: 'Joystick', }, + // { text: 'LEARN MORE', url: '/cases/esports', icon: 'Joystick', }, + // ], + bg: '#000', + img: '/partners/wave-esports-white.png', + img_height: '24', }, - // { - // title: `WAVE Esports`, - // sub: `WAVEpass CASHCUP invitational`, - // description: `500 slots not reached, let's try another time!`, - // // image: '/teaser.jpg', - // // links: [ - // // { text: 'LEARN MORE', url: '/cases/esports', icon: 'Joystick', }, - // // { text: 'LEARN MORE', url: '/cases/esports', icon: 'Joystick', }, - // // ], - // bg: '#000', - // img: '/partners/wave-esports-white.png', - // img_height: '24', - // }, ] +// export const hero2 = [ +// { +// title: 'Build your own DAO', +// // sub: `What you need to know`, +// description: `Get started with the powerful framework for the gaming space.`, +// links: [ +// { text: 'More', url: 'https://blog.gamedao.co/the-gamedao-pinky-paper-8dcda7f2e1ca', icon: 'Joystick' }, +// ], +// bg: '#609', +// }, +// { +// title: `Fundraising for Creators`, +// // sub: `Fundraising and go to market for your game project on GameDAO`, +// description: `Raising funds and awareness has never been easy. GameDAO navigates you through the process of lifting off.`, +// links: [ +// { +// text: 'More', +// url: 'https://blog.gamedao.co/the-art-of-videogames-funding-a81ce6867d43', +// icon: 'Joystick', +// }, +// ], +// bg: '#006699', +// }, + +// { +// title: 'Battlepass', +// // sub: `What you need to know`, +// description: `What is a Battlepass and why would you need it to set up your gaming organization..`, +// links: [ +// { +// text: 'More', +// url: 'https://blog.gamedao.co/how-gamedaos-battlepass-boosts-growth-458b33a6be64', +// icon: 'Joystick', +// }, +// ], +// bg: '#660099', +// }, +// // { +// // title: `WAVE Esports`, +// // sub: `WAVEpass CASHCUP invitational`, +// // description: `500 slots not reached, let's try another time!`, +// // // image: '/teaser.jpg', +// // // links: [ +// // // { text: 'LEARN MORE', url: '/cases/esports', icon: 'Joystick', }, +// // // { text: 'LEARN MORE', url: '/cases/esports', icon: 'Joystick', }, +// // // ], +// // bg: '#000', +// // img: '/partners/wave-esports-white.png', +// // img_height: '24', +// // }, +// ] + // // // @@ -365,27 +382,15 @@ export const transform = { }, { title: `🎉 Fan Experience`, - content: [ - `Create new Experience for your fanbase`, - `Strengthen loyalty`, - `Distribute rewards including digital assets or access to IRL services,`, - ], + content: [`Create new Experience for your fanbase`, `Strengthen loyalty`, `Distribute rewards including digital assets or access to IRL services,`], }, { title: `🍕 Market Outreach`, - content: [ - `New opportunities for partnerships and sponsors`, - `Increase your outreach to new groups`, - `Exposure for existing partners`, - ], + content: [`New opportunities for partnerships and sponsors`, `Increase your outreach to new groups`, `Exposure for existing partners`], }, { title: `💸 Sustainable Revenue`, - content: [ - `Monetize fan engagement`, - `Use a new, innovative revenue stream`, - `Increase sustainability through Web3 revenue share`, - ], + content: [`Monetize fan engagement`, `Use a new, innovative revenue stream`, `Increase sustainability through Web3 revenue share`], }, ], } diff --git a/apps/web/src/dapps/landingpage/index.tsx b/apps/web/src/dapps/landingpage/index.tsx index 43f84ee4..9929758a 100644 --- a/apps/web/src/dapps/landingpage/index.tsx +++ b/apps/web/src/dapps/landingpage/index.tsx @@ -22,7 +22,7 @@ import { // QuestionsBattlepass, } from './components' -import { hero as heroContent, hero2 as hero2Content } from './content' +import { hero as heroContent, coming_soon } from './content' const Wrapper = styled(Box)(({ theme }) => ({ // '& *': { @@ -34,8 +34,7 @@ const Wrapper = styled(Box)(({ theme }) => ({ })) export function Landingpage() { - const { hero, intro, transform, teaser1, roadmap, team, partners, supporters, wallet, disclaimer, questions } = - features + const { hero, intro, transform, teaser1, roadmap, team, partners, supporters, wallet, disclaimer, questions } = features return ( @@ -44,15 +43,11 @@ export function Landingpage() { {/* {hero && } */} {/* {hero && } */} + {/* */} - + Unleash Creativity
Through Community. @@ -60,12 +55,7 @@ export function Landingpage() { {intro && } {teaser1 && ( - + Build Better
Games Together. diff --git a/packages/graph-api/src/resolvers/query/apiProviders/apiProviderResolver.ts b/packages/graph-api/src/resolvers/query/apiProviders/apiProviderResolver.ts index fc02e366..fb17a319 100644 --- a/packages/graph-api/src/resolvers/query/apiProviders/apiProviderResolver.ts +++ b/packages/graph-api/src/resolvers/query/apiProviders/apiProviderResolver.ts @@ -25,8 +25,8 @@ export async function apiProviderResolver(): Promise { // TODO: Remove hardcoded values networkCurrency: 0, // 0 = ZERO - governanceCurrency: 2, // 2 = GAME paymentCurrencies: 1, // 1 = PLAY + governanceCurrency: 2, // 2 = GAME blockTargetTime: blockDuration ?? 12, }, name: (systemName.toHuman() as any) ?? 'ZERO', diff --git a/packages/graph-api/src/resolvers/query/displayValues/data.json b/packages/graph-api/src/resolvers/query/displayValues/data.json index 0473fa25..f7723308 100644 --- a/packages/graph-api/src/resolvers/query/displayValues/data.json +++ b/packages/graph-api/src/resolvers/query/displayValues/data.json @@ -4,6 +4,16 @@ "key": "0", "text": "GAME", "value": 0 + }, + { + "key": "1", + "text": "PLAY", + "value": 1 + }, + { + "key": "2", + "text": "ZERO", + "value": 2 } ], "proposalTypes": [ @@ -26,7 +36,7 @@ }, { "key": "1", - "text": "Token Weight Majority", + "text": "Token Weighted Majority", "value": 1 }, { @@ -441,4 +451,4 @@ "value": 9 } ] -} \ No newline at end of file +} From efd0fdb3f738cff29007169ac1659b5f214ca0f6 Mon Sep 17 00:00:00 2001 From: 2075 <1140449+2075@users.noreply.github.com> Date: Wed, 2 Oct 2024 23:32:49 +0200 Subject: [PATCH 05/63] feat: update app --- apps/app/package.json | 3 +- apps/app/src/components/atoms/Loader.tsx | 15 +- .../ThemePrimaryColor.tsx | 0 .../{atoms => molecules}/ThemeSwitch.tsx | 0 .../TransactionDialog/transactionDialog.tsx | 22 +- .../components/organisms/forms/baseForm.tsx | 5 +- apps/app/src/components/readme.md | 14 + .../src/constants/{unity.ts => collective.ts} | 2 +- apps/app/src/constants/endpoints.ts | 2 +- apps/app/src/dapps/account/Navigation.tsx | 16 +- .../src/dapps/account/components/Identity.tsx | 27 +- .../account/components/MyCollectables.tsx | 4 +- .../battlepass/components/Navigation.tsx | 6 +- .../dapps/battlepass/components/Quests.tsx | 4 +- .../src/dapps/battlepass/components/XPBar.tsx | 4 +- .../battlepass/components/charts/PieColor.tsx | 36 + .../dapps/battlepass/create/DashboardTab.tsx | 2 + .../dapps/battlepass/create/GeneralEditor.tsx | 82 +- .../app/src/dapps/battlepass/views/Create.tsx | 10 +- .../CampaignCard/components/content.tsx | 4 +- .../campaignDetailsContent.tsx | 4 +- .../campaign/components/create/Content.tsx} | 0 .../campaign/components/create/Name.tsx} | 0 .../campaign/components/create/Settings.tsx} | 0 .../campaign/components/create/index.tsx} | 63 +- apps/app/src/dapps/campaign/context.tsx | 50 + .../app/src/dapps/campaign/views/Campaign.tsx | 1 + apps/app/src/dapps/campaign/views/Create.tsx | 120 + .../{index.tsx => views/Overview.tsx} | 15 +- .../components/Header.tsx | 163 +- .../components/JoinBtn.tsx | 9 +- .../components/Navigation.tsx | 48 +- .../components/cardGrid/CardGrid.tsx | 4 +- .../components/cardGrid/components/Card.tsx | 14 +- .../components/cardGrid/components/Filter.tsx | 0 .../cardGrid/components/Loading.tsx | 0 .../components/create/Controller.tsx} | 0 .../components/create/Name.tsx} | 48 +- .../components/create/Settings.tsx} | 0 .../tabs/campaigns/campaignDetailsView.tsx | 0 .../tabs/campaigns/campaignsView.tsx | 18 +- .../components/tabs/campaigns/create.tsx | 10 +- .../components/tabs/governance/create.tsx | 0 .../components/tabs/governance/overview.tsx} | 2 +- .../components/tabs/governance/proposal.tsx} | 4 +- .../components/tabs/members/membersView.tsx | 4 +- .../components/areaChartContainer.tsx | 0 .../components/radialChartContainer.tsx | 0 .../organization/components/treasuryChart.tsx | 2 +- .../tabs/organization/dashboardView.tsx | 425 + .../tabs/settings/components/about.tsx | 0 .../tabs/settings/components/accessType.tsx | 0 .../tabs/settings/components/control.tsx | 0 .../tabs/settings/components/memberLimit.tsx | 0 .../tabs/settings/components/memberType.tsx | 0 .../components/tabs/settings/settingsView.tsx | 6 +- .../tabs/treasury/components/asset.tsx | 0 .../tabs/treasury/components/assets.tsx | 0 .../tabs/treasury/components/chartLabel.tsx | 0 .../tabs/treasury/components/charts.tsx | 8 +- .../tabs/treasury/components/mock-data.tsx | 0 .../tabs/treasury/components/transactions.tsx | 0 .../components/tabs/treasury/treasuryView.tsx | 0 apps/app/src/dapps/collective/config.ts | 28 + apps/app/src/dapps/collective/context.ts | 66 + .../views/Collective.tsx} | 51 +- .../{unity => collective}/views/Create.tsx | 62 +- .../views/Finalize.tsx} | 40 +- .../{unity => collective}/views/Overview.tsx | 32 +- .../dapps/landingpage/components/Intro.tsx | 2 +- apps/app/src/dapps/landingpage/content.ts | 30 +- apps/app/src/dapps/landingpage/index.tsx | 194 +- .../tabs/organization/dashboardView.tsx | 411 - apps/app/src/dapps/unity/context.ts | 47 - .../hooks/tx/useCreateCampaignTransaction.ts | 2 +- .../hooks/tx/useCreateProposalTransaction.ts | 2 +- apps/app/src/hooks/useBlockNumber.ts | 2 +- apps/app/src/hooks/useDisplayValues.ts | 2 +- apps/app/src/hooks/useLocalStorage.ts | 5 +- .../src/layouts/default/components/footer.tsx | 4 +- .../landingpage/components/sidebar.tsx | 2 +- apps/app/src/layouts/v2/components/Footer.tsx | 4 +- apps/app/src/layouts/v2/components/Header.tsx | 51 +- .../layouts/v2/components/NavbarMobile.tsx | 32 +- .../v2/components/OrganizationButton.tsx | 2 +- .../app/src/layouts/v2/components/Sidebar.tsx | 180 +- apps/app/src/layouts/v2/components/TopBar.tsx | 2 +- apps/app/src/layouts/v2/index.tsx | 18 +- apps/app/src/layouts/v5/components/Footer.tsx | 130 + apps/app/src/layouts/v5/components/Header.tsx | 317 + .../layouts/v5/components/HeaderMobile.tsx | 117 + .../layouts/v5/components/MainNavigation.tsx | 0 .../layouts/v5/components/NavbarMobile.tsx | 233 + .../v5/components/OrganizationButton.tsx | 100 + .../app/src/layouts/v5/components/Sidebar.tsx | 160 + apps/app/src/layouts/v5/components/TopBar.tsx | 217 + apps/app/src/layouts/v5/index.tsx | 136 + apps/app/src/pages/_app.tsx | 6 + .../pages/battlepass/[id]/[view]/index.tsx | 50 + apps/app/src/pages/battlepass/[id]/index.tsx | 37 + .../src/pages/battlepass/create/[view].tsx | 32 + apps/app/src/pages/battlepass/index.tsx | 69 + apps/app/src/pages/battlepass/new.tsx | 32 + apps/app/src/pages/battlepass/overview.tsx | 48 + .../src/pages/{fund => campaigns}/[id].tsx | 0 apps/app/src/pages/campaigns/create.tsx | 43 + apps/app/src/pages/campaigns/index.tsx | 9 + .../pages/{fund => campaigns}/overview.tsx | 24 +- .../[id]/[view]/index.tsx | 21 +- .../{unity => collectives}/[id]/index.tsx | 2 +- apps/app/src/pages/collectives/create.tsx | 42 + .../pages/{unity => collectives}/finalize.tsx | 194 +- .../pages/{unity => collectives}/index.tsx | 2 +- .../pages/{unity => collectives}/overview.tsx | 13 +- apps/app/src/pages/fund/index.tsx | 20 - apps/app/src/pages/unity/create.tsx | 39 - apps/app/src/pages/v5/[dapp]/[view] | 0 apps/app/src/pages/v5/index.tsx | 8 + .../extension/components/signAndNotify.ts | 90 +- .../providers/graphQl/components/graphQl.ts | 4 +- .../providers/network/components/network.ts | 21 +- .../src/providers/network/networkProvider.tsx | 3 + .../app/src/providers/theme/themeProvider.tsx | 3 +- apps/app/src/queries/dapps/campaigns.graphql | 28 +- apps/app/src/queries/index.ts | 36252 ++++++++-------- apps/app/src/utils/polkadot.ts | 70 +- apps/app/tsconfig.json | 4 +- package.json | 22 - 128 files changed, 21990 insertions(+), 19155 deletions(-) rename apps/app/src/components/{atoms => molecules}/ThemePrimaryColor.tsx (100%) rename apps/app/src/components/{atoms => molecules}/ThemeSwitch.tsx (100%) create mode 100644 apps/app/src/components/readme.md rename apps/app/src/constants/{unity.ts => collective.ts} (86%) create mode 100644 apps/app/src/dapps/battlepass/components/charts/PieColor.tsx rename apps/app/src/{components/organisms/forms/Campaign/components/content.tsx => dapps/campaign/components/create/Content.tsx} (100%) rename apps/app/src/{components/organisms/forms/Campaign/components/name.tsx => dapps/campaign/components/create/Name.tsx} (100%) rename apps/app/src/{components/organisms/forms/Campaign/components/settings.tsx => dapps/campaign/components/create/Settings.tsx} (100%) rename apps/app/src/{components/organisms/forms/Campaign/form.tsx => dapps/campaign/components/create/index.tsx} (86%) create mode 100644 apps/app/src/dapps/campaign/context.tsx create mode 100644 apps/app/src/dapps/campaign/views/Campaign.tsx create mode 100644 apps/app/src/dapps/campaign/views/Create.tsx rename apps/app/src/dapps/campaign/{index.tsx => views/Overview.tsx} (92%) rename apps/app/src/dapps/{unity => collective}/components/Header.tsx (82%) rename apps/app/src/dapps/{unity => collective}/components/JoinBtn.tsx (93%) rename apps/app/src/dapps/{unity => collective}/components/Navigation.tsx (83%) rename apps/app/src/dapps/{unity => collective}/components/cardGrid/CardGrid.tsx (78%) rename apps/app/src/dapps/{unity => collective}/components/cardGrid/components/Card.tsx (92%) rename apps/app/src/dapps/{unity => collective}/components/cardGrid/components/Filter.tsx (100%) rename apps/app/src/dapps/{unity => collective}/components/cardGrid/components/Loading.tsx (100%) rename apps/app/src/dapps/{unity/components/create/controller.tsx => collective/components/create/Controller.tsx} (100%) rename apps/app/src/dapps/{unity/components/create/name.tsx => collective/components/create/Name.tsx} (86%) rename apps/app/src/dapps/{unity/components/create/settings.tsx => collective/components/create/Settings.tsx} (100%) rename apps/app/src/dapps/{unity => collective}/components/tabs/campaigns/campaignDetailsView.tsx (100%) rename apps/app/src/dapps/{unity => collective}/components/tabs/campaigns/campaignsView.tsx (83%) rename apps/app/src/dapps/{unity => collective}/components/tabs/campaigns/create.tsx (78%) rename apps/app/src/dapps/{unity => collective}/components/tabs/governance/create.tsx (100%) rename apps/app/src/dapps/{unity/components/tabs/governance/governanceView.tsx => collective/components/tabs/governance/overview.tsx} (98%) rename apps/app/src/dapps/{unity/components/tabs/governance/proposalView.tsx => collective/components/tabs/governance/proposal.tsx} (99%) rename apps/app/src/dapps/{unity => collective}/components/tabs/members/membersView.tsx (99%) rename apps/app/src/dapps/{unity => collective}/components/tabs/organization/components/areaChartContainer.tsx (100%) rename apps/app/src/dapps/{unity => collective}/components/tabs/organization/components/radialChartContainer.tsx (100%) rename apps/app/src/dapps/{unity => collective}/components/tabs/organization/components/treasuryChart.tsx (97%) create mode 100644 apps/app/src/dapps/collective/components/tabs/organization/dashboardView.tsx rename apps/app/src/dapps/{unity => collective}/components/tabs/settings/components/about.tsx (100%) rename apps/app/src/dapps/{unity => collective}/components/tabs/settings/components/accessType.tsx (100%) rename apps/app/src/dapps/{unity => collective}/components/tabs/settings/components/control.tsx (100%) rename apps/app/src/dapps/{unity => collective}/components/tabs/settings/components/memberLimit.tsx (100%) rename apps/app/src/dapps/{unity => collective}/components/tabs/settings/components/memberType.tsx (100%) rename apps/app/src/dapps/{unity => collective}/components/tabs/settings/settingsView.tsx (92%) rename apps/app/src/dapps/{unity => collective}/components/tabs/treasury/components/asset.tsx (100%) rename apps/app/src/dapps/{unity => collective}/components/tabs/treasury/components/assets.tsx (100%) rename apps/app/src/dapps/{unity => collective}/components/tabs/treasury/components/chartLabel.tsx (100%) rename apps/app/src/dapps/{unity => collective}/components/tabs/treasury/components/charts.tsx (95%) rename apps/app/src/dapps/{unity => collective}/components/tabs/treasury/components/mock-data.tsx (100%) rename apps/app/src/dapps/{unity => collective}/components/tabs/treasury/components/transactions.tsx (100%) rename apps/app/src/dapps/{unity => collective}/components/tabs/treasury/treasuryView.tsx (100%) create mode 100644 apps/app/src/dapps/collective/config.ts create mode 100644 apps/app/src/dapps/collective/context.ts rename apps/app/src/dapps/{unity/views/Unity.tsx => collective/views/Collective.tsx} (63%) rename apps/app/src/dapps/{unity => collective}/views/Create.tsx (72%) rename apps/app/src/dapps/{unity/components/tabs/organization/finalizeView.tsx => collective/views/Finalize.tsx} (89%) rename apps/app/src/dapps/{unity => collective}/views/Overview.tsx (92%) delete mode 100644 apps/app/src/dapps/unity/components/tabs/organization/dashboardView.tsx delete mode 100644 apps/app/src/dapps/unity/context.ts create mode 100644 apps/app/src/layouts/v5/components/Footer.tsx create mode 100644 apps/app/src/layouts/v5/components/Header.tsx create mode 100644 apps/app/src/layouts/v5/components/HeaderMobile.tsx create mode 100644 apps/app/src/layouts/v5/components/MainNavigation.tsx create mode 100644 apps/app/src/layouts/v5/components/NavbarMobile.tsx create mode 100644 apps/app/src/layouts/v5/components/OrganizationButton.tsx create mode 100644 apps/app/src/layouts/v5/components/Sidebar.tsx create mode 100644 apps/app/src/layouts/v5/components/TopBar.tsx create mode 100644 apps/app/src/layouts/v5/index.tsx create mode 100644 apps/app/src/pages/battlepass/[id]/[view]/index.tsx create mode 100644 apps/app/src/pages/battlepass/[id]/index.tsx create mode 100644 apps/app/src/pages/battlepass/create/[view].tsx create mode 100644 apps/app/src/pages/battlepass/index.tsx create mode 100644 apps/app/src/pages/battlepass/new.tsx create mode 100644 apps/app/src/pages/battlepass/overview.tsx rename apps/app/src/pages/{fund => campaigns}/[id].tsx (100%) create mode 100644 apps/app/src/pages/campaigns/create.tsx create mode 100644 apps/app/src/pages/campaigns/index.tsx rename apps/app/src/pages/{fund => campaigns}/overview.tsx (63%) rename apps/app/src/pages/{unity => collectives}/[id]/[view]/index.tsx (82%) rename apps/app/src/pages/{unity => collectives}/[id]/index.tsx (94%) create mode 100644 apps/app/src/pages/collectives/create.tsx rename apps/app/src/pages/{unity => collectives}/finalize.tsx (75%) rename apps/app/src/pages/{unity => collectives}/index.tsx (91%) rename apps/app/src/pages/{unity => collectives}/overview.tsx (68%) delete mode 100644 apps/app/src/pages/fund/index.tsx delete mode 100644 apps/app/src/pages/unity/create.tsx create mode 100644 apps/app/src/pages/v5/[dapp]/[view] create mode 100644 apps/app/src/pages/v5/index.tsx diff --git a/apps/app/package.json b/apps/app/package.json index 5b38f4d2..972a962d 100644 --- a/apps/app/package.json +++ b/apps/app/package.json @@ -3,7 +3,7 @@ "version": "1.0.0", "private": true, "scripts": { - "dev": "next dev -p 5555", + "dev": "next dev -p 1234", "build": "next build", "start": "next start", "lint": "next lint", @@ -32,6 +32,7 @@ "@mui/icons-material": "^5.8.4", "@mui/lab": "^5.0.0-alpha.91", "@mui/material": "^5.9.1", + "@mui/x-charts": "^7.6.2", "@mui/x-data-grid": "^5.13.1", "@mui/x-date-pickers": "^5.0.0-beta.1", "@next-auth/mongodb-adapter": "^1.1.1", diff --git a/apps/app/src/components/atoms/Loader.tsx b/apps/app/src/components/atoms/Loader.tsx index 0cb8ef0d..ee458d1f 100644 --- a/apps/app/src/components/atoms/Loader.tsx +++ b/apps/app/src/components/atoms/Loader.tsx @@ -4,13 +4,20 @@ import { CircularProgress, Typography, Stack } from '@mui/material' type Props = { text?: string } + +export const Spinner = ({ text }: Props) => { + return ( + + + {text && {text}} + + ) +} + export const Loader = ({ text }: Props) => { return ( theme.zIndex.drawer + 1 }} open={true}> - - - {text && {text}} - + ) } diff --git a/apps/app/src/components/atoms/ThemePrimaryColor.tsx b/apps/app/src/components/molecules/ThemePrimaryColor.tsx similarity index 100% rename from apps/app/src/components/atoms/ThemePrimaryColor.tsx rename to apps/app/src/components/molecules/ThemePrimaryColor.tsx diff --git a/apps/app/src/components/atoms/ThemeSwitch.tsx b/apps/app/src/components/molecules/ThemeSwitch.tsx similarity index 100% rename from apps/app/src/components/atoms/ThemeSwitch.tsx rename to apps/app/src/components/molecules/ThemeSwitch.tsx diff --git a/apps/app/src/components/molecules/TransactionDialog/transactionDialog.tsx b/apps/app/src/components/molecules/TransactionDialog/transactionDialog.tsx index ce94b1ae..321b7886 100644 --- a/apps/app/src/components/molecules/TransactionDialog/transactionDialog.tsx +++ b/apps/app/src/components/molecules/TransactionDialog/transactionDialog.tsx @@ -24,6 +24,7 @@ interface ComponentProps { } export function TransactionDialog({ open, onClose, txData, txCallback, children }: ComponentProps) { + console.log('transactionDialog', open, txData) const { t } = useTranslation() const [showDescription, setShowDescription] = useState(false) @@ -67,10 +68,9 @@ export function TransactionDialog({ open, onClose, txData, txCallback, children {t('button:ui:transaction:transaction_fee')} - {`-${formatBalanceString( - paymentInfo?.partialFee?.toString() ?? '0', - 18, - )} ${networkBalance.tokenSymbol}`} + {`-${formatBalanceString(paymentInfo?.partialFee?.toString() ?? '0', 18)} ${ + networkBalance.tokenSymbol + }`} @@ -79,12 +79,7 @@ export function TransactionDialog({ open, onClose, txData, txCallback, children {txData.actionSubTitle || ''} {txData?.description && ( - setShowDescription(!showDescription)} - > + setShowDescription(!showDescription)}> {t('button:ui:transaction:description_toggle')} )} @@ -108,10 +103,9 @@ export function TransactionDialog({ open, onClose, txData, txCallback, children {txData.actionSubLine || ''} - {`-${formatBalanceString( - txData.deposit, - depositBalance.tokenDecimals, - )} ${depositBalance.tokenSymbol}`} + {`-${formatBalanceString(txData.deposit, depositBalance.tokenDecimals)} ${ + depositBalance.tokenSymbol + }`} diff --git a/apps/app/src/components/organisms/forms/baseForm.tsx b/apps/app/src/components/organisms/forms/baseForm.tsx index 7967afeb..d1974efc 100644 --- a/apps/app/src/components/organisms/forms/baseForm.tsx +++ b/apps/app/src/components/organisms/forms/baseForm.tsx @@ -11,8 +11,8 @@ interface ComponentProps { export function BaseForm({ title, children, error }: ComponentProps) { return ( {title} + {children} {error && ( diff --git a/apps/app/src/components/readme.md b/apps/app/src/components/readme.md new file mode 100644 index 00000000..2c208aec --- /dev/null +++ b/apps/app/src/components/readme.md @@ -0,0 +1,14 @@ +# haiku component lib + +## atoms + +components which are self contained and/or contain other low level components from mui + +## molecules + +simple components which contain ui interactions and use local state + +## organisms + +complex components which contain use cases and complex state + diff --git a/apps/app/src/constants/unity.ts b/apps/app/src/constants/collective.ts similarity index 86% rename from apps/app/src/constants/unity.ts rename to apps/app/src/constants/collective.ts index d5a8ce66..134da0df 100644 --- a/apps/app/src/constants/unity.ts +++ b/apps/app/src/constants/collective.ts @@ -1,4 +1,4 @@ -export enum UnityView { +export enum CollectiveView { DASHBOARD = 'dashboard', CAMPAIGNS = 'campagins', GOVERNANCE = 'governance', diff --git a/apps/app/src/constants/endpoints.ts b/apps/app/src/constants/endpoints.ts index 52e52712..aeb08583 100644 --- a/apps/app/src/constants/endpoints.ts +++ b/apps/app/src/constants/endpoints.ts @@ -24,7 +24,7 @@ const developmentEndpoints: Endpoints = [ const productionEndpoints: Endpoints = [ { image: '/svg/z-ctrl-45-wht.svg', - name: 'development', + name: 'private', url: 'https://graph.dev.gamedao.net/v1/graphql', healthCheck: 'https://graph.dev.gamedao.net/health', chain: 'wss://rpc.dev.gamedao.net', diff --git a/apps/app/src/dapps/account/Navigation.tsx b/apps/app/src/dapps/account/Navigation.tsx index d808eaed..a49c3b11 100644 --- a/apps/app/src/dapps/account/Navigation.tsx +++ b/apps/app/src/dapps/account/Navigation.tsx @@ -23,14 +23,14 @@ export function Navigation({ param }: ComponentProps) { label: t('button:navigation:overview'), value: AccountTabs.OVERVIEW, }, - { - label: `Organizations`, //t('button:navigation:my_organizations'), - value: AccountTabs.ORGANIZATIONS, - }, - { - label: t('button:navigation:my_campaigns'), - value: AccountTabs.CAMPAIGNS, - }, + // { + // label: `Organizations`, //t('button:navigation:my_organizations'), + // value: AccountTabs.ORGANIZATIONS, + // }, + // { + // label: t('button:navigation:my_campaigns'), + // value: AccountTabs.CAMPAIGNS, + // }, { label: t('button:navigation:my_collectables'), value: AccountTabs.COLLECTABLES, diff --git a/apps/app/src/dapps/account/components/Identity.tsx b/apps/app/src/dapps/account/components/Identity.tsx index 68d87d67..c87097b6 100644 --- a/apps/app/src/dapps/account/components/Identity.tsx +++ b/apps/app/src/dapps/account/components/Identity.tsx @@ -82,34 +82,33 @@ export function Identity() { const closeModal = useCallback(() => { setShowModal(false) resetTx() + setSubmitEnabled(true) }, [setShowModal]) - const TransactionModal = (tx) => ( - - ) - const [submitEnabled, setSubmitEnabled] = useState(true) const submit = useCallback((data, action: 'set' | 'clear') => { if (tx) return - console.log('submit', data, action) - setSubmitEnabled(false) - setValues(data) - if (action === 'clear') setTx(clearIdentityTx) - else setTx(setIdentityTx) - setShowModal(true) + const send = async () => { + console.log('submit', data, action) + setSubmitEnabled(false) + setValues(data) + if (action === 'clear') setTx(clearIdentityTx) + else setTx(setIdentityTx) + setShowModal(true) + } + send() }, []) // - // console.log('tx', tx) + console.log('tx', tx) return loading ? ( ) : ( - {tx && } - + {}
@@ -344,7 +343,7 @@ export function Identity() { onClick={formHandler.handleSubmit((data) => submit(data, 'set'))} color="primary" variant={!isClearDisabled ? 'outlined' : 'contained'} - disabled={!submitEnabled} + // disabled={submitEnabled} > {/*{!isClearDisabled ? t('button:form:identity:update') : t('button:form:identity:submit')}*/} {!isClearDisabled ? `Update Identity` : `Set Identity`} diff --git a/apps/app/src/dapps/account/components/MyCollectables.tsx b/apps/app/src/dapps/account/components/MyCollectables.tsx index 4746e350..06f70ac7 100644 --- a/apps/app/src/dapps/account/components/MyCollectables.tsx +++ b/apps/app/src/dapps/account/components/MyCollectables.tsx @@ -34,7 +34,7 @@ export function MyCollectables() { {' '} - ZERO Ecosystem{' '} + kusama://subzero{' '} No collectables have been indexed on this network yet. Please try again later. @@ -54,7 +54,7 @@ export function MyCollectables() { {' '} - Kusama{' '} + kusama://rmrk{' '} {kusamaNFT?.rmrkNfts.length === 0 ? ( diff --git a/apps/app/src/dapps/battlepass/components/Navigation.tsx b/apps/app/src/dapps/battlepass/components/Navigation.tsx index d323c21f..43ba498a 100644 --- a/apps/app/src/dapps/battlepass/components/Navigation.tsx +++ b/apps/app/src/dapps/battlepass/components/Navigation.tsx @@ -72,21 +72,21 @@ export function Navigation({ id, view, org }: TProps) { label: 'Dashboard', value: BattlepassViews.DASHBOARD, disabled: !isBattlePass, - } + } : null, isBattlePass ? { label: 'Leaderboard', value: BattlepassViews.LEADERBOARD, disabled: !isBattlePass, - } + } : null, isPrime ? { label: 'Admin', value: BattlepassViews.ADMIN, disabled: !isPrime, - } + } : null, ].filter((item) => item !== null), [isBattlePass, isMember, isPrime], diff --git a/apps/app/src/dapps/battlepass/components/Quests.tsx b/apps/app/src/dapps/battlepass/components/Quests.tsx index 9b89e202..ad41a366 100644 --- a/apps/app/src/dapps/battlepass/components/Quests.tsx +++ b/apps/app/src/dapps/battlepass/components/Quests.tsx @@ -106,8 +106,8 @@ export const BPQuestItem = ({ index, item, achievement, active }: TGridItemProps achievement?.progress === 1 ? 'done' : item?.maxDaily - ? `${a} of ${item?.maxDaily}` - : `${a} of ${item?.quantity}` + ? `${a} of ${item?.maxDaily}` + : `${a} of ${item?.quantity}` enum Source { Wallet, diff --git a/apps/app/src/dapps/battlepass/components/XPBar.tsx b/apps/app/src/dapps/battlepass/components/XPBar.tsx index 2f2ca5ec..7cd7026f 100644 --- a/apps/app/src/dapps/battlepass/components/XPBar.tsx +++ b/apps/app/src/dapps/battlepass/components/XPBar.tsx @@ -141,9 +141,7 @@ export const XPBar = ({ args }: TProps) => { - {`${displayPoints}${ - maxPoints > 0 ? ` / ${nFormat(maxPoints)}` : `` - } BP`} + {`${displayPoints}${maxPoints > 0 ? ` / ${nFormat(maxPoints)}` : ``} BP`} {rank} diff --git a/apps/app/src/dapps/battlepass/components/charts/PieColor.tsx b/apps/app/src/dapps/battlepass/components/charts/PieColor.tsx new file mode 100644 index 00000000..41729446 --- /dev/null +++ b/apps/app/src/dapps/battlepass/components/charts/PieColor.tsx @@ -0,0 +1,36 @@ +import * as React from 'react' +import Box from '@mui/material/Box' +import Stack from '@mui/material/Stack' +import Typography from '@mui/material/Typography' +import { PieChart } from '@mui/x-charts/PieChart' + +const pieParams = { height: 200, margin: { right: 5 } } +const palette = ['red', 'blue', 'green'] + +export function PieColor() { + return ( + + + Default + + + + Palette + + + + Item + + + + ) +} + +export default PieColor diff --git a/apps/app/src/dapps/battlepass/create/DashboardTab.tsx b/apps/app/src/dapps/battlepass/create/DashboardTab.tsx index d84eb58b..1dc1a77c 100644 --- a/apps/app/src/dapps/battlepass/create/DashboardTab.tsx +++ b/apps/app/src/dapps/battlepass/create/DashboardTab.tsx @@ -1,5 +1,6 @@ import { TabPanel } from '@mui/lab' import { Typography } from '@mui/material' +// import PieColor from 'dapps/battlepass/components/charts/PieColor' export const DashboardTab = () => { // select organization @@ -16,6 +17,7 @@ export const DashboardTab = () => { return ( + {/* */} ) } diff --git a/apps/app/src/dapps/battlepass/create/GeneralEditor.tsx b/apps/app/src/dapps/battlepass/create/GeneralEditor.tsx index 00097886..dec366fe 100644 --- a/apps/app/src/dapps/battlepass/create/GeneralEditor.tsx +++ b/apps/app/src/dapps/battlepass/create/GeneralEditor.tsx @@ -48,6 +48,18 @@ import TabBar from './TabBar' import { initialState } from './const' +// + +enum TransactionType { + CREATE = 'CREATE', + ACTIVATE = 'ACTIVATE', + LINK = 'LINK', +} + +const TransactionModal = ({ open, onClose, txData, txCallback }) => {} + +// + type TArgs = { organizationId?: string battlepassId?: string @@ -217,6 +229,15 @@ export const GeneralEditor = ({ args }: TProps) => { // bp_user_metadata - user side battlepass nft metadata // bp_reward_content drop item nft metadata + const [showModal, setShowModal] = useState(false) + const openModal = () => setShowModal(true) + const closeModal = () => setShowModal(false) + const handleTxComplete = (e: any) => { + console.log('transaction complete', e) + closeModal() + } + const [txData, setTxData] = useState() + // create const [showCreateModal, setShowCreateModal] = useState(false) @@ -420,15 +441,35 @@ export const GeneralEditor = ({ args }: TProps) => { `} > - - ) : ( - card + CoverImage )} - - + + { )} + {showModal && ( + + )} + {showCreateModal && ( { variant="outlined" > {organizations.map((item, index) => ( - + {item.label} ))} @@ -351,7 +355,7 @@ export const Create = () => { label="Select Battlepass" variant="outlined" > - {battlepasses.map((item, index) => ( + {battlepasses?.map((item, index) => ( {item.name} @@ -365,6 +369,8 @@ export const Create = () => { +
+ {/* diff --git a/apps/app/src/dapps/campaign/components/CampaignCard/components/content.tsx b/apps/app/src/dapps/campaign/components/CampaignCard/components/content.tsx index b839e68b..e2a719c0 100644 --- a/apps/app/src/dapps/campaign/components/CampaignCard/components/content.tsx +++ b/apps/app/src/dapps/campaign/components/CampaignCard/components/content.tsx @@ -59,9 +59,7 @@ export function Content({ title, organizationName, backers, target, contributed, {t('label:funded')} - {`${funded} ${ - systemProperties?.tokenSymbol?.[currencyId] ?? '' - } (${progress}%)`} + {`${funded} ${systemProperties?.tokenSymbol?.[currencyId] ?? ''} (${progress}%)`} diff --git a/apps/app/src/dapps/campaign/components/CampaignsSection/campaignDetailsContent.tsx b/apps/app/src/dapps/campaign/components/CampaignsSection/campaignDetailsContent.tsx index f022c0a1..090f4915 100644 --- a/apps/app/src/dapps/campaign/components/CampaignsSection/campaignDetailsContent.tsx +++ b/apps/app/src/dapps/campaign/components/CampaignsSection/campaignDetailsContent.tsx @@ -136,9 +136,7 @@ export function CampaignDetailsContent({ {t('page:campaign_details:target')} - {`${aim} ${ - systemProperties?.tokenSymbol?.[currencyId] ?? '' - }`} + {`${aim} ${systemProperties?.tokenSymbol?.[currencyId] ?? ''}`} diff --git a/apps/app/src/components/organisms/forms/Campaign/components/content.tsx b/apps/app/src/dapps/campaign/components/create/Content.tsx similarity index 100% rename from apps/app/src/components/organisms/forms/Campaign/components/content.tsx rename to apps/app/src/dapps/campaign/components/create/Content.tsx diff --git a/apps/app/src/components/organisms/forms/Campaign/components/name.tsx b/apps/app/src/dapps/campaign/components/create/Name.tsx similarity index 100% rename from apps/app/src/components/organisms/forms/Campaign/components/name.tsx rename to apps/app/src/dapps/campaign/components/create/Name.tsx diff --git a/apps/app/src/components/organisms/forms/Campaign/components/settings.tsx b/apps/app/src/dapps/campaign/components/create/Settings.tsx similarity index 100% rename from apps/app/src/components/organisms/forms/Campaign/components/settings.tsx rename to apps/app/src/dapps/campaign/components/create/Settings.tsx diff --git a/apps/app/src/components/organisms/forms/Campaign/form.tsx b/apps/app/src/dapps/campaign/components/create/index.tsx similarity index 86% rename from apps/app/src/components/organisms/forms/Campaign/form.tsx rename to apps/app/src/dapps/campaign/components/create/index.tsx index ebd6605e..b8ca60ba 100644 --- a/apps/app/src/components/organisms/forms/Campaign/form.tsx +++ b/apps/app/src/dapps/campaign/components/create/index.tsx @@ -11,22 +11,22 @@ import { useTmpCampaignState } from 'src/hooks/useTmpCampaignState' import { Box, Button, Stack } from '@mui/material' import { ConfirmationModal } from 'components/molecules/ConfirmationModal' -import { ConfirmDeleteCampaignDraft } from 'dapps/campaign/components/ConfirmDeleteCampaignDraft' import { TransactionDialog } from 'components/molecules/TransactionDialog/transactionDialog' +import { ConfirmDeleteCampaignDraft } from 'dapps/campaign/components/ConfirmDeleteCampaignDraft' -import { Content, validationSchema as contentValidationSchema } from './components/content' -import { Name, validationSchema as nameValidationSchema } from './components/name' -import { Settings, getValidationSchema as getSettingsValidationSchema } from './components/settings' +import { Content, validationSchema as contentValidationSchema } from './Content' +import { Name, validationSchema as nameValidationSchema } from './Name' +import { Settings, getValidationSchema as getSettingsValidationSchema } from './Settings' interface ComponentProps { - organizationId: string - currentStep: number + collectiveId: string draftId?: string - cancel: () => void + currentStep: number setStep: (step) => void + cancel: () => void } -export function Form({ organizationId, cancel, currentStep, setStep, draftId }: ComponentProps) { +export function CreateCampaign({ collectiveId, cancel, currentStep, setStep, draftId }: ComponentProps) { const [openModal, setOpenModal] = useState(false) const [openConfirmDeleteModal, setOpenConfirmDeleteModal] = useState(false) const tmpCampaignState = useTmpCampaignState() @@ -35,16 +35,16 @@ export function Form({ organizationId, cancel, currentStep, setStep, draftId }: const [termsConditionAccepted, setTermsConditionAccepted] = useState(false) const [txModalState, setTxModalState] = useState(false) const createCampaignTx = useCreateCampaignTransaction() - const { addDraft, drafts } = useSaveCampaignDraft(organizationId) + const { addDraft, drafts } = useSaveCampaignDraft(collectiveId) const { t } = useTranslation() useEffect(() => { - tmpCampaignState.setOrgId(organizationId) - }, [tmpCampaignState, organizationId]) + tmpCampaignState.setOrgId(collectiveId) + }, [tmpCampaignState, collectiveId]) useEffect(() => { if (draftId && drafts[draftId]) { - tmpCampaignState.restoreDraft({ ...drafts[draftId], orgId: organizationId }) + tmpCampaignState.restoreDraft({ ...drafts[draftId], orgId: collectiveId }) } }, [draftId, drafts]) @@ -62,6 +62,7 @@ export function Form({ organizationId, cancel, currentStep, setStep, draftId }: }, [currentStep, setStep]) const handleNext = useCallback(() => { + console.log(currentStep) if (currentStep < 2 && setStep) { setStep(currentStep + 1) } @@ -163,6 +164,7 @@ export function Form({ organizationId, cancel, currentStep, setStep, draftId }: }, []) const handleOpenModal = useCallback(() => { + console.log('handleOpenModal') setOpenModal(true) }, []) @@ -257,51 +259,24 @@ export function Form({ organizationId, cancel, currentStep, setStep, draftId }: {draftId && ( - )} {currentStep > 0 && ( - )} - - - + + ) } diff --git a/apps/app/src/dapps/campaign/context.tsx b/apps/app/src/dapps/campaign/context.tsx new file mode 100644 index 00000000..2df019f3 --- /dev/null +++ b/apps/app/src/dapps/campaign/context.tsx @@ -0,0 +1,50 @@ +import { Object, String } from 'lodash' +import { createContext, useContext } from 'react' + +export interface ICampaign { + name: string + description: string + website: string + tags: string[] + + logoImgCid: string + headerImgCid: string + contentCid: string + + authorId: string + collectiveId: string + + contributors: string[] + contributions: object + + currencyId: string + collectedFunds: number + targetfunds: number + + milestones: object +} + +export interface ICampaignContext { + ready: boolean + campaigns: ICampaign[] + + address: string + isAdmin: boolean + isCreator: boolean + isMember: boolean +} + +export const CampaignContext = createContext({ + ready: false, + campaigns: null, + + address: null, + + isAdmin: false, + isCreator: false, + isMember: false, +}) + +export function useDAppContext(): ICampaignContext { + return useContext(CampaignContext) +} diff --git a/apps/app/src/dapps/campaign/views/Campaign.tsx b/apps/app/src/dapps/campaign/views/Campaign.tsx new file mode 100644 index 00000000..7cc18f90 --- /dev/null +++ b/apps/app/src/dapps/campaign/views/Campaign.tsx @@ -0,0 +1 @@ +// show one campaign diff --git a/apps/app/src/dapps/campaign/views/Create.tsx b/apps/app/src/dapps/campaign/views/Create.tsx new file mode 100644 index 00000000..78aae42e --- /dev/null +++ b/apps/app/src/dapps/campaign/views/Create.tsx @@ -0,0 +1,120 @@ +// create a campaign +import React, { Fragment, useEffect, useMemo, useState } from 'react' +import { useRouter } from 'next/router' +import slugify from 'slugify' + +import { useGetOrganizationsForPrimeSubscription } from 'src/queries' +import { useCurrentAccountAddress } from 'hooks/useCurrentAccountAddress' + +import { Stack, Step, StepLabel, Stepper, Divider } from '@mui/material' +import { FormControl, InputLabel, MenuItem, Select, TextField } from '@mui/material' + +import { CreateCampaign } from 'dapps/campaign/components/create' + +const steps = [ + { step: 1, label: 'Description' }, + { step: 2, label: 'Campaign content' }, + { step: 3, label: 'Settings' }, +] + +type TCollective = { + id: string + name: string +} + +type TSelectorProp = { + collectiveId: string + setCollectiveId: (collectiveId) => void + collectives: TCollective[] + setCollectives: (collectives) => void +} + +const CollectiveSelector = ({ collectives, setCollectives, collectiveId, setCollectiveId }: TSelectorProp) => { + // connected wallet address + const address = useCurrentAccountAddress() + // get collectives where address is prime + const { loading, data: primeCollectives } = useGetOrganizationsForPrimeSubscription({ + variables: { id: address }, + }) + + useEffect(() => { + if (loading) return + if (!primeCollectives?.organization.length) return + const collectives = primeCollectives?.organization?.map((o, i) => { + return { name: o.name, id: o.id } + }) + console.log('collectives', collectives) + + setCollectives(collectives) + if (collectives.length === 1) setCollectiveId(collectives[0].id) + }, [primeCollectives?.organization, loading]) + // + // handle input + // + // const updateFormState = (k, v) => { + // const update = { ...formState, [k]: v } + // setFormState(update) + // localStorage.setItem('battlepass', JSON.stringify(update)) + // } + const handleChange = (e) => { + console.log(e.target.name, e.target.value) + // updateFormState(e.target.name, e.target.value) + } + // + // if (loading) return Loading... + + // if (collectives.length === 0) + // return ( + // + //

You do not have any collectives where you are prime.

+ // + // ) + + return ( + + + Select Collective + + + + ) +} + +export function CreateCampaignView() { + // to jump back in to a draft, parse the query + const { query } = useRouter() + const id = query.organizationId || query.collectiveId + + // 1. select organization id from dropdown or + // 2. preselect organization id from url, + // e.g. when creating a campaign from a collective view + + const [collectives, setCollectives] = useState([]) + const [collectiveId, setCollectiveId] = useState(null) + const [draftId, setDraftId] = useState(null) + const [activeStep, setActiveStep] = useState(0) + + const handleCancel = () => {} + + return ( + + + + {steps.map(({ step, label }) => ( + + {label} + + ))} + + + + ) +} + +export default CreateCampaignView diff --git a/apps/app/src/dapps/campaign/index.tsx b/apps/app/src/dapps/campaign/views/Overview.tsx similarity index 92% rename from apps/app/src/dapps/campaign/index.tsx rename to apps/app/src/dapps/campaign/views/Overview.tsx index 99ff4e33..23f262f7 100644 --- a/apps/app/src/dapps/campaign/index.tsx +++ b/apps/app/src/dapps/campaign/views/Overview.tsx @@ -1,3 +1,5 @@ +// browse all campaigns + import React, { Fragment, useEffect, useMemo, useState } from 'react' import { ArrowDownward } from '@mui/icons-material' @@ -106,8 +108,7 @@ export function CampaignDApp() { if (loading) return - if (campaignsCount?.data?.campaign_aggregate?.aggregate.count === 0) - return No Campaigns yet — why not create one! + if (campaignsCount?.data?.campaign_aggregate?.aggregate.count === 0) return No Campaigns yet — why not create one! // {t('page:campaigns:no_campaigns')} - {filters.query && ( - {t('page:campaigns:no_result', { query: filters.query })} - )} + {filters.query && {t('page:campaigns:no_result', { query: filters.query })}} )} @@ -146,11 +145,7 @@ export function CampaignDApp() { }} > {buttonVisibility && ( - )} diff --git a/apps/app/src/dapps/unity/components/Header.tsx b/apps/app/src/dapps/collective/components/Header.tsx similarity index 82% rename from apps/app/src/dapps/unity/components/Header.tsx rename to apps/app/src/dapps/collective/components/Header.tsx index 00ae9db9..4de205a3 100644 --- a/apps/app/src/dapps/unity/components/Header.tsx +++ b/apps/app/src/dapps/collective/components/Header.tsx @@ -20,7 +20,7 @@ import { Image } from 'components/atoms/Image/image' import { Loader } from 'components/atoms/Loader' import { Navigation } from './Navigation' -import { TProps } from '../views/Unity' +import { TProps } from '../views/Collective' export function Header({ args }: TProps) { const { id, organization, openTx, isMember, isPrime } = args @@ -49,7 +49,7 @@ export function Header({ args }: TProps) { const addMemberTx = useAddMemberTransaction(id) const address = useCurrentAccountAddress() - // const cache = useTmpOrganizationState() + const cache = useTmpOrganizationState() // const [showTxModalType, setShowTxModalType] = useState(false) // const handleOpenTxModal = useCallback(() => { @@ -110,6 +110,80 @@ export function Header({ args }: TProps) { console.log('================================\n', parseIpfsHash(organization.header, config.IPFS_GATEWAY)) + const Background = ({ id, name, imageUrl, handleUploadImage }) => { + return ( + + + + {/* */} + + ) + } + return organization ? ( - {/* Logo Id Section */} - handleUploadImage(event, cache.setLogoCID)} + onChange={isPrime ? (event) => handleUploadImage(event, cache.setLogoCID) : null} /> ({ @@ -168,6 +240,7 @@ export function Header({ args }: TProps) { + {/* + */} - {/* background panel */} - - - {/* */} - {/* */} - - - {/* + + - */} + ) : ( diff --git a/apps/app/src/dapps/unity/components/JoinBtn.tsx b/apps/app/src/dapps/collective/components/JoinBtn.tsx similarity index 93% rename from apps/app/src/dapps/unity/components/JoinBtn.tsx rename to apps/app/src/dapps/collective/components/JoinBtn.tsx index 57e7cab8..534a9196 100644 --- a/apps/app/src/dapps/unity/components/JoinBtn.tsx +++ b/apps/app/src/dapps/collective/components/JoinBtn.tsx @@ -15,7 +15,7 @@ import ShareIcon from '@mui/icons-material/Share' const TransactionModal = ({}) => {} -import { TProps } from '../views/Unity' +import { TProps } from '../views/Collective' export const Join = ({ args }: TProps) => { const { id, isMember, isPrime, isOpen } = args @@ -74,12 +74,7 @@ export const Join = ({ args }: TProps) => { )} - + ) } diff --git a/apps/app/src/dapps/unity/components/Navigation.tsx b/apps/app/src/dapps/collective/components/Navigation.tsx similarity index 83% rename from apps/app/src/dapps/unity/components/Navigation.tsx rename to apps/app/src/dapps/collective/components/Navigation.tsx index 0f9aa0f4..6a7c8d7b 100644 --- a/apps/app/src/dapps/unity/components/Navigation.tsx +++ b/apps/app/src/dapps/collective/components/Navigation.tsx @@ -2,7 +2,7 @@ import { useState, useEffect, useMemo, useCallback, ChangeEvent } from 'react' import { useRouter } from 'next/router' import { useTranslation } from 'react-i18next' -import { UnityView } from 'src/constants/unity' +import { CollectiveView } from 'constants/collective' import { Organization, useOrganizationByIdSubscription } from 'src/queries' import { useCurrentAccountAddress } from 'src/hooks/useCurrentAccountAddress' import { useAddMemberTransaction } from 'hooks/tx/useAddMemberTransaction' @@ -11,14 +11,16 @@ import { useTheme } from '@mui/material/styles' import { Box, Tab, Tabs, Button, Stack, useMediaQuery } from '@mui/material' import { Loader } from 'components/atoms/Loader' -// import { Join } from './JoinBtn' +import { config } from '../config' -import { TProps } from '../views/Unity' +import { Join } from './JoinBtn' + +import { TProps } from '../views/Collective' interface ITabs { label: string - value?: UnityView - disabled?: boolean + value?: CollectiveView + enabled?: boolean } const initialRole = { @@ -30,7 +32,7 @@ const initialRole = { export function Navigation({ args }: TProps) { const { id, view, isMember, isPrime } = args - // console.log('args',args) + console.log('args', args) const { t } = useTranslation() const { push } = useRouter() @@ -69,32 +71,46 @@ export function Navigation({ args }: TProps) { true ? { label: 'Dashboard', - value: UnityView.DASHBOARD, - disabled: !true, - } + value: CollectiveView.DASHBOARD, + disabled: false, + } : null, true ? { label: 'Governance', - value: UnityView.GOVERNANCE, - disabled: !true, - } + value: CollectiveView.GOVERNANCE, + disabled: false, + } + : null, + true + ? { + label: 'Fundraising', + value: CollectiveView.CAMPAIGNS, + disabled: true, + } : null, true ? { label: 'Members', - value: UnityView.MEMBERS, + value: CollectiveView.MEMBERS, + disabled: !isMember, + } + : null, + true + ? { + label: 'Settings', + value: CollectiveView.SETTINGS, disabled: !isMember, - } + } : null, ].filter((item) => item !== null), [isMember, isPrime], ) const handleTabChange = useCallback( - (event: ChangeEvent<{}>, view: UnityView): void => { + (event: ChangeEvent<{}>, view: CollectiveView): void => { console.log('tab change', view) - push(`/unity/${id}/${view}`) + push(`/collectives/${id}/${view}`) }, [id, push], ) diff --git a/apps/app/src/dapps/unity/components/cardGrid/CardGrid.tsx b/apps/app/src/dapps/collective/components/cardGrid/CardGrid.tsx similarity index 78% rename from apps/app/src/dapps/unity/components/cardGrid/CardGrid.tsx rename to apps/app/src/dapps/collective/components/cardGrid/CardGrid.tsx index ef103af5..aecd0e7d 100644 --- a/apps/app/src/dapps/unity/components/cardGrid/CardGrid.tsx +++ b/apps/app/src/dapps/collective/components/cardGrid/CardGrid.tsx @@ -3,8 +3,8 @@ import React, { Fragment } from 'react' import { Grid } from '@mui/material' import { Organization } from 'src/queries' -import { Loading } from 'dapps/unity/components/cardGrid/components/Loading' -import { Card } from 'dapps/unity/components/cardGrid/components/Card' +import { Loading } from 'dapps/collective/components/cardGrid/components/Loading' +import { Card } from 'dapps/collective/components/cardGrid/components/Card' interface ComponentProps { items: Organization[] diff --git a/apps/app/src/dapps/unity/components/cardGrid/components/Card.tsx b/apps/app/src/dapps/collective/components/cardGrid/components/Card.tsx similarity index 92% rename from apps/app/src/dapps/unity/components/cardGrid/components/Card.tsx rename to apps/app/src/dapps/collective/components/cardGrid/components/Card.tsx index 9b98d1ae..699e8f0a 100644 --- a/apps/app/src/dapps/unity/components/cardGrid/components/Card.tsx +++ b/apps/app/src/dapps/collective/components/cardGrid/components/Card.tsx @@ -39,9 +39,7 @@ export const Card = ({ item }: ComponentPros) => { }} > - {`${item?.organization_members?.length} ${t( - `label:${item?.organization_members?.length > 1 ? 'members' : 'member'}`, - )} `} + {`${item?.organization_members?.length} ${t(`label:${item?.organization_members?.length > 1 ? 'members' : 'member'}`)} `} { } return ( - + { {subheader} - + JSON.parse(payload) const urlRegex = /^((ftp|http|https):\/\/)?(www.)?(?!.*(ftp|http|https|www.))[a-zA-Z0-9_-]+(\.[a-zA-Z]+)+((\/)[\w#]+)*(\/\w+\?[a-zA-Z0-9_]+=\w+(&[a-zA-Z0-9_]+=\w+)*)?$/gm -export function Name({ - name, - setName, - description, - setDescription, - url, - setUrl, - location, - setLocation, - tags, - setTags, -}: ComponentProps) { +export function Name({ name, setName, description, setDescription, url, setUrl, location, setLocation, tags, setTags }: ComponentProps) { const [_tags, _setTags] = useState(tags) const [errorState, setErrorState] = useState() @@ -179,17 +168,8 @@ export function Name({ // console.log(url, setUrl) return ( - - + +
- - + + - ) + return } return !loading && (paginatedData?.length || draftsState.length) ? ( - + ) : ( ) diff --git a/apps/app/src/dapps/unity/components/tabs/campaigns/create.tsx b/apps/app/src/dapps/collective/components/tabs/campaigns/create.tsx similarity index 78% rename from apps/app/src/dapps/unity/components/tabs/campaigns/create.tsx rename to apps/app/src/dapps/collective/components/tabs/campaigns/create.tsx index e214787f..41766f24 100644 --- a/apps/app/src/dapps/unity/components/tabs/campaigns/create.tsx +++ b/apps/app/src/dapps/collective/components/tabs/campaigns/create.tsx @@ -2,7 +2,7 @@ import React, { useState } from 'react' import { Stack, Step, StepLabel, Stepper } from '@mui/material' -import { Form } from 'components/organisms/forms/Campaign/form' +// import { Form } from 'dapps/campaign/components/create' interface ComponentProps { organizationId: string @@ -37,13 +37,7 @@ export function CreateCampaignPage({ organizationId, cancel, draftId }: Componen ))} - + {/* */} ) } diff --git a/apps/app/src/dapps/unity/components/tabs/governance/create.tsx b/apps/app/src/dapps/collective/components/tabs/governance/create.tsx similarity index 100% rename from apps/app/src/dapps/unity/components/tabs/governance/create.tsx rename to apps/app/src/dapps/collective/components/tabs/governance/create.tsx diff --git a/apps/app/src/dapps/unity/components/tabs/governance/governanceView.tsx b/apps/app/src/dapps/collective/components/tabs/governance/overview.tsx similarity index 98% rename from apps/app/src/dapps/unity/components/tabs/governance/governanceView.tsx rename to apps/app/src/dapps/collective/components/tabs/governance/overview.tsx index 46410f2a..4548c1f4 100644 --- a/apps/app/src/dapps/unity/components/tabs/governance/governanceView.tsx +++ b/apps/app/src/dapps/collective/components/tabs/governance/overview.tsx @@ -14,7 +14,7 @@ import { Proposal, useProposalsByOrganizationIdSubscription } from 'src/queries' import { getTimeFromBlock } from 'src/utils/campaignUtils' import { ProposalStatusChip } from 'components/molecules/ProposalStatusChip' -import { CreateProposal } from 'dapps/unity/components/tabs/governance/create' +import { CreateProposal } from 'dapps/collective/components/tabs/governance/create' interface ComponentProps { organizationId: string diff --git a/apps/app/src/dapps/unity/components/tabs/governance/proposalView.tsx b/apps/app/src/dapps/collective/components/tabs/governance/proposal.tsx similarity index 99% rename from apps/app/src/dapps/unity/components/tabs/governance/proposalView.tsx rename to apps/app/src/dapps/collective/components/tabs/governance/proposal.tsx index 99982cfb..8982f59b 100644 --- a/apps/app/src/dapps/unity/components/tabs/governance/proposalView.tsx +++ b/apps/app/src/dapps/collective/components/tabs/governance/proposal.tsx @@ -282,9 +282,7 @@ export function ProposalView({ proposalId, isMember, goBack }: ComponentProps) { {/* TODO: get ws url for connected network */} diff --git a/apps/app/src/dapps/unity/components/tabs/members/membersView.tsx b/apps/app/src/dapps/collective/components/tabs/members/membersView.tsx similarity index 99% rename from apps/app/src/dapps/unity/components/tabs/members/membersView.tsx rename to apps/app/src/dapps/collective/components/tabs/members/membersView.tsx index a2af18e6..2a7b7bf9 100644 --- a/apps/app/src/dapps/unity/components/tabs/members/membersView.tsx +++ b/apps/app/src/dapps/collective/components/tabs/members/membersView.tsx @@ -192,8 +192,8 @@ export function MembersView({ organizationState }: ComponentProps) { ? prime === member.address ? 3 : member?.identity?.email || member?.identity?.display_name - ? 2 - : 1 + ? 2 + : 1 : 0, state: member.state, } diff --git a/apps/app/src/dapps/unity/components/tabs/organization/components/areaChartContainer.tsx b/apps/app/src/dapps/collective/components/tabs/organization/components/areaChartContainer.tsx similarity index 100% rename from apps/app/src/dapps/unity/components/tabs/organization/components/areaChartContainer.tsx rename to apps/app/src/dapps/collective/components/tabs/organization/components/areaChartContainer.tsx diff --git a/apps/app/src/dapps/unity/components/tabs/organization/components/radialChartContainer.tsx b/apps/app/src/dapps/collective/components/tabs/organization/components/radialChartContainer.tsx similarity index 100% rename from apps/app/src/dapps/unity/components/tabs/organization/components/radialChartContainer.tsx rename to apps/app/src/dapps/collective/components/tabs/organization/components/radialChartContainer.tsx diff --git a/apps/app/src/dapps/unity/components/tabs/organization/components/treasuryChart.tsx b/apps/app/src/dapps/collective/components/tabs/organization/components/treasuryChart.tsx similarity index 97% rename from apps/app/src/dapps/unity/components/tabs/organization/components/treasuryChart.tsx rename to apps/app/src/dapps/collective/components/tabs/organization/components/treasuryChart.tsx index 8fba0fb2..db807e1b 100644 --- a/apps/app/src/dapps/unity/components/tabs/organization/components/treasuryChart.tsx +++ b/apps/app/src/dapps/collective/components/tabs/organization/components/treasuryChart.tsx @@ -19,7 +19,7 @@ export function TreasuryChart({ address, symbol = 'ZERO' }: IBalancesChart) { const { t } = useTranslation() const systemProperties = useSystemProperties() - const tokenDecimals = systemProperties.tokenDecimals?.[systemProperties.networkCurrency] + const tokenDecimals = systemProperties?.tokenDecimals?.[systemProperties.networkCurrency] // const address = useCurrentAccountAddress() const { loading, data } = useHistoricalBalanceSubscription({ diff --git a/apps/app/src/dapps/collective/components/tabs/organization/dashboardView.tsx b/apps/app/src/dapps/collective/components/tabs/organization/dashboardView.tsx new file mode 100644 index 00000000..aa0c499b --- /dev/null +++ b/apps/app/src/dapps/collective/components/tabs/organization/dashboardView.tsx @@ -0,0 +1,425 @@ +import React, { Fragment, useCallback, useEffect, useMemo, useState } from 'react' +import { useTranslation } from 'react-i18next' +import { useRouter } from 'next/router' + +import { TransactionData } from 'src/@types/transactionData' +import { Organization } from 'src/queries' +import { getCampaignStatusPercentage } from 'src/utils/campaignUtils' +import { getProposalTypesCount } from 'src/utils/proposalUtils' +import { useRemoveMemberTransaction } from 'hooks/tx/useRemoveMemberTransaction' + +import { useTheme } from '@mui/material/styles' +import { ChevronRight, Verified } from '@mui/icons-material' +import { FmdGood, InsertLink, Label, VpnKey } from '@mui/icons-material/' +import { Box, Chip, Button, Divider, Paper, Stack, Typography } from '@mui/material' + +import { DonutChart } from 'components/molecules/charts/DonutChart' +import { AreaChartContainer } from './components/areaChartContainer' +import { RadialChartContainer } from './components/radialChartContainer' +import { TreasuryChart } from './components/treasuryChart' + +import { TransactionDialog } from 'components/molecules/TransactionDialog/transactionDialog' + +type TArgs = { + organization: Organization + organizationId: string + isMember: boolean + isAdmin: boolean + handleOpenTxModal: () => void + handleCloseTxModal: () => void + showTxModalType: boolean + addMemberTx: TransactionData + id?: string +} +type TProps = { + args: TArgs +} + +export function DashboardView(args: TArgs) { + const { organization, id, isMember, isAdmin, handleOpenTxModal, handleCloseTxModal, showTxModalType, addMemberTx } = + args + + const theme = useTheme() + const { t } = useTranslation() + const { push } = useRouter() + + const removeMemberTx = useRemoveMemberTransaction(id) + + const series1 = [ + { + name: 'Members', + data: [0, 7, 3, 8, 2], + }, + ] + const categories = [ + '2022-07-19T00:00:00.000Z', + '2022-07-20T01:30:00.000Z', + '2022-07-21T02:30:00.000Z', + '2022-07-22T03:30:00.000Z', + '2022-07-23T04:30:00.000Z', + ] + const series2 = [ + { + name: 'Balance', + data: [0, 10, 20, 13, 5], + }, + ] + const [isReadMore, setIsReadMore] = useState(true) + const [showButton, setShowButton] = useState(false) + + const handleChangeRoute = useCallback( + (newPath) => { + if (id) { + push(`${id}/${newPath}`) + } else { + push(newPath) + } + }, + [id, push], + ) + + const toggleReadMore = useCallback(() => { + setIsReadMore((prev) => !prev) + }, [setIsReadMore]) + + const description = useMemo( + () => (isReadMore ? organization?.description?.slice(0, 150) : organization?.description), + [isReadMore, organization?.description], + ) + + const accessModel = useMemo( + () => + organization?.access_model === 'Open' + ? { + title: t('page:organizations:organization_rules:open:title'), + text: t('page:organizations:organization_rules:open:text'), + status: t('page:organizations:organization_rules:open:status'), + } + : { + title: t('page:organizations:organization_rules:private:title'), + text: t('page:organizations:organization_rules:private:text'), + status: t('page:organizations:organization_rules:private:status'), + }, + [organization?.access_model], + ) + + const feeModel = useMemo(() => { + if (organization?.fee_model === 'NoFees') { + return { + title: t('page:organizations:organization_rules:no_fee:title'), + text: t('page:organizations:organization_rules:no_fee:text'), + } + } else if (organization?.fee_model === 'Reserve') { + return { + title: t('page:organizations:organization_rules:reserved_fee:title'), + text: t('page:organizations:organization_rules:reserved_fee:text'), + } + } else if (organization?.fee_model === 'Transfer') { + return { + title: t('page:organizations:organization_rules:transferred_fee:title'), + text: t('page:organizations:organization_rules:transferred_fee:text'), + } + } + }, [organization?.fee_model]) + + const memberLimit = useMemo( + () => + organization?.member_limit === 0 + ? { + title: t('page:organizations:organization_rules:no_memberLimit:title'), + text: t('page:organizations:organization_rules:no_memberLimit:text'), + } + : { + title: t('page:organizations:organization_rules:memberLimit:title'), + text: ` ${t('page:organizations:organization_rules:memberLimit:only')} ${organization?.member_limit} ${t( + 'page:organizations:organization_rules:memberLimit:text', + )}`, + }, + [organization?.member_limit], + ) + + const statesPercentages = useMemo( + () => + getCampaignStatusPercentage( + organization?.campaigns_aggregate?.aggregate?.count, + organization?.campaigns_aggregate?.nodes, + ), + [organization?.campaigns_aggregate?.aggregate?.count, organization?.campaigns_aggregate?.nodes], + ) + + const proposalTypesCount = useMemo( + () => getProposalTypesCount(organization?.proposals_aggregate?.nodes), + [organization?.proposals_aggregate?.nodes], + ) + + useEffect(() => { + organization?.description?.length > 250 ? setShowButton(true) : setShowButton(false) + }, [organization?.description?.length]) + + const [orgData, setOrgData] = useState({ + location: '', + url: '', + tags: [], + }) + + useEffect(() => { + if (!organization) return + setOrgData({ + ...orgData, + location: organization?.location, + url: organization?.url, + tags: organization?.tags, + }) + }, [organization]) + + return ( + + + {false && ( + + + + {t('page:organizations:about')} + + + + {description} + {showButton && ( + + {isReadMore ? ' More...' : ' Less...'} + + )} + + + + {orgData.tags.length > 0 && ( + + + )} + + {organization?.location && ( + + {orgData.location} + + )} + {accessModel.status && ( + + {accessModel.status} + + )} + {organization?.url && ( + + {orgData.url} + + )} + + + + {!isMember && ( + <> + + + )} + + + + )} + + {false && ( + + + {t('page:organizations:organizations_rules')} + + + {organization?.fee_model && ( + + + + {feeModel.title} + {feeModel.text} + + + )} + + {organization?.access_model && ( + + + + {accessModel.title} + {accessModel.text} + + + )} + + {(organization?.member_limit || organization?.member_limit === 0) && ( + + + + {memberLimit.title} + {memberLimit.text} + + + )} + + + + )} + + + {true && ( + + + + {t('label:members')} + + + + + + + + {t('label:treasury')} + + + + + + )} + + {false && ( + + + + + + )} + + {false && ( + + + + {t('label:campaigns')} + + + + } + > + + + + + + + + + Governance + + + + + + + + + + )} + + + + ) +} diff --git a/apps/app/src/dapps/unity/components/tabs/settings/components/about.tsx b/apps/app/src/dapps/collective/components/tabs/settings/components/about.tsx similarity index 100% rename from apps/app/src/dapps/unity/components/tabs/settings/components/about.tsx rename to apps/app/src/dapps/collective/components/tabs/settings/components/about.tsx diff --git a/apps/app/src/dapps/unity/components/tabs/settings/components/accessType.tsx b/apps/app/src/dapps/collective/components/tabs/settings/components/accessType.tsx similarity index 100% rename from apps/app/src/dapps/unity/components/tabs/settings/components/accessType.tsx rename to apps/app/src/dapps/collective/components/tabs/settings/components/accessType.tsx diff --git a/apps/app/src/dapps/unity/components/tabs/settings/components/control.tsx b/apps/app/src/dapps/collective/components/tabs/settings/components/control.tsx similarity index 100% rename from apps/app/src/dapps/unity/components/tabs/settings/components/control.tsx rename to apps/app/src/dapps/collective/components/tabs/settings/components/control.tsx diff --git a/apps/app/src/dapps/unity/components/tabs/settings/components/memberLimit.tsx b/apps/app/src/dapps/collective/components/tabs/settings/components/memberLimit.tsx similarity index 100% rename from apps/app/src/dapps/unity/components/tabs/settings/components/memberLimit.tsx rename to apps/app/src/dapps/collective/components/tabs/settings/components/memberLimit.tsx diff --git a/apps/app/src/dapps/unity/components/tabs/settings/components/memberType.tsx b/apps/app/src/dapps/collective/components/tabs/settings/components/memberType.tsx similarity index 100% rename from apps/app/src/dapps/unity/components/tabs/settings/components/memberType.tsx rename to apps/app/src/dapps/collective/components/tabs/settings/components/memberType.tsx diff --git a/apps/app/src/dapps/unity/components/tabs/settings/settingsView.tsx b/apps/app/src/dapps/collective/components/tabs/settings/settingsView.tsx similarity index 92% rename from apps/app/src/dapps/unity/components/tabs/settings/settingsView.tsx rename to apps/app/src/dapps/collective/components/tabs/settings/settingsView.tsx index 64d28442..4ef001a5 100644 --- a/apps/app/src/dapps/unity/components/tabs/settings/settingsView.tsx +++ b/apps/app/src/dapps/collective/components/tabs/settings/settingsView.tsx @@ -12,14 +12,16 @@ import { MemberType } from './components/memberType' interface ComponentProps { organizationState: Organization } +import { TProps } from '../../../views/Collective' -export function SettingsView({ organizationState }: ComponentProps) { +export function SettingsView({ args }: TProps) { + const { id } = args return ( diff --git a/apps/app/src/dapps/unity/components/tabs/treasury/components/mock-data.tsx b/apps/app/src/dapps/collective/components/tabs/treasury/components/mock-data.tsx similarity index 100% rename from apps/app/src/dapps/unity/components/tabs/treasury/components/mock-data.tsx rename to apps/app/src/dapps/collective/components/tabs/treasury/components/mock-data.tsx diff --git a/apps/app/src/dapps/unity/components/tabs/treasury/components/transactions.tsx b/apps/app/src/dapps/collective/components/tabs/treasury/components/transactions.tsx similarity index 100% rename from apps/app/src/dapps/unity/components/tabs/treasury/components/transactions.tsx rename to apps/app/src/dapps/collective/components/tabs/treasury/components/transactions.tsx diff --git a/apps/app/src/dapps/unity/components/tabs/treasury/treasuryView.tsx b/apps/app/src/dapps/collective/components/tabs/treasury/treasuryView.tsx similarity index 100% rename from apps/app/src/dapps/unity/components/tabs/treasury/treasuryView.tsx rename to apps/app/src/dapps/collective/components/tabs/treasury/treasuryView.tsx diff --git a/apps/app/src/dapps/collective/config.ts b/apps/app/src/dapps/collective/config.ts new file mode 100644 index 00000000..f0679810 --- /dev/null +++ b/apps/app/src/dapps/collective/config.ts @@ -0,0 +1,28 @@ +export const config = { + modules: [ + { id: 0, enabled: true, component: 'Dashboard', name: 'Dashboard', url: '/dashboard', icon: 'fa-dashboard' }, + { id: 1, enabled: true, component: 'Members', name: 'Members', url: '/members', icon: 'fa-users' }, + { id: 2, enabled: true, component: 'Projects', name: 'Projects', url: '/projects', icon: 'fa-briefcase' }, + { id: 3, enabled: true, component: 'Campaigns', name: 'Campaigns', url: '/campaigns', icon: 'fa-briefcase' }, + { + id: 4, + enabled: true, + component: 'Contributors', + name: 'Contributors', + url: '/contributors', + icon: 'fa-users', + }, + { + id: 5, + enabled: true, + component: 'Organizations', + name: 'Organizations', + url: '/collectives', + icon: 'fa-briefcase', + }, + { id: 6, enabled: true, component: 'Proposals', name: 'Proposals', url: '/proposals', icon: 'fa-briefcase' }, + { id: 7, enabled: true, component: 'Votes', name: 'Votes', url: '/votes', icon: 'fa-briefcase' }, + { id: 8, enabled: true, component: 'Identity', name: 'Identity', url: '/identity', icon: 'fa-briefcase' }, + { id: 9, enabled: true, component: 'Tokens', name: 'Tokens', url: '/tokens', icon: 'fa-briefcase' }, + ], +} diff --git a/apps/app/src/dapps/collective/context.ts b/apps/app/src/dapps/collective/context.ts new file mode 100644 index 00000000..feade31f --- /dev/null +++ b/apps/app/src/dapps/collective/context.ts @@ -0,0 +1,66 @@ +import { createContext, useContext, useEffect, useState, useCallback } from 'react' + +export interface IContext { + ready: boolean + id: string + proposalId: string + draftMode: boolean + + name: string + description: string + website: string + tags: string[] + img_logo: string + img_header: string + + members: string[] + + address: string + isAdmin: boolean + isCreator: boolean + isMember: boolean + + updateContext: (context: Partial) => void +} + +const initialState: IContext = { + ready: false, + id: null, + proposalId: null, + draftMode: false, + + name: null, + description: null, + website: null, + tags: null, + img_logo: null, + img_header: null, + + members: null, + + address: null, + isAdmin: false, + isCreator: false, + isMember: false, + + updateContext: () => {}, +} + +export const AppContext = () => { + return createContext(initialState) +} + +export const useDAppContext = (context) => useContext(context) + +export const AppProvider = ({ children }) => { + const [context, setContext] = useState(initialState) + + return null + // ( + // + // {children} + // + // ) +} diff --git a/apps/app/src/dapps/unity/views/Unity.tsx b/apps/app/src/dapps/collective/views/Collective.tsx similarity index 63% rename from apps/app/src/dapps/unity/views/Unity.tsx rename to apps/app/src/dapps/collective/views/Collective.tsx index 09006cd5..21c208ba 100644 --- a/apps/app/src/dapps/unity/views/Unity.tsx +++ b/apps/app/src/dapps/collective/views/Collective.tsx @@ -3,7 +3,7 @@ import dynamic from 'next/dynamic' import { parseIpfsHash, uploadFileToIpfs } from 'src/utils/ipfs' -import { UnityView } from 'src/constants/unity' +import { CollectiveView } from 'constants/collective' import { Organization, useOrganizationByIdSubscription } from 'src/queries' // import { useTmpOrganizationState } from 'src/hooks/useTmpOrganizationState' @@ -15,10 +15,8 @@ import { Header } from '../components/Header' const DashboardView = dynamic(() => import('../components/tabs/organization/dashboardView').then((mod) => mod.DashboardView), ) -const GovernanceView = dynamic(() => - import('../components/tabs/governance/governanceView').then((mod) => mod.GovernanceView), -) -const ProposalView = dynamic(() => import('../components/tabs/governance/proposalView').then((mod) => mod.ProposalView)) +const GovernanceView = dynamic(() => import('../components/tabs/governance/overview').then((mod) => mod.GovernanceView)) +const ProposalView = dynamic(() => import('../components/tabs/governance/proposal').then((mod) => mod.ProposalView)) const CampaignsView = dynamic(() => import('../components/tabs/campaigns/campaignsView').then((mod) => mod.CampaignsView), ) @@ -28,10 +26,12 @@ const SettingsView = dynamic(() => import('../components/tabs/settings/settingsV export type TArgs = { id: string - view?: UnityView + view?: CollectiveView isCreator?: boolean isMember?: boolean isPrime?: boolean + isOpen?: boolean + isAdmin?: boolean treasury?: string organization?: Organization loading?: boolean @@ -43,7 +43,7 @@ export type TProps = { } export const Unity = ({ args }: TProps) => { - const { view } = args + const { view, organization, id, isAdmin } = args return ( @@ -56,19 +56,36 @@ export const Unity = ({ args }: TProps) => { >
+ - - - {/* - - - - - - - */} + + + + + + + + {/* + */} + + + + + + + + + + + + + + + + {/* + */} diff --git a/apps/app/src/dapps/unity/views/Create.tsx b/apps/app/src/dapps/collective/views/Create.tsx similarity index 72% rename from apps/app/src/dapps/unity/views/Create.tsx rename to apps/app/src/dapps/collective/views/Create.tsx index 15af63e9..879ed0a6 100644 --- a/apps/app/src/dapps/unity/views/Create.tsx +++ b/apps/app/src/dapps/collective/views/Create.tsx @@ -1,22 +1,52 @@ -import { useCallback } from 'react' +import { Fragment, useCallback, useState } from 'react' import { useRouter } from 'next/router' -import { Button, Stack } from '@mui/material' +import { Button, Stack, Paper } from '@mui/material' import { useTmpOrganizationState } from 'src/hooks/useTmpOrganizationState' import { useTranslation } from 'react-i18next' import { createInfoNotification } from 'src/utils/notification' -import { Controller } from '../components/create/controller' -import { Name, validationSchema as nameValidationSchema } from '../components/create/name' -import { Settings } from '../components/create/settings' +import { Controller } from '../components/create/Controller' +import { Name, validationSchema as nameValidationSchema } from '../components/create/Name' +import { Settings } from '../components/create/Settings' + +import { Step, StepLabel, Stepper } from '@mui/material' + +const ProgressBar = ({ activeStep, setActiveStep }) => { + return ( + + {steps.map(({ step, label }) => ( + setActiveStep(step)}> + {label} + + ))} + + ) +} interface ComponentProps { currentStep: number setStep: (step) => void } -export function Form({ currentStep, setStep }: ComponentProps) { +const steps = [ + { + step: 1, + label: 'Description', + }, + { + step: 2, + label: 'Content', + }, + { + step: 3, + label: 'Settings', + }, +] + +export function CreateCollective({ currentStep, setStep }: ComponentProps) { + const [activeStep, setActiveStep] = useState(0) const { push } = useRouter() const { t } = useTranslation() @@ -24,7 +54,7 @@ export function Form({ currentStep, setStep }: ComponentProps) { const handleCancel = useCallback(() => { if (currentStep === 0) { - push('/unity') + push('/collectives') } }, [currentStep]) @@ -40,8 +70,8 @@ export function Form({ currentStep, setStep }: ComponentProps) { } if (currentStep == 2) { - createInfoNotification('The community was saved') - push('/unity/finalize') + createInfoNotification('Your Collective was saved') + push('/collectives/finalize') } }, [currentStep, setStep, push]) @@ -65,7 +95,9 @@ export function Form({ currentStep, setStep }: ComponentProps) { } return ( - <> + + + {currentStep === 0 && ( - - + ) } diff --git a/apps/app/src/dapps/unity/components/tabs/organization/finalizeView.tsx b/apps/app/src/dapps/collective/views/Finalize.tsx similarity index 89% rename from apps/app/src/dapps/unity/components/tabs/organization/finalizeView.tsx rename to apps/app/src/dapps/collective/views/Finalize.tsx index 41a4d723..0bcedff0 100644 --- a/apps/app/src/dapps/unity/components/tabs/organization/finalizeView.tsx +++ b/apps/app/src/dapps/collective/views/Finalize.tsx @@ -27,7 +27,10 @@ export function FinalizeView() { const [orgId, setOrgId] = useState(null) const { data: organizationByIdData, loading } = useOrganizationByIdSubscription({ variables: { orgId } }) + const [createEnabled, setCreateEnabled] = useState(true) + const handleModalOpen = useCallback(() => { + setCreateEnabled(false) setModalState(true) }, [setModalState]) @@ -47,37 +50,38 @@ export function FinalizeView() { const handleTxCallback = useCallback( (state: boolean, result: ISubmittableResult) => { if (state) { - // tmpOrgState?.clearAll() + tmpOrgState?.clearAll() // The transaction was successful, clear state result.events.forEach(({ event: { data, method, section } }) => { if (section === 'control' && method === 'OrgCreated') { console.log('org data', data) - console.log('org created with id', data?.[1]?.toHex()) - setOrgId(data?.[1]?.toHex()) + const id = data?.[1]?.toHex() + console.log('org created with id', id) + setOrgId(id) + // push('/collectives/' + id + '/dashboard') } }) - - // push('/unity/') } }, [tmpOrgState.clearAll], ) // redirect. - // useEffect(() => { - // if (orgId && organizationByIdData && !loading) { - // push(`/unity/${organizationByIdData?.organization?.[0]?.id}/dashboard`) - // } - // }, [orgId, organizationByIdData]) + useEffect(() => { + console.log('redirecting to org dashboard', orgId) + if (orgId && organizationByIdData && !loading) { + push(`/unity/${organizationByIdData?.organization?.[0]?.id}/dashboard`) + } + }, [orgId, organizationByIdData]) return ( <> - + {/* {t('label:complete_your_organization')} {t('label:tmp_organization_description')} @@ -153,8 +157,8 @@ export function FinalizeView() { - - + */} + {/* - + */} - + {/* */} {/*{t('label:deploy_organization_min_deposit', { value: 5 })}*/} - To deploy the organization a minimum collateral of 100 GAME is required. Higher deposits + To launch your collective a minimum collateral of 100 GAME is required. Higher deposits lead in higher trust levels.{' '} Launch diff --git a/apps/app/src/dapps/unity/views/Overview.tsx b/apps/app/src/dapps/collective/views/Overview.tsx similarity index 92% rename from apps/app/src/dapps/unity/views/Overview.tsx rename to apps/app/src/dapps/collective/views/Overview.tsx index 22e59a14..f7096f7c 100644 --- a/apps/app/src/dapps/unity/views/Overview.tsx +++ b/apps/app/src/dapps/collective/views/Overview.tsx @@ -23,7 +23,7 @@ import { Add, ArrowDownward } from '@mui/icons-material' import { Box, Button, Container, Grid, Typography } from '@mui/material' // import { FiltersSection } from 'src/components/FiltersSections/filtersSection' -import { CardGrid } from 'dapps/unity/components/cardGrid/CardGrid' +import { CardGrid } from 'dapps/collective/components/cardGrid/CardGrid' // import { OrganizationFiltersListTab } from 'src/components/OrganizationCard/components/listTab' // const applyPagination = (data: Organization[], rowsPerPage: number): Organization[] => @@ -57,7 +57,7 @@ export const Overview = () => { const [qtyIndex, setQtyIndex] = useState(3) const [itemCounter, setItemCounter] = useState(0) - const [itemContent, setItemContent] = useState() + const [itemContent, setItemContent] = useState(null) // total count of communities // const total = useTotalSubscription() @@ -122,7 +122,7 @@ export const Overview = () => { if (w3Enabled === false) { connectWallet() } else if (address) { - push('/unity/create') + push('/collectives/create') } }, [w3Enabled, connectWallet, address, push]) @@ -184,22 +184,23 @@ export const Overview = () => { - {itemCounter > 0 ? ( - - {/* */} + + {itemCounter > 0 ? ( + + {/* */} - {/* {filteredItems?.length === 0 && !loading && ( + {/* {filteredItems?.length === 0 && !loading && ( {t('page:organizations:no_organizations')} {t('page:organizations:no_result', { query: filters?.query })} )} */} - - - + + + - {/* + {/* { */} - - ) : ( - <>No community yet — why not create one? - )} + + ) : ( + No community yet — go create one! + )} + ) } diff --git a/apps/app/src/dapps/landingpage/components/Intro.tsx b/apps/app/src/dapps/landingpage/components/Intro.tsx index 1931c044..4dba206b 100644 --- a/apps/app/src/dapps/landingpage/components/Intro.tsx +++ b/apps/app/src/dapps/landingpage/components/Intro.tsx @@ -9,7 +9,7 @@ export const Intro = () => ( {intro.map((item, i) => { return ( - + {' '} {item.header}{' '} diff --git a/apps/app/src/dapps/landingpage/content.ts b/apps/app/src/dapps/landingpage/content.ts index 60d3d874..a459909f 100644 --- a/apps/app/src/dapps/landingpage/content.ts +++ b/apps/app/src/dapps/landingpage/content.ts @@ -42,18 +42,23 @@ export const partners = [ // ['XP Fantasy', 'Esports Oracles', '/img/xpfantasy.png', 'https://'], ] -export const backers1 = [['Scytale Digital', 'Horizon II', '/img/scytale.png', 'https://scytale.digital']] +export const backers1 = [ + ['Scytale Digital', '', '/img/scytale.png', 'https://scytale.digital'], + ['Valhalla Capital', '', '/img/valhalla.png', 'https://valhalla.capital'], + ['Primal Capital', '', '/img/primal.png', 'https://primalcapital.io'], +] export const backers2 = [ - ['1PAR Research', '', '/img/1par.png', 'https://1par.com'], ['Automata Network', '', '/img/automata.png', 'https://ata.network'], - ['Outlier Ventures', '', '/img/ov.png', 'https://outlierventures.io'], - ['Primal', '', '/img/primal.png', 'https://primalcapital.io'], - // ['Scytale Ventures', 'Horizon II', '/img/scytale.png', 'https://scytale.digital'], + ['Yaoqi Jia', '', '/img/yaoqi.png', 'https://jiayaoqi.com'], + ['1PAR Research', '', '/img/1par.png', 'https://1par.com'], ['Tek Forest', '', '/img/tekforest.png', 'https://tekforest.io'], - ['Valhalla Capital', '', '/img/valhalla.png', 'https://valhalla.capital'], ['Vyoma Partners', '', '/img/vyoma.png', 'https://vyoma.ch'], - ['Yaoqi Jia', '', '/img/yaoqi.png', 'https://jiayaoqi.com'], +] + +export const peers = [ + ['Outlier Ventures', 'Polkadot Base Camp I', '/img/ov.png', 'https://outlierventures.io'], + ['Substrate Builders Program', 'Chain Track', '/img/sbp.png', 'https://substrate.io'], ] // @@ -156,12 +161,9 @@ export const hero = [ // Empowering creators to // build better games through // democratization and community ownership. - sub: `Enhance your gaming experience with GameDAO`, + sub: `Better games with GameDAO`, description: ` - The ultimate platform for community-driven - fan engagement, governance, fundraising, and collectibles. - Connect with other gamers, creators, and investors - to build better games together. + `, image: '/art/IP39-DeepMarket.jpg', links: [ @@ -193,7 +195,7 @@ export const hero = [ export const hero2 = [ { - title: 'Build your own DAO', + title: 'Build and run your own collective', // sub: `What you need to know`, description: `Get started with the powerful framework for the gaming space.`, links: [ @@ -202,7 +204,7 @@ export const hero2 = [ bg: '#609', }, { - title: `Fundraising for Creators`, + title: `Fundraise, build and launch your game`, // sub: `Fundraising and go to market for your game project on GameDAO`, description: `Raising funds and awareness has never been easy. GameDAO navigates you through the process of lifting off.`, links: [ diff --git a/apps/app/src/dapps/landingpage/index.tsx b/apps/app/src/dapps/landingpage/index.tsx index 7068664c..a9e1ee25 100644 --- a/apps/app/src/dapps/landingpage/index.tsx +++ b/apps/app/src/dapps/landingpage/index.tsx @@ -1,11 +1,27 @@ -import React, { useCallback, Fragment } from 'react' +import React, { useCallback, Fragment, useEffect, useMemo, useState } from 'react' +import Link from 'next/link' + +import { parseIpfsHash } from 'src/utils/ipfs' +import { useConfig } from 'src/hooks/useConfig' + +import { + Organization, + Organization_Order_By, + useDisplayValuesQuery, + useOrganizationsPaginationCountSubscription, + useOrganizationsPaginationSubscription, + useTotalOrganizationsQuery, + useTotalSubscription, + useTotalActiveSubscription, +} from 'src/queries' import { styled } from '@mui/system' import { GRADIENT } from './styles' import { features } from './features' import { Newsletter } from './components/Newsletter' +import { Spinner } from 'components/atoms/Loader' -import { Box, Container } from '@mui/material' +import { Box, Container, Typography, Grid, Paper, Stack, Button } from '@mui/material' import { Hero, Intro, @@ -32,22 +48,152 @@ const Wrapper = styled(Box)(({ theme }) => ({ // } })) +const top_collective = [ + { + name: 'GAMEDAO', + description: '', + id: '0x2762ebd15585462cb6ddd1ee88d717c5d39e47a0650b988be866754c6e41b7ee', + image: 'QmYFBa6TcCoQsKWUoA33ceGuxWkHMaoWhP3BNordV76MCs', + }, + { + name: 'GAME3', + description: '', + id: '0x2762ebd15585462cb6ddd1ee88d717c5d39e47a0650b988be866754c6e41b7ee', + image: 'QmYFBa6TcCoQsKWUoA33ceGuxWkHMaoWhP3BNordV76MCs', + }, + { + name: 'ZERO', + description: 'the network for videogames', + id: '0x2762ebd15585462cb6ddd1ee88d717c5d39e47a0650b988be866754c6e41b7ee', + image: 'QmYFBa6TcCoQsKWUoA33ceGuxWkHMaoWhP3BNordV76MCs', + }, +] + +const top_campaign = [ + { + name: 'Bomb The World 3', + description: 'The legend returns. Klar Kent is building BTW3. Support now!', + href: '', + image: 'QmYFBa6TcCoQsKWUoA33ceGuxWkHMaoWhP3BNordV76MCs', + }, + { name: 'GAMEDAO', description: '', id: '', image: 'QmYFBa6TcCoQsKWUoA33ceGuxWkHMaoWhP3BNordV76MCs' }, + { name: 'GAMEDAO', description: '', id: '', image: 'QmYFBa6TcCoQsKWUoA33ceGuxWkHMaoWhP3BNordV76MCs' }, + { + name: 'Bomb The World 3', + description: 'The legend returns. Klar Kent is building BTW3. Support now!', + href: '', + image: 'QmYFBa6TcCoQsKWUoA33ceGuxWkHMaoWhP3BNordV76MCs', + }, + { name: 'GAMEDAO', description: '', id: '', image: 'QmYFBa6TcCoQsKWUoA33ceGuxWkHMaoWhP3BNordV76MCs' }, + { name: 'GAMEDAO', description: '', id: '', image: 'QmYFBa6TcCoQsKWUoA33ceGuxWkHMaoWhP3BNordV76MCs' }, +] + +const top_battlepass = [ + { name: 'AEX-1.IO', description: '', id: '', image: 'QmYFBa6TcCoQsKWUoA33ceGuxWkHMaoWhP3BNordV76MCs' }, + { + name: 'Netrunner', + description: + 'The ultimate ambassador program for game enthusiasts: Get cash and token rewards for giving GAMEDAO a hand with testing, posting, story telling and more!', + href: '', + image: 'QmYFBa6TcCoQsKWUoA33ceGuxWkHMaoWhP3BNordV76MCs', + }, + { name: 'B0R3DN1GH7', description: '', id: '', image: 'QmYFBa6TcCoQsKWUoA33ceGuxWkHMaoWhP3BNordV76MCs' }, +] + +const GridItem = (props) => { + const config = useConfig() + const imageUrl = parseIpfsHash(props.item.header, config.IPFS_GATEWAY) + + return ( + + + + + {props.item.name} + + {/* + {props.item.description} + */} + + + + + + + + + ) +} +const ItemGrid = (props) => { + return ( + + + {props.title} + + + {props.items && props.items.length > 0 ? ( + props.items.map((item, index) => { + return + }) + ) : ( + + + + )} + + + + + + + + ) +} export function Landingpage() { - const { hero, intro, transform, teaser1, roadmap, team, partners, supporters, wallet, disclaimer, questions } = - features + const maxCollectives = 6 + const maxCampaigns = 6 + const maxPasses = 3 + + const [topCollectives, setTopCollectives] = useState({}) + const getCollectives = useOrganizationsPaginationSubscription() + // { + // variables: { + // searchQuery: `''`, + // }, + // } + useEffect(() => { + console.log('collectives', getCollectives?.data?.organization) + const content = getCollectives?.data?.organization.slice(0, 3) + setTopCollectives(content) + }, [getCollectives]) return ( - - {/* {hero && } */} - {/* {hero && } */} - {/* */} - - - - {/* {intro && } */} - - {/* {teaser1 && ( + {/* */} + {/* top collectives */} + {/* top campaigns */} + {/* top battlepasses */} + + {/* {hero && } */} + {/* {hero && } */} + {/* */} + {/* */} + + + + + + + {/* {intro && } */} + {/* {teaser1 && ( )} */} - - {/* {transform && } */} - {/* {team && } */} - {/* {partners && } */} - {/* {wallet && } */} - {/* {questions && } */} - {/* {roadmap && } */} - {/* {supporters && } */} - {/* {disclaimer && } */} - - + {/* {transform && } */} + {/* {team && } */} + {/* {partners && } */} + {/* {wallet && } */} + {/* {questions && } */} + {/* {roadmap && } */} + {/* {supporters && } */} + {/* {disclaimer && } */} + ) } diff --git a/apps/app/src/dapps/unity/components/tabs/organization/dashboardView.tsx b/apps/app/src/dapps/unity/components/tabs/organization/dashboardView.tsx deleted file mode 100644 index ca6a71ea..00000000 --- a/apps/app/src/dapps/unity/components/tabs/organization/dashboardView.tsx +++ /dev/null @@ -1,411 +0,0 @@ -import React, { Fragment, useCallback, useEffect, useMemo, useState } from 'react' -import { useTranslation } from 'react-i18next' -import { useRouter } from 'next/router' - -import { TransactionData } from 'src/@types/transactionData' -import { Organization } from 'src/queries' -import { getCampaignStatusPercentage } from 'src/utils/campaignUtils' -import { getProposalTypesCount } from 'src/utils/proposalUtils' -import { useRemoveMemberTransaction } from 'hooks/tx/useRemoveMemberTransaction' - -import { useTheme } from '@mui/material/styles' -import { ChevronRight, Verified } from '@mui/icons-material' -import { FmdGood, InsertLink, Label, VpnKey } from '@mui/icons-material/' -import { Box, Chip, Button, Divider, Paper, Stack, Typography } from '@mui/material' - -import { DonutChart } from 'components/molecules/charts/DonutChart' -import { AreaChartContainer } from './components/areaChartContainer' -import { RadialChartContainer } from './components/radialChartContainer' -import { TreasuryChart } from './components/treasuryChart' - -import { TransactionDialog } from 'components/molecules/TransactionDialog/transactionDialog' - -type TArgs = { - organization: Organization - organizationId: string - isMember: boolean - isAdmin: boolean - handleOpenTxModal: () => void - handleCloseTxModal: () => void - showTxModalType: boolean - addMemberTx: TransactionData -} -type TProps = { - args: TArgs -} - -export function DashboardView( args:TProps ){ - - const { - organization, - organizationId, - isMember, - isAdmin, - handleOpenTxModal, - handleCloseTxModal, - showTxModalType, - addMemberTx, - } = args - - const theme = useTheme() - const { t } = useTranslation() - const { push } = useRouter() - - const removeMemberTx = useRemoveMemberTransaction(organizationId) - - const series1 = [ - { - name: 'Members', - data: [0, 7, 3, 8, 2], - }, - ] - const categories = [ - '2022-07-19T00:00:00.000Z', - '2022-07-20T01:30:00.000Z', - '2022-07-21T02:30:00.000Z', - '2022-07-22T03:30:00.000Z', - '2022-07-23T04:30:00.000Z', - ] - const series2 = [ - { - name: 'Balance', - data: [0, 10, 20, 13, 5], - }, - ] - const [isReadMore, setIsReadMore] = useState(true) - const [showButton, setShowButton] = useState(false) - - const handleChangeRoute = useCallback( - (newPath) => { - if (organizationId) { - push(`${organizationId}/${newPath}`) - } else { - push(newPath) - } - }, - [organizationId, push], - ) - - const toggleReadMore = useCallback(() => { - setIsReadMore((prev) => !prev) - }, [setIsReadMore]) - - const description = useMemo( - () => (isReadMore ? organization?.description?.slice(0, 150) : organization?.description), - [isReadMore, organization?.description], - ) - - const accessModel = useMemo( - () => - organization?.access_model === 'Open' - ? { - title: t('page:organizations:organization_rules:open:title'), - text: t('page:organizations:organization_rules:open:text'), - status: t('page:organizations:organization_rules:open:status'), - } - : { - title: t('page:organizations:organization_rules:private:title'), - text: t('page:organizations:organization_rules:private:text'), - status: t('page:organizations:organization_rules:private:status'), - }, - [organization?.access_model], - ) - - const feeModel = useMemo(() => { - if (organization?.fee_model === 'NoFees') { - return { - title: t('page:organizations:organization_rules:no_fee:title'), - text: t('page:organizations:organization_rules:no_fee:text'), - } - } else if (organization?.fee_model === 'Reserve') { - return { - title: t('page:organizations:organization_rules:reserved_fee:title'), - text: t('page:organizations:organization_rules:reserved_fee:text'), - } - } else if (organization?.fee_model === 'Transfer') { - return { - title: t('page:organizations:organization_rules:transferred_fee:title'), - text: t('page:organizations:organization_rules:transferred_fee:text'), - } - } - }, [organization?.fee_model]) - - const memberLimit = useMemo( - () => - organization?.member_limit === 0 - ? { - title: t('page:organizations:organization_rules:no_memberLimit:title'), - text: t('page:organizations:organization_rules:no_memberLimit:text'), - } - : { - title: t('page:organizations:organization_rules:memberLimit:title'), - text: ` ${t('page:organizations:organization_rules:memberLimit:only')} ${ - organization?.member_limit - } ${t('page:organizations:organization_rules:memberLimit:text')}`, - }, - [organization?.member_limit], - ) - - const statesPercentages = useMemo( - () => - getCampaignStatusPercentage( - organization?.campaigns_aggregate?.aggregate?.count, - organization?.campaigns_aggregate?.nodes, - ), - [organization?.campaigns_aggregate?.aggregate?.count, organization?.campaigns_aggregate?.nodes], - ) - - const proposalTypesCount = useMemo( - () => getProposalTypesCount(organization?.proposals_aggregate?.nodes), - [organization?.proposals_aggregate?.nodes], - ) - - useEffect(() => { - organization?.description?.length > 250 ? setShowButton(true) : setShowButton(false) - }, [organization?.description?.length]) - - const [orgData, setOrgData] = useState({ - location: '', - url: '', - tags: [], - }) - - useEffect(() => { - if (!organization) return - setOrgData({ - ...orgData, - location: organization?.location, - url: organization?.url, - tags: organization?.tags, - }) - }, [organization]) - - return ( - - - - - - {t('page:organizations:about')} - - - - {description} - {showButton && ( - - {isReadMore ? ' More...' : ' Less...'} - - )} - - - - {orgData.tags.length > 0 && ( - - - )} - - {organization?.location && ( - - {orgData.location} - - )} - {accessModel.status && ( - - {accessModel.status} - - )} - {organization?.url && ( - - {orgData.url} - - )} - - - - {!isMember && ( - <> - - - )} - - - - - - - {t('page:organizations:organizations_rules')} - - - {organization?.fee_model && ( - - - - {feeModel.title} - {feeModel.text} - - - )} - - {organization?.access_model && ( - - - - {accessModel.title} - {accessModel.text} - - - )} - - {(organization?.member_limit || organization?.member_limit === 0) && ( - - - - {memberLimit.title} - {memberLimit.text} - - - )} - - - - - - {/* - - - {t('label:members')} - - - - - - - - {t('label:treasury')} - - - - - */} - - - - - - - - - - - {t('label:campaigns')} - - - - } - > - - - - - - - - - {t('page:organizations:votings')} - - - - - - - - - - - - - ) -} diff --git a/apps/app/src/dapps/unity/context.ts b/apps/app/src/dapps/unity/context.ts deleted file mode 100644 index f84eef2c..00000000 --- a/apps/app/src/dapps/unity/context.ts +++ /dev/null @@ -1,47 +0,0 @@ -import { createContext, useContext } from 'react' - -export interface DAppContext { - ready: boolean - id: string - proposalId: string - draftMode: boolean - - name: string - description: string - website: string - tags: string[] - img_logo: string - img_header: string - - members: string[] - - address: string - isAdmin: boolean - isCreator: boolean - isMember: boolean -} - -export const DAppContext = createContext({ - ready: false, - id: null, - proposalId: null, - draftMode: false, - - name: null, - description: null, - website: null, - tags: null, - img_logo: null, - img_header: null, - - members: null, - - address: null, - isAdmin: false, - isCreator: false, - isMember: false, -}) - -export function useDAppContext(): DAppContext { - return useContext(DAppContext) -} diff --git a/apps/app/src/hooks/tx/useCreateCampaignTransaction.ts b/apps/app/src/hooks/tx/useCreateCampaignTransaction.ts index 947b3a30..2067d9c1 100644 --- a/apps/app/src/hooks/tx/useCreateCampaignTransaction.ts +++ b/apps/app/src/hooks/tx/useCreateCampaignTransaction.ts @@ -46,7 +46,7 @@ export function useCreateCampaignTransaction(): TransactionData { const startBlocks = startSecondsDiff > 0 ? blockNumber + - Math.ceil(startSecondsDiff / selectedApiProvider.systemProperties.blockTargetTime) + Math.ceil(startSecondsDiff / selectedApiProvider.systemProperties.blockTargetTime) : blockNumber const endSecondsDiff = moment(data.endDate).diff(moment(), 'seconds') diff --git a/apps/app/src/hooks/tx/useCreateProposalTransaction.ts b/apps/app/src/hooks/tx/useCreateProposalTransaction.ts index d23f3b4b..f73eef73 100644 --- a/apps/app/src/hooks/tx/useCreateProposalTransaction.ts +++ b/apps/app/src/hooks/tx/useCreateProposalTransaction.ts @@ -128,7 +128,7 @@ export function useCreateProposalTransaction(organizationId: string): Transactio ? createTokenType( selectedApiProvider.apiProvider, selectedApiProvider.systemProperties.tokenSymbol[data.currencyId], - ) + ) : null, } diff --git a/apps/app/src/hooks/useBlockNumber.ts b/apps/app/src/hooks/useBlockNumber.ts index 428b1408..12cb39af 100644 --- a/apps/app/src/hooks/useBlockNumber.ts +++ b/apps/app/src/hooks/useBlockNumber.ts @@ -3,5 +3,5 @@ import { useBlockNumberSubscription } from 'src/queries' export function useBlockNumber(): number { const { data } = useBlockNumberSubscription() - return data?.chainInfo?.[0]?.blockNumber ?? 0 + return data?.ChainInfo?.[0]?.blockNumber ?? 0 } diff --git a/apps/app/src/hooks/useDisplayValues.ts b/apps/app/src/hooks/useDisplayValues.ts index bf7d032b..131bc3e3 100644 --- a/apps/app/src/hooks/useDisplayValues.ts +++ b/apps/app/src/hooks/useDisplayValues.ts @@ -11,5 +11,5 @@ export function useDisplayValues(): DisplayValues { } }, [error]) - return (loading ? null : data?.gamedao.displayValues ?? null) as DisplayValues + return (loading ? null : data?.displayValues) as DisplayValues } diff --git a/apps/app/src/hooks/useLocalStorage.ts b/apps/app/src/hooks/useLocalStorage.ts index e2464b0c..4d95f44e 100644 --- a/apps/app/src/hooks/useLocalStorage.ts +++ b/apps/app/src/hooks/useLocalStorage.ts @@ -40,9 +40,8 @@ export function useLocalStorage(key: string, defaultValue: any): [T, Dispatch useEffect(() => { const storedValue = window.localStorage.getItem(key) - if (storedValue !== null) { - setState(JSON.parse(storedValue)) - } + if (!window || !storedValue || storedValue == undefined) return + setState(JSON.parse(storedValue)) }, [key]) return [state, handleSetValue] diff --git a/apps/app/src/layouts/default/components/footer.tsx b/apps/app/src/layouts/default/components/footer.tsx index 7af6c221..9f6669be 100644 --- a/apps/app/src/layouts/default/components/footer.tsx +++ b/apps/app/src/layouts/default/components/footer.tsx @@ -81,9 +81,7 @@ export function Footer() {
github Polkadot Explorer diff --git a/apps/app/src/layouts/landingpage/components/sidebar.tsx b/apps/app/src/layouts/landingpage/components/sidebar.tsx index 97885a9b..82e21286 100644 --- a/apps/app/src/layouts/landingpage/components/sidebar.tsx +++ b/apps/app/src/layouts/landingpage/components/sidebar.tsx @@ -2,7 +2,7 @@ import React, { useState } from 'react' import { useRouter } from 'next/router' import { styled, useTheme } from '@mui/material/styles' import { Badge, ListItemButton, ListItemIcon, Stack, Typography, useMediaQuery, Drawer, MenuItem } from '@mui/material' -import { ThemeSwitch } from 'components/atoms/ThemeSwitch' +import { ThemeSwitch } from 'components/molecules/ThemeSwitch' import { FontIcons } from 'components/atoms/Icons/icons' // TODO: diff --git a/apps/app/src/layouts/v2/components/Footer.tsx b/apps/app/src/layouts/v2/components/Footer.tsx index 3673bc06..bf485315 100644 --- a/apps/app/src/layouts/v2/components/Footer.tsx +++ b/apps/app/src/layouts/v2/components/Footer.tsx @@ -72,9 +72,7 @@ export function Footer() { {/* fractal id */} github block explorer diff --git a/apps/app/src/layouts/v2/components/Header.tsx b/apps/app/src/layouts/v2/components/Header.tsx index eaa55503..81c59b9c 100644 --- a/apps/app/src/layouts/v2/components/Header.tsx +++ b/apps/app/src/layouts/v2/components/Header.tsx @@ -1,5 +1,14 @@ import MenuIcon from '@mui/icons-material/Menu' -import { Button, Typography, MenuItem, ListItemIcon, ListItemText, ListItemButton, useMediaQuery } from '@mui/material' +import { + Button, + Chip, + Typography, + MenuItem, + ListItemIcon, + ListItemText, + ListItemButton, + useMediaQuery, +} from '@mui/material' import AppBar from '@mui/material/AppBar' import Box from '@mui/material/Box' import Stack from '@mui/material/Stack' @@ -26,6 +35,7 @@ import { BaseDialog } from 'components/molecules/BaseDialog' import FeedbackButton from 'components/molecules/Feedback' import Link from 'components/atoms/Link' import { useCurrentAccountAddress } from 'src/hooks/useCurrentAccountAddress' +import { useBlockNumber } from 'src/hooks/useBlockNumber' import { useExtensionContext } from 'src/providers/extension/components/context' // eslint-disable-next-line @next/next/no-img-element @@ -43,26 +53,26 @@ interface ComponentProps { } const leftNav = [ - // { - // name: 'Unity', // 'button:navigation:organizations', - // path: '/unity/overview', - // icon: , - // }, // { // name: 'Battlepass', // path: '/battlepass/overview', // icon: , // }, + { + name: 'Collectives', // 'button:navigation:organizations', + path: '/collectives/overview', + icon: , + }, + { + name: 'Campaigns', // button:navigation:campaigns', + path: '/campaigns/overview', + icon: , + }, // { // name: 'Buy', // button:navigation:campaigns', // path: '/buy', // icon: , // }, - // { - // name: 'Fund', // button:navigation:campaigns', - // path: '/fund/overview', - // icon: , - // }, ] const rightNav = [ @@ -96,12 +106,29 @@ export function Header({ onSidebarOpen, sidebarOpen, noContainer, hideDApps }: C }) const connected = useCurrentAccountAddress() + const blockNumber = useBlockNumber() const [showFeedback, setFeedback] = useState(false) const anchorRef = useRef(null) const openFeedback = () => setFeedback(true) const closeFeedback = () => setFeedback(false) + const Network = () => { + return ( + + ) + } + return ( )} + + {!hideDApps && } diff --git a/apps/app/src/layouts/v2/components/NavbarMobile.tsx b/apps/app/src/layouts/v2/components/NavbarMobile.tsx index 6e99b245..7068c0f8 100644 --- a/apps/app/src/layouts/v2/components/NavbarMobile.tsx +++ b/apps/app/src/layouts/v2/components/NavbarMobile.tsx @@ -1,17 +1,5 @@ import { Close } from '@mui/icons-material' -import { - Box, - Button, - Drawer, - ListItemButton, - ListItemIcon, - ListItemText, - Link as MUILink, - Stack, - Typography, - Toolbar, - MenuItem, -} from '@mui/material' +import { Box, Button, Drawer, ListItemButton, ListItemIcon, ListItemText, Link as MUILink, Stack, Typography, Toolbar, MenuItem } from '@mui/material' import { useTheme } from '@mui/material/styles' import { useRouter } from 'next/router' import React, { Fragment, useCallback } from 'react' @@ -46,18 +34,18 @@ interface ComponentProps { // TODO: Extract to features / graphql const leftNav = [ { - name: 'Unity', // 'button:navigation:organizations', - path: '/unity', + name: 'Collectives', // 'button:navigation:organizations', + path: '/collectives', icon: , }, - { - name: 'Battlepass', //'button:navigation:quests', - path: '/battlepass', - icon: , - }, // { - // name: 'Fund', // button:navigation:campaigns', - // path: '/fund', + // name: 'Battlepass', //'button:navigation:quests', + // path: '/battlepass', + // icon: , + // }, + // { + // name: 'Campaigns', // button:navigation:campaigns', + // path: '/campaigns', // icon: , // }, // { diff --git a/apps/app/src/layouts/v2/components/OrganizationButton.tsx b/apps/app/src/layouts/v2/components/OrganizationButton.tsx index 6861eec8..dac3b3dc 100644 --- a/apps/app/src/layouts/v2/components/OrganizationButton.tsx +++ b/apps/app/src/layouts/v2/components/OrganizationButton.tsx @@ -19,7 +19,7 @@ export function OrganizationButton({ id, logo, name, active, notification }: Com const { push } = useRouter() const config = useConfig() // const url = `/v1/${id}` - const url = `/organizations/${id}/dashboard` + const url = `/collectives/${id}/dashboard` return ( diff --git a/apps/app/src/layouts/v2/components/Sidebar.tsx b/apps/app/src/layouts/v2/components/Sidebar.tsx index 4a4edbdf..69e88cf9 100644 --- a/apps/app/src/layouts/v2/components/Sidebar.tsx +++ b/apps/app/src/layouts/v2/components/Sidebar.tsx @@ -8,7 +8,7 @@ import { useSidebarSubscription } from 'src/queries' import { createErrorNotification } from 'src/utils/notification' import { Add as AddIcon } from '@mui/icons-material' -import { CircularProgress, Divider, Drawer, Fab, Stack } from '@mui/material' +import { CircularProgress, Divider, Drawer, Fab, Stack, Box } from '@mui/material' import { useTheme } from '@mui/material/styles' import { OrganizationButtonMemoized } from './OrganizationButton' @@ -18,11 +18,13 @@ interface ComponentProps { showHeader?: boolean onClose?: () => void open?: boolean + baseSpacing: number + spacing: string } const log = Logger('HAIKU') -export function Sidebar({ showHeader, onClose, open }: ComponentProps) { +export function Sidebar({ showHeader, onClose, open, baseSpacing, spacing }: ComponentProps) { const theme = useTheme() const { push } = useRouter() const address = useCurrentAccountAddress() @@ -53,103 +55,105 @@ export function Sidebar({ showHeader, onClose, open }: ComponentProps) { } }, [loading, data]) - return ( - - - {(loading || (data?.organization && selectedAccount)) && ( - - {loading && ( - - )} - - {selectedAccount && - (data?.organization?.slice() as any) - ?.sort((a, b) => a.metadata?.name?.localeCompare(b.metadata?.name)) - ?.map((organization) => { - return ( - - = 0} - notification={false} - /> - - ) - })} - - )} + if (loading || error || data.organization.length === 0) return null - - {(loading || (data?.organization.length > 0 && selectedAccount)) && ( - + return ( + + + + {(loading || (data?.organization && selectedAccount)) && ( + + {loading && ( + + )} + + {selectedAccount && + (data?.organization?.slice() as any) + ?.sort((a, b) => a.metadata?.name?.localeCompare(b.metadata?.name)) + ?.map((organization) => { + return ( + + = 0} + notification={false} + /> + + ) + })} + )} - - - + + {(loading || (data?.organization.length > 0 && selectedAccount)) && } + + + + + - - - {/**/} + + {/**/} - {/* + {/* helper icons - feedback - docs - faucet */} + - + ) } diff --git a/apps/app/src/layouts/v2/components/TopBar.tsx b/apps/app/src/layouts/v2/components/TopBar.tsx index 65df25a0..a00dcd1f 100644 --- a/apps/app/src/layouts/v2/components/TopBar.tsx +++ b/apps/app/src/layouts/v2/components/TopBar.tsx @@ -172,7 +172,7 @@ const Items = ({ items }) => { - )) + )) : null } diff --git a/apps/app/src/layouts/v2/index.tsx b/apps/app/src/layouts/v2/index.tsx index 84c55eba..f4e2068c 100644 --- a/apps/app/src/layouts/v2/index.tsx +++ b/apps/app/src/layouts/v2/index.tsx @@ -80,9 +80,13 @@ export function Layout({ @@ -107,11 +111,9 @@ export function Layout({ {/**/} - {/* {showSidebar && (isMd || sidebarOpen) && connected && ( - - - - )} */} + {showSidebar && (isMd || sidebarOpen) && connected && ( + + )} {noContainer ? ( {children} diff --git a/apps/app/src/layouts/v5/components/Footer.tsx b/apps/app/src/layouts/v5/components/Footer.tsx new file mode 100644 index 00000000..bf485315 --- /dev/null +++ b/apps/app/src/layouts/v5/components/Footer.tsx @@ -0,0 +1,130 @@ +import React from 'react' +import { ENVIRONMENT } from 'src/constants' +import { Box, Container, Grid, Link as MUILink, Stack, Typography } from '@mui/material' +import { useTheme } from '@mui/material/styles' +import { SiDiscord, SiGithub, SiLinkedin, SiTelegram, SiTwitter } from 'react-icons/si' +import { getConnectedEndpoint } from 'src/constants/endpoints' +import { FontIcons } from 'components/atoms/Icons/icons' +import NextLink from 'components/atoms/Link' + +/* eslint-disable @next/next/no-img-element */ +const Logo = () => GameDAO + +const Link = ({ href, children }) => ( + + + {children} + + +) + +export function Footer() { + const theme = useTheme() + const { chain } = getConnectedEndpoint() + + return ( + + + + + + + + + + + + Social + + + {/* + pinky paper + */} + blog + docs +
+ twitch + discord + telegram + twitter + linkedin + + + + + Build + + + zero network + {/* acala.network */} + substrate.dev + {/* kilt protocol */} + {/* fractal id */} + github + + block explorer + +
+ select account +
+ select network + + + + + GameDAO. +
+ The operating system for the creator and player economy. + + + Community driven ownership and creation will be a vital part of how we see video games + in the near future. The transition to token driven economies is already in progress but + is still in its early stages, only treating the symptoms of a broken, financial + incentive driven sales machine. +
+
+ Tokenisation and community ownership need fair and transparent protocols to create safe + environments for all participants working and creating together. Proper game theory + needs to disincentivize bad actors and reward the good vibes of the community. +
+
+ From forging the initial idea over collaboration to fundraising and finally creating and + operating game economies, we provide open protocols enabling coordination, ownership, + fundraising and much more to sustainably improve economics of videogames, content + creation and esports. + + + + + + + {`© 2019-${new Date().getFullYear()} `}GameDAO AG, Vaduz, Liechtenstein. Powered by{' '} + Zero Reality.{' '} + Imprint.{' '} + Terms + Conditions. + + + {process.env.APP_NAME} {process.env.APP_VERSION} build {process.env.BUILD_TIME} + {' — '} + {process.env.VERCEL_GIT_COMMIT_SHA} {' — '} {process.env.VERCEL_ENV} + {' — '} + ENVIRONMENT: {ENVIRONMENT} + + + + + + ) +} diff --git a/apps/app/src/layouts/v5/components/Header.tsx b/apps/app/src/layouts/v5/components/Header.tsx new file mode 100644 index 00000000..b53a4bc4 --- /dev/null +++ b/apps/app/src/layouts/v5/components/Header.tsx @@ -0,0 +1,317 @@ +import MenuIcon from '@mui/icons-material/Menu' +import { + Button, + Chip, + Typography, + MenuItem, + ListItemIcon, + ListItemText, + ListItemButton, + useMediaQuery, +} from '@mui/material' +import AppBar from '@mui/material/AppBar' +import Box from '@mui/material/Box' +import Stack from '@mui/material/Stack' +import Toolbar from '@mui/material/Toolbar' +import { useTheme } from '@mui/material/styles' +import { useRouter } from 'next/router' +import React, { Fragment, useState, useRef } from 'react' +import { useTranslation } from 'react-i18next' +import { + RiShieldLine, + RiSwordLine, + RiTreasureMapLine, + RiVipDiamondLine, + RiBookOpenLine, + RiDropLine, + RiAwardLine, + RiChat1Line, + RiCommunityLine, + RiAncientGateLine, +} from 'react-icons/ri' +import { RxDiscordLogo } from 'react-icons/rx' +import { AccountSelector } from 'components/molecules/AccountSelector' +import { BaseDialog } from 'components/molecules/BaseDialog' +import FeedbackButton from 'components/molecules/Feedback' +import Link from 'components/atoms/Link' +import { useCurrentAccountAddress } from 'src/hooks/useCurrentAccountAddress' +import { useExtensionContext } from 'src/providers/extension/components/context' + +// eslint-disable-next-line @next/next/no-img-element +// const Logo = () => +const Logo = () => +// eslint-disable-next-line @next/next/no-img-element +// const LogoSM = () => +const LogoSM = () => + +interface ComponentProps { + onSidebarOpen: () => void + sidebarOpen: boolean + noContainer?: boolean + hideDApps?: boolean +} + +const leftNav = [ + // { + // name: 'Collectives', // 'button:navigation:organizations', + // path: '/collectives/overview', + // icon: , + // }, + // { + // name: 'Campaigns', // button:navigation:campaigns', + // path: '/campaigns/overview', + // icon: , + // }, + // { + // name: 'Battlepass', + // path: '/battlepass/overview', + // icon: , + // }, + // { + // name: 'Buy', // button:navigation:campaigns', + // path: '/buy', + // icon: , + // }, +] + +const rightNav = [ + { + name: 'Loot', //'button:navigation:faucet', + path: 'https://discord.com/channels/273529551483699200/772045307021885452', + icon: , + }, + { + name: 'Docs', //'button:navigation:documentation', + path: 'https://docs.gamedao.co/', + icon: , + }, +] + +export function Header({ onSidebarOpen, sidebarOpen, noContainer, hideDApps }: ComponentProps) { + const { w3Enabled } = useExtensionContext() + + const theme = useTheme() + const { t } = useTranslation() + const router = useRouter() + + const isMd = useMediaQuery(theme.breakpoints.up('md'), { + defaultMatches: true, + }) + const isLg = useMediaQuery(theme.breakpoints.up('lg'), { + defaultMatches: true, + }) + const isXl = useMediaQuery(theme.breakpoints.up('xl'), { + defaultMatches: true, + }) + + const connected = useCurrentAccountAddress() + + const [showFeedback, setFeedback] = useState(false) + const anchorRef = useRef(null) + const openFeedback = () => setFeedback(true) + const closeFeedback = () => setFeedback(false) + + const Network = () => { + return ( + + ) + } + + return ( + + {/**/} + + + + + + {/* {isLg ? : } */} + + + + + + + + {!hideDApps && + leftNav.map((item) => { + return ( + + , &::after, &::before': { transitionDuration: '250ms' }, + '&::after': { + transitionDuration: '250ms', + content: '""', + position: 'absolute', + borderRadius: '2px 0px 0px 2px', + boxShadow: '0 0px 20px 2px #00ffcc99', + // borderBottom: '2px solid #ffffff33', + width: '0%', + left: '50%', + right: '50%', + bottom: '-1px', + }, + '&:hover': { + '&::after': { + width: '90%', + left: '5%', + right: '5%', + }, + }, + '&.Mui-selected': { + '&::after': { + transitionDuration: '250ms', + content: '""', + position: 'absolute', + // borderColor: '#ff00ff', + borderRadius: '2px 0px 0px 2px', + boxShadow: '0 0px 20px 2px #00ffcc', + // borderBottom: '2px solid #ffffff66', + width: '90%', + left: '5%', + right: '5%', + bottom: '-1px', + }, + }, + }} + > + {item.icon && {item.icon} } + {{t(item.name)}} + + + ) + })} + + + + + + + + + + + + {!connected && + w3Enabled && + rightNav.map((item) => { + return ( + + + + ) + })} + + {showFeedback && ( + + + + + + )} + + + + {!hideDApps && } + + + + + + + + ) +} diff --git a/apps/app/src/layouts/v5/components/HeaderMobile.tsx b/apps/app/src/layouts/v5/components/HeaderMobile.tsx new file mode 100644 index 00000000..b66ceac5 --- /dev/null +++ b/apps/app/src/layouts/v5/components/HeaderMobile.tsx @@ -0,0 +1,117 @@ +import { NavbarMobile } from './NavbarMobile' +import { Close, Menu, MoreVert, Apps as Open } from '@mui/icons-material' +import { AppBar, Box, Toolbar, Button, Stack, MenuItem, Typography } from '@mui/material' +import { useTheme } from '@mui/material/styles' +import React, { useCallback, useState } from 'react' +import { AccountSelector, FontIcons } from 'src/components' +import Link from 'components/atoms/Link' + +/* eslint-disable @next/next/no-img-element */ +// const Logo = () => GameDAO +const Logo = () => + +interface ComponentProps { + onSidebarOpen: () => void + sidebarOpen: boolean + noContainer?: boolean + hideDApps?: boolean +} + +export function HeaderMobile({ onSidebarOpen, sidebarOpen, noContainer, hideDApps }: ComponentProps) { + const theme = useTheme() + const [openMenu, setOpenMenu] = useState(false) + + const handleMenuOpen = useCallback(() => { + setOpenMenu(true) + }, [setOpenMenu]) + + const handleMenuClose = useCallback(() => { + setOpenMenu(false) + }, [setOpenMenu]) + + return ( + <> + theme.zIndex.drawer + 1, + boxShadow: 'none', + background: 'transparent', + }} + > + + + + + + + + + + + + + + {/* + + */} + + {!hideDApps && } + + ) +} diff --git a/apps/app/src/layouts/v5/components/MainNavigation.tsx b/apps/app/src/layouts/v5/components/MainNavigation.tsx new file mode 100644 index 00000000..e69de29b diff --git a/apps/app/src/layouts/v5/components/NavbarMobile.tsx b/apps/app/src/layouts/v5/components/NavbarMobile.tsx new file mode 100644 index 00000000..7068c0f8 --- /dev/null +++ b/apps/app/src/layouts/v5/components/NavbarMobile.tsx @@ -0,0 +1,233 @@ +import { Close } from '@mui/icons-material' +import { Box, Button, Drawer, ListItemButton, ListItemIcon, ListItemText, Link as MUILink, Stack, Typography, Toolbar, MenuItem } from '@mui/material' +import { useTheme } from '@mui/material/styles' +import { useRouter } from 'next/router' +import React, { Fragment, useCallback } from 'react' +import { useTranslation } from 'react-i18next' +import { + RiShieldLine, + RiSwordLine, + RiTreasureMapLine, + RiVipDiamondLine, + RiBookOpenLine, + RiDropLine, + RiExchangeFundsLine, + RiAwardLine, + RiCommunityLine, + RiAncientGateLine, +} from 'react-icons/ri' +import { RxDiscordLogo } from 'react-icons/rx' +import { SiDiscord, SiGithub, SiLinkedin, SiTelegram, SiTwitter } from 'react-icons/si' +import { AccountSelector } from 'src/components/molecules/AccountSelector' +import Link from 'components/atoms/Link' +import { useCurrentAccountAddress } from 'src/hooks/useCurrentAccountAddress' + +/* eslint-disable @next/next/no-img-element */ +// const Logo = () => GameDAO +const Logo = () => + +interface ComponentProps { + onClose: () => void + open: boolean +} + +// TODO: Extract to features / graphql +const leftNav = [ + { + name: 'Collectives', // 'button:navigation:organizations', + path: '/collectives', + icon: , + }, + // { + // name: 'Battlepass', //'button:navigation:quests', + // path: '/battlepass', + // icon: , + // }, + // { + // name: 'Campaigns', // button:navigation:campaigns', + // path: '/campaigns', + // icon: , + // }, + // { + // name: 'Achievements', //'button:navigation:quests', + // path: '/achievements', + // icon: + // }, +] + +const rightNav = [ + { + name: 'Discord', //'button:navigation:faucet', + path: 'https://discord.gg/gamedao', + icon: , + }, + { + name: 'Loot', //'button:navigation:faucet', + path: 'https://discord.com/channels/273529551483699200/772045307021885452', + icon: , + }, + { + name: 'Docs', //'button:navigation:documentation', + path: 'https://docs.gamedao.co/', + icon: , + }, +] + +// const Link = ({ href, children }) => ( +// +// +// {children} +// +// +// ) + +export function NavbarMobile({ onClose, open }: ComponentProps) { + const theme = useTheme() + const { t } = useTranslation() + const { push } = useRouter() + + const connected = useCurrentAccountAddress() + + const handleClick = useCallback( + (url, external) => { + if (external) { + window.open(url, '_blank', 'noopener') + } else { + push(url) + } + }, + [push], + ) + + return ( + + + + + + + + + + + + + + + + + + + + {leftNav.map((item) => { + return ( + + + + {item.icon && {item.icon}} + {t(item.name)} + + + + ) + })} +
+
+ {connected && + rightNav.map((item) => { + return ( + + + {item.icon && {item.icon}} + + {t(item.name)} + + + + ) + })} + + + + {/*TODO: Should come from graphql and not be called like this + translations */} + + Need help? + + Read the docs! + + + + + {/* + + + + + + + + + + + + + + + + */} + + + + ) +} diff --git a/apps/app/src/layouts/v5/components/OrganizationButton.tsx b/apps/app/src/layouts/v5/components/OrganizationButton.tsx new file mode 100644 index 00000000..dac3b3dc --- /dev/null +++ b/apps/app/src/layouts/v5/components/OrganizationButton.tsx @@ -0,0 +1,100 @@ +import { memo, useCallback } from 'react' +import Image from 'next/image' +import Link from 'next/link' +import { useRouter } from 'next/router' +import { useConfig } from 'src/hooks/useConfig' +import { parseIpfsHash } from 'src/utils/ipfs' + +import { Avatar, Box, Tooltip } from '@mui/material' + +interface ComponentProps { + id: string + logo: string + name: string + active?: boolean + notification?: boolean +} + +export function OrganizationButton({ id, logo, name, active, notification }: ComponentProps) { + const { push } = useRouter() + const config = useConfig() + // const url = `/v1/${id}` + const url = `/collectives/${id}/dashboard` + + return ( + + ({ + width: '90px', + position: 'relative', + '&::after': { + content: '""', + position: 'absolute', + width: '1px', + backgroundColor: active ? '#00ffcc55' : 'transparent', + borderColor: '#ff00ff', + borderRadius: '2px 0px 0px 2px', + boxShadow: active ? '-5px 0px 10px 3px #00ffcc' : 'none', + top: '25%', + bottom: '25%', + right: '0', + }, + '&': { + '&::before': { + backgroundColor: notification ? main : 'transparent', + position: 'absolute', + width: '13px', + height: '13px', + borderRadius: '50%', + bottom: '0px', + right: '22px', + zIndex: '5', + content: '""', + }, + }, + })} + > + + ({ + margin: 'auto', + width: '48px', + height: '48px', + cursor: 'pointer', + transition: 'border-radius .5s', + '&:hover': { + border: `2px solid ${primary}`, + borderRadius: '30%', + }, + '&': { + border: `2px solid ${active ? primary : 'transparent'}`, + borderRadius: '50%', + }, + })} + alt={name} + src={parseIpfsHash(logo ?? '', config.IPFS_GATEWAY)} + > + {/* {name}*/} + + + + + ) +} + +export const OrganizationButtonMemoized = memo(OrganizationButton) diff --git a/apps/app/src/layouts/v5/components/Sidebar.tsx b/apps/app/src/layouts/v5/components/Sidebar.tsx new file mode 100644 index 00000000..ae37545a --- /dev/null +++ b/apps/app/src/layouts/v5/components/Sidebar.tsx @@ -0,0 +1,160 @@ +import React, { Fragment, useCallback, useEffect } from 'react' +import { useRouter } from 'next/router' +import { Logger } from 'src/utils/logger' + +import { useCurrentAccountAddress } from 'src/hooks/useCurrentAccountAddress' +import { useExtensionContext } from 'src/providers/extension/components/context' +import { useSidebarSubscription } from 'src/queries' +import { createErrorNotification } from 'src/utils/notification' + +import { Add as AddIcon } from '@mui/icons-material' +import { CircularProgress, Divider, Drawer, Fab, Stack, Box } from '@mui/material' +import { useTheme } from '@mui/material/styles' + +import { OrganizationButtonMemoized } from './OrganizationButton' +import { AccountSelector } from 'components/molecules/AccountSelector' + +interface ComponentProps { + showHeader?: boolean + onClose?: () => void + open?: boolean + baseSpacing: number + spacing: string +} + +const log = Logger('HAIKU') + +export function Sidebar({ showHeader, onClose, open, baseSpacing, spacing }: ComponentProps) { + const theme = useTheme() + const { push } = useRouter() + const address = useCurrentAccountAddress() + const { w3Enabled, connectWallet, selectedAccount } = useExtensionContext() + + const { error, loading, data } = useSidebarSubscription({ variables: { address } }) + + const buttonCallback = useCallback(() => { + if (w3Enabled === false) { + connectWallet() + } else if (selectedAccount) { + push('/organizations/create') + } + }, [w3Enabled, connectWallet, selectedAccount, push]) + + useEffect(() => { + if (error) { + createErrorNotification('The information for the sidebar could not be retrieved') + log.error('sidebar', data, error) + } + }, [error]) + + useEffect(() => { + if (!loading && data) { + log.info('SIDEBAR', data) + } + }, [loading, data]) + + if (loading || error || data.organization.length === 0) return null + + return ( + + + + {(loading || (data?.organization && selectedAccount)) && ( + + {loading && ( + + )} + + {selectedAccount && + (data?.organization?.slice() as any) + ?.sort((a, b) => a.metadata?.name?.localeCompare(b.metadata?.name)) + ?.map((organization) => { + return ( + + = 0} + notification={false} + /> + + ) + })} + + )} + + + {(loading || (data?.organization.length > 0 && selectedAccount)) && ( + + )} + + + + + + + + + + + {/* + helper icons + - feedback + - docs + - faucet + */} + + + + ) +} diff --git a/apps/app/src/layouts/v5/components/TopBar.tsx b/apps/app/src/layouts/v5/components/TopBar.tsx new file mode 100644 index 00000000..a00dcd1f --- /dev/null +++ b/apps/app/src/layouts/v5/components/TopBar.tsx @@ -0,0 +1,217 @@ +import React, { Fragment, useState, useRef, useEffect } from 'react' +import { useTranslation } from 'react-i18next' +import { useRouter } from 'next/router' +import Link from 'components/atoms/Link' + +import { useGraphQlContext } from 'src/providers/graphQl/components/context' + +import { useTheme } from '@mui/material/styles' +import MenuIcon from '@mui/icons-material/Menu' +import { + RiShieldLine, // trust + RiHeart3Line, // rep + RiVipCrownLine, // xp + RiSwordLine, // + RiAwardLine, + RiTicketLine, // battlepass + RiVipDiamondLine, // battlepass + RiTreasureMapLine, // quests + RiTrophyLine, // achievements + RiBookOpenLine, // docs + RiDropLine, // faucet + RiExchangeFundsLine, // campaigns + RiChat1Line, // feedback + RiCopperCoinLine, // ZERO + RiCopperDiamondLine, // GAME + RiMoneyDollarCircleLine, // USD + RiCheckboxBlankCircleLine as Dashboard, + RiFingerprintLine as Identity, + RiGamepadLine as Campaigns, + RiKeyLine as Wallet, + RiEmotionHappyLine as Net, +} from 'react-icons/ri' +// import { +// IoPlanetOutline, +// } from 'react-icons/io' +import { + // RiShieldLine as Guilds, + // RiTreasureMapLine as Quests, + // RiGamepadLine as Campaigns, + // RiAwardLine as Achievements, + RiVipDiamondLine as Store, +} from 'react-icons/ri' +import { + CastleOutlined as Folder, // or AccountBalanceOutlined + Logout, + MoreVert, + ExtensionOutlined as NotificationsNone, //or CategoryOultined + SettingsOutlined as Settings, + SportsEsportsOutlined as Topic, +} from '@mui/icons-material' + +import { Button, Typography, MenuItem, ListItemIcon, ListItemText, ListItemButton, useMediaQuery } from '@mui/material' +import AppBar from '@mui/material/AppBar' +import Box from '@mui/material/Box' +import Stack from '@mui/material/Stack' +import Toolbar from '@mui/material/Toolbar' + +interface ComponentProps { + onSidebarOpen: () => void + sidebarOpen: boolean +} + +const lerp = (start, end) => Math.round(Math.max(start, end) - Math.min(start, end) / 2) + +const left = [ + { + name: 'Organizations', // 'button:navigation:organizations', + path: '/org', + icon: , + }, + { + name: 'Quests', //'button:navigation:quests', + path: '/quests', + icon: , + }, + /* { + name: 'Achievements', //'button:navigation:quests', + path: '/achievements', + icon: , + },*/ + { + name: 'Campaigns', // button:navigation:campaigns', + path: '/campaigns', + icon: , + }, + { + name: 'Store', + path: '/store', + icon: , + }, +] + +const fn = [ + { + name: 'Feedback', //'button:navigation:faucet', + path: '/service/feedback', + icon: , + color: '#ffffff', + }, + { + name: 'Dashboard', //'button:navigation:faucet', + path: '/account/overview', + icon: , + color: '#ffffff', + }, +] + +const mid = [ + { + name: '9000', //'button:navigation:faucet', + path: '/account/achievements', + icon: , + color: '#ff00ff', + }, + { + name: '1337', //'button:navigation:documentation', + path: '/account/achievements', + icon: , + color: '#ff00ff', + }, + { + name: '42', //'button:navigation:documentation', + path: '/account/achievements', + icon: , + color: '#ff00ff', + }, +] + +const right = [ + { + icon: , + name: '1337', //'button:navigation:faucet', + path: '/account/balances', + }, + { + icon: , + name: '9000', //'button:navigation:documentation', + path: '/account/balances', + }, + { + icon: , + name: '42.42', //'button:navigation:documentation', + path: '/account/balances', + }, +] + +const Items = ({ items }) => { + return items + ? items.map((item) => ( + + + + + + )) + : null +} + +export function TopBar({ onSidebarOpen, sidebarOpen }: ComponentProps) { + const theme = useTheme() + const { t } = useTranslation() + const router = useRouter() + const isMd = useMediaQuery(theme.breakpoints.up('md'), { defaultMatches: true }) + const isLg = useMediaQuery(theme.breakpoints.up('lg'), { defaultMatches: true }) + const { endpoints, selectedEndpoint } = useGraphQlContext() + + const [tool, setTool] = useState(null) + + useEffect(() => { + if (!selectedEndpoint) return null + setTool([ + { + icon: , + name: selectedEndpoint.name, + path: '/set/network', + }, + ]) + }, [selectedEndpoint]) + + return ( + + + + + + + + + + + + + + + + ) +} diff --git a/apps/app/src/layouts/v5/index.tsx b/apps/app/src/layouts/v5/index.tsx new file mode 100644 index 00000000..c96f0592 --- /dev/null +++ b/apps/app/src/layouts/v5/index.tsx @@ -0,0 +1,136 @@ +import { useCallback, useState } from 'react' +import Head from 'next/head' +import { useConfig } from 'src/hooks/useConfig' +import { useCurrentAccountAddress } from 'src/hooks/useCurrentAccountAddress' + +import { Box, Container, Stack, useMediaQuery, useTheme } from '@mui/material' +// import { TopBar } from './components/TopBar' +import { Header } from './components/Header' +import { HeaderMobile } from './components/HeaderMobile' +import { Footer } from './components/Footer' +import { Sidebar } from './components/Sidebar' +// import { AnimatePresence, motion } from 'framer-motion' + +interface ComponentProps { + showHeader?: boolean + hideDApps?: boolean + showFooter?: boolean + showSidebar?: boolean + noContainer?: boolean + noBorder?: boolean + title?: string + children?: React.ReactNode + admin?: boolean +} + +// TODO: Should not be here/ configs and co +// const SITE_NAME = 'GameDAO' + +// const Transition = ({ children }) => ( +// +// {children} +// +// ) + +export function Layout({ + showHeader, + showFooter, + showSidebar, + children, + noContainer, + title, + noBorder, + hideDApps, + admin, +}: ComponentProps) { + const [sidebarOpen, setOpenSidebar] = useState(false) + const config = useConfig() + const theme = useTheme() + const isMd = useMediaQuery(theme.breakpoints.up('md'), { + defaultMatches: true, + }) + const connected = useCurrentAccountAddress() + + const toggleSidebar = useCallback(() => { + setOpenSidebar(!sidebarOpen) + }, [setOpenSidebar, sidebarOpen]) + + // const showTopBar = false + const baseSpacing = 90 + const spacing = showHeader ? `calc( 100vh - ${baseSpacing}px )` : `100vh` + const pageTitle = title + ? `${title} · ${config?.SITE_NAME || 'GameDAO — for better games'}` + : `${config?.SITE_NAME || 'GameDAO — for better games'}` + + return ( + <> + + {pageTitle} + + + + {/* {admin && } */} + {showHeader && + (isMd ? ( +
+ ) : ( + + ))} + + + {showSidebar && (isMd || sidebarOpen) && ( + + )} + {noContainer ? ( + + {children} + + ) : ( + + + + {children} + + + + )} + + + + + {showFooter &&