v0.1.0

SecureSECO DAO Webapp v0.1.0

Setup

env

• .env.production for production-specific variables
• .env.development for development-specific variables
• .env for all other environment variables

Configurations

• .eslintrc.cjs
  • plugins for tailwind, react and prettier
• .gitignore
• .prettierignore
• jest.config.ts
  • Made sure to add path alias so that imports works how they should using @/
• postcss.config.cjs
• prettier.config.cjs
  Our styling rules to make the code more consistent (also for future developers)
• tsconfig.json
  • Base tsconfig, plus path alias @/
• tsconfig.node.json
• vite.config.ts
  • Added path aliases, so that imports work on runtime

Favicon

Added favicon support, so that it works on every device and also older browsers.

• favicon.ico
• public/favicon.svg
• public/apple-touch-icon.png
• public/google-touch-icon.png

Components

Here a list of custom components added in v.0.0.1, most components use radix-ui for functionality and accesability

UI Components

Most of these UI components are inspired by shadcn's open source UI library, but adapted to fit our webapp.

• Accordion (src/components/ui/Accordion.tsx)
• Address (src/components/ui/Address.tsx)
  Custom address component that shows an address with a custom length, truncated in the middle. It will link to a blockexplorer as well. It also has a copy and Jazzicon option. Complete with tooltips and toasts.
• AlertDialog (src/components/ui/AlertDialog.tsx)
• Button (src/components/ui/Button.tsx)
• Card (src/components/ui/Card.tsx)
• CategoryList (src/components/ui/CategoryList.tsx)
  Component that displays a list of the specified catgories, separated by horizontal lines.
• ConnectWalletWarning (src/components/ui/ConnectWalletWarning.tsx)
  Shows a warning that the user needs to connect their wallet to perform the action specified
• Dialog (src/components/ui/Dialog.tsx)
• Dropdown (src/components/ui/Dropdown.tsx)
• ErrorWrapper (src/components/ui/ErrorWrapper.tsx)
  Wrapper around inputs that shows react hook form errors below inputs that it wraps.
• Header (src/components/ui/Header.tsx)
  Custom header component that gives us consistent styling for our h1,h2 etc.
• HeaderCard (src/components/ui/HeaderCard.tsx)
• Input (src/components/ui/Input.tsx)
• Label (src/components/ui/Label.tsx)
• Legend (src/components/ui/Legend.tsx)
• Link (src/components/ui/Link.tsx)
  The Link component is a pre-styled link element based on react-router-dom. It extends the RouterLink component with additional styling and accepts both icons and labels.
• Loader (src/components/ui/Loader.tsx)
  Custom loader component that shows a pulsing greyed out background.
• MainCard (src/components/ui/MainCard.tsx)
  Custom card for the main card of the page with title etc.
• Progress (src/components/ui/Progress.tsx)
• RadioGroup (src/components/ui/RadioGroup.tsx)
• Select (src/components/ui/Select.tsx)
• SortSelector (src/components/ui/SortSelector.tsx)
• StatusBadge (src/components/ui/StatusBadge.tsx)
• Tabs (src/components/ui/Tabs.tsx)
• Textarea (src/components/ui/Textarea.tsx)
• TextareaWYSIWYG (src/components/ui/TextareaWYSIWYG.tsx)
  Custom markdown editor using tiptap.
• TimeZoneSelector (src/components/ui/TimeZoneSelector.tsx)
  Custom TimezoneSelector component that shows a dropdown containing all possible time zones.
• Toast (src/components/ui/Toast.tsx)
• Toaster (src/components/ui/Toaster.tsx)
• Toggle (src/components/ui/Toggle.tsx)
• Tooltip (src/components/ui/Tooltip.tsx)

Other Components

Components for rendering the SecureSecoLogo, might be moved to a seperate folder later.

• Logo (src/components/Logo.tsx)
• LogoFull (src/components/LogoFull.tsx)

Dashboard Components

• MembershipStatus (src/components/dashboard/MembershipStatus.tsx)
  Membership banner, that shows if a user is verified or that his verification status might expire soon.
• MembersList (src/components/dashboard/MembersList.tsx)
  Component that shows a selection of members of the DAO on the dashboard

Governance Components

• ProposalCard (src/components/governance/ProposalCard.tsx)
  Special card component for proposals that shows proposal data.
• ProposalTag (src/components/governance/ProposalTag.tsx)
  Special tag component for proposals, shows countdown, yes/no percentage, or the actions that the proposal will do

Layout Components

• ConnectButton (src/components/layout/ConnectButton.tsx)
  Web3 connect button that connects the webapp with the user's wallet using web3modal and Jazzicon.
