Introduction

• This document provides an overview of ShopDAO generator dApp's frontend architecture, outlining the key components, workflows, and best practices to ensure a seamless and secure user experience.

System Components

Sample Status

• Web Interface: The user-facing part of the dApp, built with React.
• Wallet Connection: A connection to the user's wallet, using MetaMask.
• Blockchain Network: The Ethereum network for deploying smart contracts and executing transactions.
• Smart Contract: A Solidity-based smart contract that governs the dApp's logic.
• Data Storage: A decentralized storage solution, such as IPFS, for storing data off-chain.

Workflow Diagram

<aside> ☝️ In the following (SC) means Smart Contract. Sometimes show that Unknown error: Error Diagram sequence already registered. so attached is some diagram image.

</aside>

1. Integration with Shopify workflow diagram on dAppGUI

sequenceDiagram
		actor BrandManager
		BrandManager ->> dApp: Input form w/ ShopifyAPI key
    dApp ->> ShopifyAPI: Any?
    Note over ShopifyAPI,Brand EC on Shopify:Integration w/ Shopify EC
    ShopifyAPI ->> dApp: Info of the EC

2.Create Brand’s DAO on dApp workflowDiagram

sequenceDiagram
	actor BrandManager
	# Note right of dApp: Also, existing ERC721 tokens can be set as Governance Tokens. <br />Verification is required.
  BrandManager ->> dApp: Input form to create Brand's DAO
  
  dApp -->> (SC)DAOFactory: Information for deployment, execute deploy script.
  Note right of (SC)DAOFactory: Use create() to generate the contract for the Brand's DAO, then create Brand's DAO.
  (SC)DAOFactory ->> dApp: Return the addresses of the deployed contracts<br />- Timelock<br />- Governor<br />- Governance Token<br />-

3. Create productPropose() and profit right workflowDiagram

sequenceDiagram
	actor BrandManager
  BrandManager ->> dApp: Input form of Proposal Detail and new ProfitRightNFT info
  dApp ->> (SC)Governor:productPropose()
	(SC)Timelock ->> (SC)ProfitRightNFT: Mint new id NFT for profit NFT when productpropose status is succeed status.
	
	actor BrandDAOMember
  actor GeneralUser
  BrandDAOMember ->> dApp: purchace profitRightNFT
  dApp ->>(SC)ProfitRightNFT: claim()
  GeneralUser ->> dApp: purchace profitRightNFT
	dApp ->> (SC)ProfitRightNFT: claim()