Code Monkey home page Code Monkey logo

template-disco-app's Introduction

image

Networks πŸͺ© Disco App Template

Deploy with Vercel

Getting Started

The pnpm CLI is the recommended package manager but npm and yarn should work too.

pnpm install

Development

pnpm dev

Build

pnpm build

Web3 Core

Web2 Frameworks

Developer Experience

  • TypeScript – Static type checker for end-to-end typesafety
  • Prettier – Opinionated code formatter for consistent code style
  • ESLint – Pluggable linter for Next.js and TypeScript

User Interface

  • TailwindCSS – Utility-first CSS framework for rapid UI development
  • Radix – Primitives like modal, popover, etc. to build a stellar user experience
  • Framer Motion – Motion library for React to animate components with ease
  • Lucide – Beautifully simple, pixel-perfect icons

The ui.shadcn.com components are included in the /components/shared/ui folder.

πŸ’» Developer Experience

πŸ• What is husky

Husky improves your git commits.

You can use it to lint your commit messages, run tests, lint code, etc... when you commit or push. Husky supports all Git hooks.

πŸͺ Hooks

  • pre-commit: lint app codebase
  • commit-msg: apply commintlint

πŸ“‹ What is commitlint

commitlint checks if your commit messages meet the conventional commit format.

In general the pattern mostly looks like this:

type(scope?): subject  #scope is optional; multiple scopes are supported (current delimiter options: "/", "\" and ",")

Real world examples can look like this:

chore: run tests on travis ci
fix(server): send cors headers
feat(blog): add comment section

Common types according to commitlint-config-conventional (based on the Angular convention) can be:

  • build
  • chore
  • ci
  • docs
  • feat
  • fix
  • perf
  • refactor
  • revert
  • style
  • test

template-disco-app's People

Contributors

hexcowboy avatar kamescg avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

template-disco-app's Issues

Bounty: Use Programmatic Issuance to issue a Verifiable Credential via Disco API - USDC $400

πŸ‘¨β€πŸ’» User Story

As a developer I want to issue a Disco credential via the Disco API, based on some event, or button-click.

πŸ’° Bounty Reward

The bounty reward is $400 USDC, 50 OP tokens and a TurboETH DevPass digital collectible.
Sponsored by Disco and District Labs.

🧱 Project

Using the Disco API, issue a credential to an ETH address using the following endpoint:
POST https://api.disco.xyz/v1/credential

List of schemas can be found here: http://github.com/discoxyz/disco-schemas

Example Ideas:

  • Issue a GM Credential from a button click, after wallet is connected
  • Issue a Contribution Credential after submitting a form/airtable, after wallet is connected.
  • Issue a DarkModePref for selecting Dark/Light mode in an app, after wallet is connected.
  • Issue a GM credential to any recipient using a form for the wallet address

Encourage all ideas and creativity! You can use something like web3.js, or the WAGMI frontend library to grab the address.

Example Javascript Request:

var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");
myHeaders.append("Authorization", "Bearer <redacted>");

var raw = JSON.stringify({
  "schemaUrl": "https://raw.githubusercontent.com/discoxyz/disco-schemas/main/json/GMCredential/1-0-0.json",
  "subjectData": {},
  "recipientDID": "did:ethr:0xE6FF2d91f6EeEe8BDA4bCc562d63c431496FCf2A"
});

var requestOptions = {
  method: 'POST',
  headers: myHeaders,
  body: raw,
  redirect: 'follow'
};

fetch("http://api.disco.xyz/v1/credential/", requestOptions)
  .then(response => response.text())
  .then(result => console.log(result))
  .catch(error => console.log('error', error));

disco-access-controls

Potential File Structure