• Layout (src/components/layout/Layout.tsx)
• Navbar (src/components/layout/Navbar.tsx)
• ThemePicker (src/components/layout/ThemePicker.tsx)
  Themepicker in the navbar where users can select light, dark or system color mode.

newProposal

Components for the creation of newProposal

• actions
  • ChangeParametersInput (src/components/newProposal/actions/ChangeParametersInput.tsx)
    Component containing inputs for changing DAO parameters action.
  • MergePRInput (src/components/newProposal/actions/MergePRInput.tsx)
    Component containing inputs for merging PRs action.
  • MintTokensInput (src/components/newProposal/actions/MintTokensInput.tsx)
    Component containing inputs for minting tokens action
  • WithdrawAssetsInput (src/components/newProposal/actions/WithdrawAssetsInput.tsx)
    Component containing inputs for the withdrawing assets action
• steps
  • Actions (src/components/newProposal/steps/Actions.tsx)
    Step that enables you to add actions to your proposal. Currently has 4 different actions (see ./src/components/newProposal/actions folder)
  • Confirmation (src/components/newProposal/steps/Confirmation.tsx)
    Component for displaying the confirmation step in a new proposal
  • Metadata (src/components/newProposal/steps/Metadata.tsx)
    Component for displaying the metadata step in a new proposal (Like title, summary etc)
  • Voting (src/components/newProposal/steps/Voting.tsx)
    Component for displaying the voting step in a new proposal (like vote duration and voting type)

proposal components

Components for displaying details about already created components.

• actions
  • ActionWrapper (src/components/proposal/actions/ActionWrapper.tsx)
    General wrapper for a proposal action that includes an icon and title inside of an accordion
  • DefaultAction (src/components/proposal/actions/DefaultAction.tsx)
    Default action component, for when it has not yet been supported specifically
  • MergeAction (src/components/proposal/actions/MergeAction.tsx)
    Component that shows the details of a merge action
  • MintAction (src/components/proposal/actions/MintAction.tsx)
    Component for displaying mint proposal actions
  • ProposalActionFilter (src/components/proposal/actions/ProposalActionFilter.tsx)
    Component for filtering proposal actions to see which component it needs to use.
  • WithdrawAction (src/components/proposal/actions/WithdrawAction.tsx)
    Component for displaying withdraw proposal actions
• ProposalActions (src/components/proposal/ProposalActions.tsx)
  Component for displaying proposal actions (uses the Proposal ActionFilter to select wich action component it needs to use)
• ProposalHistory (src/components/proposal/ProposalHistory.tsx)
  Component for displaying proposal history
• ProposalMilestone (src/components/proposal/ProposalMilestone.tsx)
  Component for displaying proposal milestones
• ProposalResources (src/components/proposal/ProposalResources.tsx)
  Component for displaying proposal resources
• ProposalVotes (src/components/proposal/ProposalVotes.tsx)
  Component for displaying proposal votes, a main card with information about the vote and contains VotesContent
• VotesContent (src/components/proposal/VotesContent.tsx)
  Component for displaying vote content in proposals, all the options and showing the address who voted and with how much REP.

verification Components

• PendingVerificationCard (src/components/verification/PendingVerificationCard.tsx)
  Component for displaying pending verification cards
• RecentVerificationCard (src/components/verification/RecentVerificationCard.tsx)
  Component for displaying recent verification cards
• StampCard (src/components/verification/StampCard.tsx)
  Component for displaying stamp cards the user has.

Icons

Added custom components that are not available to react icons library. See readme for more info.

• Activity (src/components/icons/Actitivy.tsx)
• Check (src/components/icons/Check.tsx)
• CheckList (src/components/icons/CheckList.tsx)
• DoubleCheck (src/components/icons/DoubleCheck.tsx)
• History (src/components/icons/History.tsx)
• Loading (src/components/icons/Loading.tsx)

Pages

• Dashboard (src/pages/Dashboard.tsx)
  Home page displaying:
  • Membership status of the Dao (verified or not, or if your verification will expire in a short while)
  • Metadata of the DAO (name, links to Search Seco site, logo, address of the DAO etc)
  • Recent Proposal overview for the DAO
  • Member overview for the DAO
  • Treasury transfer overview for the DAO
• Governance (src/pages/Governance.tsx)
  Governance page displaying:
  • Recent proposals, with filter options
  • Option to create new proposals
• NewProposal (src/pages/NewProposal.tsx)
  Multi-step creation form with the following steps:
  • Step 1: Name, description, summary, and recourses form
  • Step 2: Voting type and duration
  • Step 3: Add multiple actions: Withdraw assets, merge Pull requests, mint Rep, And change plugin parameters.
  • Step 4: Verify and double-check proposal creation
• Proposal (src/pages/Proposal.tsx)
  Displays details about a proposal
  • Proposal Name, descrip...