integrations/disco
β”œβ”€ actions/
β”‚  β”œβ”€ get-credentials-from-did.ts
β”‚  β”œβ”€ get-profile-from-address-simple.ts
β”‚  β”œβ”€ get-profile-from-address.ts
β”œβ”€ components/
β”‚  β”œβ”€ disco-profile-basic.tsx
β”‚  β”œβ”€ disco-profile-credentials.tsx
β”œβ”€ handlers/ NEW FOLDER
β”‚  β”œβ”€ use-verifiable-credentials-access-controls-route.ts
β”‚  β”œβ”€ use-verifiable-credentials-access-controls-page.ts
β”œβ”€ hooks/
β”‚  β”œβ”€ use-disco-get-credentials-from-did.ts
β”‚  β”œβ”€ use-disco-get-profile-from-address.ts
β”‚  β”œβ”€ use-disco-get-profile-from-did.ts
β”œβ”€ routes/
β”‚  β”œβ”€ route-credentials-from-did.ts
β”‚  β”œβ”€ route-disco-profile-from-address.ts
β”‚  β”œβ”€ route-disco-profile-from-did.ts
β”œβ”€ disco-client.ts
β”œβ”€ README.md

Notice

The final integration may not resemble the proposed integration - that's O.K - a natural part of software development.

During development you might discover an original hypothesis doesn't make sense. No problem. Make a comment and clearly explain why a new approach is better than old one. Get rewarded for thinking out of the box.

The final bounty reward can be increased to match new bounty tasks.

Bounty: Protected API routes and SSR pages using Disco API - $400 USDC

πŸ‘¨β€πŸ’» User Story

As a developer I want to protect pages and api routes using decentralized identity and verifiable credentials.

More specifically I want to use Disco's API services as the access controls systems for protecting my applications resources.

Have question?

Join the ⚑️TurboETH Discord channel

πŸ’° Bounty Reward

The bounty reward is $400 USDC, 50 OP tokens and a TurboETH DevPass digital collectible.

Sponsored by Disco and District Labs.

🧱 Project

Using the Disco API create page and api handlers to enable access controls using decentralized identity and verifiable credentials.

Required Functionality:

  1. Server Side Rendered (SSR) page gating using Official Disconaut Credential
  2. API gating using Official Disconaut Credential

How It Could Work:

  1. The handlers use the disco-client to request user's public verifiable credentials.
  2. If the authenticated account has an "Official Disconaut Verifiable Credential"

Developer Tasks:

  • Create Route handler - useVerifiableCredentialsAccessControlsRoute(...args)
  • Create Page handler - useVerifiableCredentialsAccessControlsPage(...args)

The handlers should be similar to the lib/server.ts methods that wrap withIronSessionApiRoute and withIronSessionSsr so authenticated user sessions can be accessed.

import { withIronSessionApiRoute, withIronSessionSsr } from 'iron-session/next'

import { NextApiHandler } from 'next'

import { SERVER_SESSION_SETTINGS } from './session'

export function withSessionRoute(handler: NextApiHandler) {
  return withIronSessionApiRoute(handler, SERVER_SESSION_SETTINGS)
}

export function withSessionPage(handler: any) {
  return withIronSessionSsr(handler, SERVER_SESSION_SETTINGS)
}

disco-access-controls

Potential File Structure

integrations/disco
β”œβ”€ actions/
β”‚  β”œβ”€ get-credentials-from-did.ts
β”‚  β”œβ”€ get-profile-from-address-simple.ts
β”‚  β”œβ”€ get-profile-from-address.ts
β”œβ”€ components/
β”‚  β”œβ”€ disco-profile-basic.tsx
β”‚  β”œβ”€ disco-profile-credentials.tsx
β”œβ”€ handlers/ NEW FOLDER
β”‚  β”œβ”€ use-verifiable-credentials-access-controls-route.ts
β”‚  β”œβ”€ use-verifiable-credentials-access-controls-page.ts
β”œβ”€ hooks/
β”‚  β”œβ”€ use-disco-get-credentials-from-did.ts
β”‚  β”œβ”€ use-disco-get-profile-from-address.ts
β”‚  β”œβ”€ use-disco-get-profile-from-did.ts
β”œβ”€ routes/
β”‚  β”œβ”€ route-credentials-from-did.ts
β”‚  β”œβ”€ route-disco-profile-from-address.ts
β”‚  β”œβ”€ route-disco-profile-from-did.ts
β”œβ”€ disco-client.ts
β”œβ”€ README.md

Notice

The final integration may not resemble the proposed integration - that's O.K - a natural part of software development.

During development you might discover an original hypothesis doesn't make sense. No problem. Make a comment and clearly explain why a new approach is better than old one. Get rewarded for thinking out of the box.

The final bounty reward can be increased to match new bounty tasks.

Resources

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.