banklessdao / bounty-board

This web app displays the bounties that are available for DAO members to claim.

DAO Bounty Board

Project Page: https://www.notion.so/bankless/Bounty-Board-318dc164cc5640cca17e0fb5f484fd90

Specifications:

• Specs page
• Figma
• Whimsical
• Heroku
• Possible Queries
• Data Fields
• Personas
• Bot flowchart

For full details on running the project locally, please see the 'getting started' section below.

Project Overview

Problem

Currently, Bankless DAO bounties are not in a centralized location causing confusion and makes it challenging for members, new and old, to contribute. Also Level 0's do not have intuitive ways to get involved and earn $BANK other than buying in the secondary markets.

Solution

For the DAO to grow, we need a way to attract, retain and coordinate talent. The bounty board, accessible to members and non-members will connect the DAO to a continually expanding talent pool.

In addition, we need a way to codify meaningful units of work. Given the diversity of jobs to be done in a DAO, the bounty board allows bounty creators to define and specify the scope of tasks along with expected deliverables.

Finally, we need a way to formalize the flow of capital, beyond an informal, organic tipping culture that exists to formally recognize contributors for their knowledge, skills and abilities.

The bounty board will be a key mechanism for coordinating talent, tasks and capital.

Minimal Viable Product 1.0

Bounty Card Definition

For the MVP, we are focusing on the bare requirements for a Bounty Card to be created by a user via DEGEN and/or Frontend UI, with the following key fields:

• Title: Bounty Titles should be like headlines
• Description: Provides space to flesh out the scope, deliverables and timeline for the bounty.
• Criteria: When is a task considered "done" or "complete"?
• Reward: Bounty creator indicates amount (i.e., 10000) and currency (i.e., $BANK) to be paid for completing the work.
• HashId: Auto-generated ID for each bounty.
• CreatedBy / RequestedBy: Bot automatically enters bounty creator's discordHandle.
• ClaimedBy: Bot automatially notes discordHandle claiming the bounty.
• SubmittedBy: Bot automatically notes discordHandle submitting the bounty.

User Experience Discord: Creating a Bounty with DEGEN

The follow description is of Serendipity in the Bankless Bot Garage, but is intended to mirror how DEGEN works in production.

1. Create: Bounty creator creates new bounty with /bounty create, inputing title and reward. DEGEN will dm you to input a description, requirements for completion and a due date (yyyy-mm-dd). DEGEN takes your input and returns a card with three options: 👍 publish, 📝 edit or ❌ delete

2. Create Multiple Bounties: Bounty creator creates new bounty with /bounty create, inputing title and reward. Then, hit tab to see an optional copies feature to create multiple bounties at once.

3. Edit: Select 📝 to edit. DEGEN provides a link to the frontend to edit any field. DEGEN then re-shows a newly edited card (and automatically publishes to #🧀-bounty-board channel)

4. Publish/Open: Bounty creator clicks thumbs up emoji 👍 or /bounty publish in Discord, bounty published to #🧀-bounty-board channel and website (url provided); status is now Open on website.

5. Claim/In Progress: Within #🧀-bounty-board Bounty claimer click black flag 🏴 or /bounty claim, entering the BountyId to 'start', card changes color in Discord, Bounty creator receives message that bounty has been claimed; Bounty card on website now has Claimed By; card status is now "In Progress".

6. Submit/In Review: Bounty claimer hits red mail box emoji 📮 in Discord, receives auto-generated message from DEGEN notifying the bounty is ready for review. They should reach out to the person who submitted the bounty. Alternatively, user can submit directly through a new bot command /bounty submit, entering HashId; card status is now "In Review".

7. Complete/Completed: Bounty claimer can signal completion ✅ on the post in the #🧀-bounty-board channel or directly through a new bot command /bounty complete true; card status is now "Completed".

Degen Commands

1. NOTE: DEGEN is available for use on any channel within the Bankless DAO discord (08/31/2021)
2. Enter / and see a list of commands pop up.

The following commands (and input fields) are available for DEGEN:

/bounty claim (bounty-id) /bounty complete (bounty-id) /bounty create (title)(reward) /bounty publish (bounty-id) /bounty list (list-type) /bounty delete (bounty-id) /bounty submit (bounty-id) /help bounty

Refer to the Bounty Board Commands and Workflow Notion Page for in-depth details.

User Experience Frontend: Claiming a Bounty

Note: Currently, the frontend mirrors the interaction with DEGEN in discord and displays changes in card status. Frontend interactions are suited for those wishing to claim bounties.

1. Claim: Click on any card that says Open. To claim, click the Claim it button. You will be re-directed to #🧀-bounty-board channel. Within #🧀-bounty-board Bounty click black flag 🏴 emoji. DEGEN present a link back to the frontend and a prompt to reach out to the Bounty Creator.

2. Frontend Status: In Progress: A link back to the frontend shows card status as "In Progress" and "Claimed By" claimer's discord handle.

3. Discord/Bot: Submit: Bounty claimer hits red mail box emoji 📮 in Discord to submit, receives auto-generated message from DEGEN indicating "bounty in review" and a link back to the frontend where status is now "In Review".

4. Discord/Bot: Complete: Bounty claimer can signal completion ✅ on the post in the #🧀-bounty-board channel. Bounty creator receives message to tip bounty completer.

5. Frontend Status: Completed: Back at the frontend, the bounty card status is now "Completed".

6. Discord/Bot: Draft: Bounty creator creates new bounty with /bounty create new; status is now "Draft" and not shown in Discord. Bounty creator must publish the bounty before it is available on the frontend.

7. Frontend Status: Open: Bounty creator clicks thumbs up emoji 👍 or /bounty create publish in Discord, bounty published to #🧀-bounty-board channel and website (url provided); status is now Open on the frontend.

8. Discord/Bot: Claim: Now that a bounty card is Open, we can click "Claim It".

9. Frontend Status: In Progress: Within #🧀-bounty-board Bounty click black flag 🏴 or /bounty claim to 'claim'. A link back to the frontend shows card status as "In Progress" and "Claimed By" claimer's discord handle.

10. Discord/Bot: Submit: Bounty claimer hits red mail box emoji 📮 in Discord, receives auto-generated message from Bot indicating "bounty in review".

11. Frontend Status: In Review: Card status on the frontend is "In Review".

12. Discord/Bot: Complete: Bounty claimer can signal completion ✅ on the post in the #🧀-bounty-board channel. Bounty creator receives message to tip bounty completer.

13. Frontend Status: Completed: Work is done.

Getting Started

With Docker

To run the project, copy the local .env.local file by copying the .env.qa for most variabled. Update the MONGODB_URI with the following URI

MONGODB_URI=mongodb://mongo:27017/bountyboard

To start the instance, you can run the following command

$ docker-compose up

Docker containerizes all the commands given below and helps you get started with the project without any hassle

Without Docker

In order to run a local instance of the application you will need to configure a few things.

Install Packages

You can either run the application from this top-level monorepo, or change into the packages/react-app directory. You will need the yarn package manager installed then run

$ yarn
$ yarn dev 

Which will install packages and run the application on port 3000. The package.json file in the respective repo gives a full list of commands.

Configure local .env file

The react application looks for an environment variables file named .env.local on starting. You can copy the .env.qa file for most of the variables. You will need to add the MONGODB_URI and DISCORD_BOUNTY_BOARD_WEBHOOK as covered below.

Setup MongoDB

Connection to MongoDB is handled through the Mongoose DRM. You can either connect to a hosted instance of MongoDB, or run a local development copy.

If running locally, your .env.local will contain something like:

MONGODB_URI=mongodb://localhost:27017/bountyboard

If connecting to a remote mongo server, your connection string will be in the format:

MONGODB_URI=mongodb://username:password@host:port/bountyboard

Please refer to the Mongoose docs for more information.

For help setting up MongoDB locally, see their installation instructions.

Setting Up Data in MongoDB

The app expects a MongoDB db bountyboard with the collection bounties, as specified in the json files within mongo/bounties, you can either maintain an instance of mongo manually, or use the prebuilt docker image (recommended).

Using Docker

Ensure you have docker and docker-compose installed (and running) on your desktop.

All the revelant files are in the mongo/ folder of the monorepo, to run the container:

cd mongo
docker-compose up

This should start the database on port 27017, and automatically seed with test data. The application will restart with fresh seed data everytime you run the docker compose command, so don't worry about messing it up.

The seed data handles:

• Loading bounty data with correct object ids
• Loading customer data with correct object ids
• Attaching the correct text index to the bounty data

Troubleshooting

I want to make changes to the data

Just edit the seed_customers.json or bboard_[version].json file, alternatively edit the seed.sh script and change the JSON file to load from.

mongo_seed exited with code 127

Indicates the seed script cannot be found, usually a problem with windows. Ensure line breaks are set as 'LF'

data is not updating

force Rebuild the container:

docker-compose up --build

Manually (Not recommended)

Use this approach if you do not want to use docker, or are having troubles installing it. Be mindful that this approach will be more error prone, you may instead want to request test access to the DB.

If you're firing up a fresh instance of Mongo, you will need to seed the database from the command line or discord, as the board does not currently have an 'add bounty` functionality.

If you're adding from command line, you can use the mongoimport utility to import one of the JSON files in the mongo/bounties folder.

Note: As of MongoDB 4.4 mongoimport is now a part of the MongoDB Database Tools package and must be downloaded seperately. For installation see the MongoDB Database Tools

$ mongoimport\
    --db bountyboard\
    --collection bounties\
    --file path/to/mongo/bounties/file.json\
    --jsonArray # only needed if loading an array

If you've made it this far, the application should run and should be showing a bounty on the main screen. You can directly query the API backend through the app at localhost:3000/api/bounties

Setting Up the Discord Webhook

The DISCORD_BOUNTY_BOARD_WEBHOOK is not required to start the app, but can be fetched from a member of the bounty board development team. Add it to your .env.local file once you have it.

bounty-board's Issues

Create a new "single bounty" page in place of old one

Description

The single bounty page needs to be updated to use Chakra UI and be separated into reusable components.

Files

pages/[id]/index.tsx

Add Website Metadata

Have the discord URL show a preview of the website. Might be able to do that by adding html metadata image file

https://stackoverflow.com/questions/62438757/how-to-make-a-link-preview-for-discord

Search bar doesn't work on web frontend

Steps to reproduce

1. Access https://bountyboard.bankless.community/
2. Type any letter into the search bar
   ACTUAL: All bounties are eliminated
   EXPECTED: bounties containing (or at least starting with) the letter are shown

Filter and Sorting ignores `scale` in `reward` object

Describe the bug

Reward is (partially) defined as:

reward: {
  amount: number,
  scale: number
}

And on the bountyboard/frontend, we calculate bounty $BANK value as reward.amount / (10 ^ reward.scale)
So an example, the bounty bank value would be:

5000 amount, 0 scale = 5000 BANK
10500 amount, 3 scale = 10.5 BANK

As it currently stands, this is not accounted for in the filters or the sort criteria. The bounty board just pulls in 5k vs 10.5k, which is incorrect.

To Reproduce
Steps to reproduce the behavior:

1. Add 2 bounties, 1 for 5000 with a scale of 0, 1 for 10,000 with a scale of 1 (reward of 1000)
2. Start sorting or filtering select "greater than 2000"
3. You will still see the 1000 in the frontend

Expected behavior
Sorting and filtering should adjust for decimal places provided by the scale field

There's a couple of ways we could do this:

1. Fancy Mongo Queries

You can write mongo queries to handle this in the case of "reward", HOWEVER, this kinda sucks:

• You need to do this for filtering ($lte, $gte), AND for sorting
• You need to treat "reward" entirely differently to other fields, so you add a lot of conditions

// this is JUST for the $gt case
db.bounties.find({
  $expr: {
    $gt: [
      {
        $divide: [
          "$reward.amount",
          {
            $pow: [10, "$reward.scale"]
          }
        ]
      },
    AMOUNT_OF_BANK_GOES_HERE_AS_NUMBER
  ]
}});

2. Client side
   We could just pull all the data and do a second stage filter on the client, this still involves writing a lot of extra logic

3. Add a new field to the bounties reward object

• I'd say this is the most sensible, here we just add a field like total which is simply calculated on Insert/Update as amount / 10 ^ scale

• It's then trivial to just filter by "reward.total", and sort by "reward.total"

Front End Mock

Develop a mock of the front end with:
Ability to create bounties
Ability to read bounties from the associated database

Github Actions integration

Github actions allows auto deployment across environments linux environments when certain triggers are executed.

New Feature Scenario

1. Dev creates feature branch
   • commit is pushed to feature branch
   • CI validates test cases on latest commit
2. Dev raises PR from feature branch -> develop
   • CI validates test cases on any review/commit
3. PR merged to develop
   • Github action deploys develop branch to shared test server
   • Dev validates feature in test discord guild
   • if all looks good then PR is raised to release branch
   • on any feedback changes are auto deployed to test server
4. PR raised from release branch -> main
   • CI validates test cases on release branch
   • admin/team validates PR
5. Release Merge
   • Github action deploys to production server

Implement API permissions for anything that isn't "Draft" status

Description

The current API lets anyone edit/delete any bounty at all. We need to lock out the permissions to match only allow allow ones with Draft status to be edited. This will get us to meet the MVP specs where a user can edit/delete their draft after creating it on Discord. They should not be able to edit/create/delete anything that isn't in Draft.

Additionally remove any ability to create new bounties.

Files

pages/api/[id].ts

Discord OAuth | Redirect on load

Discord OAuth has been implemented in feature/95_discord-oauth. Due to resource constraints, I have to pivot to the Multi-Tenancy story. There are additional UX features to implement to complete this story.

When the user first loads localhost:3000 (feature should work when in production the user loads bountyboard.bankless.community as well), redirect them to the URL below, in the same tab.

Use this redirect URL: "https://discord.com/api/oauth2/authorize?client_id=892232488812965898&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2F&response_type=code&scope=identify%20guilds%20guilds.join"

To close this issue, submit a PR from your local branch to feature/95_discord-oauth.

MongoDB Integration

Integrate with the mongo DB and use the DB schema

Proposed BountySummary and BountyDetail.
BountySummary:
BRN UUID (analogue to ARN)
String BountyTitle
String BountyGuild Double BountyReward
BountyDetail:
BRN UUID (analogue to ARN)
String BountyTitle
String BountyGuild
Double BountyReward
TimeStamp CreatedAt (ISO8601)
TimeStamp UpdatedAt (ISO8601) ?
String BountyDescription ?
String BountyDescriptionLink (link to notion)
String BountyImage
Boolean Claimed
String ClaimedBy
TimeStamp ClaimedAt (ISO8601)

Allow editing up to OPEN bounties

A special edit UUID will be generated every time the edit button is hit. This special key can be inserted into bounty db and verified from the front end using the same key passed in the url.

Rethink inclusion of `season` top-level field

Currently, season is a top level field for bounties that marks the season a bounty was created in.

https://github.com/BanklessDAO/discord-bots : CreateNewBounty.ts

As we migrate to multi-tenancy, we expect customers to not have consistent seasons with BanklessDAO. As well, customers may not use seasons or a similar concept.

The field is helpful for our analytics shareholders, however, the season number can be computed by performing a range query with ISO 8601 date-time values. Thus we have redundant data in our source of truth, which can lead to state invalidation.

Explicitly using the season field would require collection of season and date information from customers, and updating our customers collection with this information for each new season a customer would experience (since it's not guaranteed that seasons have equal lengths). It is also an unnecessary stressor on our go-to-market.

I recommend we remove storing the season field as part of our bounty data.

Proposal: Use pre-commit hook for linting and prettier

Description

I am a big fan of consistency when working in a repo as a team. The biggest issue I run into is that sometimes people forget to lint & format before they make a commit, and they end up not finding out about their issues until they get to the PR. Also dealing with formatting changes (like tabs vs spaces), can make for some unnecessary merge changes.

Solution

Utilize the husky to implement a pre-commit hook to run type-check, lint, and prettier whenever a commit is made. This would prevent anyone from making a commit with bad code.

Downside

You will hate yourself for not finding a silly type/linting error and having to fix it before your commit is made.

Update submit state for [id]/edit

Once a bounty has been submitted in the edit page, the status, statusHistory, and createdAt fields should be updated. Status should be set to "Open", and the new status and timestamp should be added to the statusHistory array. createdAt should grab the ISO timestamp at the time the submit button is pressed

Implement Multitenancy

To release the Bounty Board to external customers (i.e. DAOs other than Bankless) we will need to make changes to our data model, infrastructure, backend, and frontend code.

General strategy:
All bounty board customers go to bountyboard.bankless.community. When they authenticate with discord, we can get the list of servers they are in. If one of the servers is one of our customers, we present the option for the user to toggle to that customer’s bounty board.


As customers onboard with First Quests, we will deploy a togglable front end option for that customer. I’m imagining a popup when you click on the Bankless logo that displays a list of other servers that you can select a bounty board from. A customer will give us a logo and their primary color - no admin console.

[Rest of description WIP]
Design Decisions

• Data model: The mongo recommended multitenancy strategy for our use case is a single database with a single set of collections for all customers. All inserted or upserted documents will include a unique customer_id with an acceptable degree of randomness.

Describe the solution you'd like
Add primary color as a configurable input : #108
Add DAO logo as a configurable input : #109
Add customerId as inserted field in back-end:
Filter by customerId for bounties on front-end:
Add smaller DAO logo as toggle avatar :
Add customer specified guilds as a configurable input :

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Update the BountyForm component with the latest DB schema

Description

The BountyForm hasn't been updated to include the new fields used in the latest DB collection.

Files

components/pages/Bounty/Form

Application error: a client-side exception has occurred (developer guidance)

Describe the bug
Application error: a client-side exception has occurred (developer guidance)
Degen provides a discord user ID instead of the discord username? - can't reproduce so not 100% sure

To Reproduce
Steps to reproduce the behavior:

1. Go to bountyboard.bankless.community
2. Click on a bounty
3. Grab the HashID of the bounty
4. Navigate to bountyboard.bankless.community/HashID

Expected behavior
A 400 level error page

Screenshots

Discord Handle Validation

Validate discord identity form front end using degen bot

ReactJS basic template

Create a ReactJS basic template to display a html/css table.

Simplify our `reward` data schema

Referring to comment made on this issue: #117

[WIP]
Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Users of Bounty Board will want to sort bounties by reward type, and thus we need to be able to support reward type as a secondary index. We will eventually migrate from Mongo to take advantage of NoSQL databases with primary and secondary indices. This is a must have as we scale to perform back-end pagination and keep global level consistency in our API pagination and our UI pagination.

Bounty Board Claim button not correctly linking to the create bounty

Describe the bug
Clicking the claim button on a bounty directs you to http://https://bountyboard.bankless.community/

To Reproduce
Steps to reproduce the behavior:
http://https://bountyboard.bankless.community/
Click an open bounty
The claim link is populated as: https://bountyboard.bankless.community/
Clicking takes you to the top of the page.

Expected behavior
Click 'Claim' and takes you to the bounty.

Screenshots
https://app.usebubbles.com/4juX64EwSMSBMVtaaKTXNH/bankless-dao-bounty-board-bug-report-can-t-claim-task

Multitenancy | Add Primary Color as a configurable input

Why?
As a stakeholder in the customer experience, I should drive for customers to be able to configure important elements of their UX to fit with their brand and identity.

What story?
As part of the Multitenancy story, we have chosen the primary color of the front end as a design feature that customers can configure pre-deployment.

Describe the solution you'd like
Create a functional component or class called Configurations in a file named Configurations.ts
The component should have a parameter, customerId, that is used to query the customers collection in our mongodb.

@jordaniza will handle implementation details

Remove open bounties from being listed in the front end

Remove open bounties from being listed in the front end to avoid clutter. @Icedcool for more details

UUID Dependency

Add uuid library through yarn

DEGEN links broken when navigating to `/{bountyId}`

Describe the bug
DEGEN creates a nice summary of a bounty in discord, but then links to a page that comes up a 500 error

To Reproduce
Steps to reproduce the behavior:

1. Go to Discord
2. Click on any bounty
3. See error and weep

Expected behavior
We should have a page displaying the bounty information

Screenshots

Configure a Twitter Card to have a bountyboard link preview displayed on Twitter

Is your feature request related to a problem? Please describe.
Currently, if you post https://bountyboard.bankless.community/ in a tweet, there will not be a link preview. However, on discord, we have a preview to a wireframe from our early days:

Describe the solution you'd like
Use this issue as a placeholder to think about our link previews, and configure it for Twitter

Places to start
https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/getting-started

Pagination

Description

Once the list grows to be more than 5-10 bounties long it becomes a bit too much to expect users to scroll through the list.

Solution

1. Implement pagination on the API level where only a certain number of bounties get returned.
2. Implement pagination buttons at the bottom of the bounty list (see screenshot), which will query the API and show the bounty list for that page.

Example

Automate production deployment

Currently the app uses heroku for shared test environment deployment. Once app is in a good state we can work on production deployment similar to #2

Creating a bounty didn't post to #bounty-board and clicking claim on the front end refreshes the front page

Describe the bug
Created a bounty and Degen didn't create a bounty in the #bounty-board channel.
Currently unable to claim.

To Reproduce
Steps to reproduce the behavior:

1. /bounty create Bounty Board Outreach Proposal 1000
2. Defined the details and criteria
3. Click DRAFT
4. Modify the description
5. Create
6. Bounty is NOT created in #bounty-board channel and when hovering over the claim it button, it references the https://bountyboard.bankless.community

Expected behavior
When drafting and creating, the bounty is posted to #bounty-board channel.

Screenshots

Default show OPEN on the web frontend

Currently, when you load the bounties on the web frontend, it shows ALL bounties. This means that the user is presented with bunch of bounties that have nothing to do with them, and aren't really interesting. In fact, it can be confusing to the user if they don't understand the possible states - they can't find bounties they expect to see there (as per the session linked below).

Ideally, only OPEN bounties would be shown to start, and there would be some way to learn what each state means.

Identified in Writer's Guild Liaison session.

Add "Give us Feedback" and "Get Help" Links

Description

The bottom of the filters list has two buttons. One for "Give us Feedback" and one for "Get Help" (see screenshot). These do not currently work.

Solution

For MVP we want to link these to Discord channels.

Possible blocked by

We do not know which Discord channels to use.

Screenshot

Update Bounties components to use the new DB schema

Description

The components used for bounties need to use the new DB objects that are being used. There is certain incompatibilities at the moment, especially with the way guilds is mapped. Some refactoring will be needed to get this to read all the correct data.

Files

components/pages/Bounties

Integrate with Discord OAuth2

In order to build front-end functionality for creating and claiming bounties while keeping discord as the identity provider, Bounty Board will need to integrate Discord OAuth2 to authenticate future users and be granted authorization to perform operations on behalf of the user.

Until Connect Wallet functionality is implemented and displayed, the Discord OAuth2 status can be displayed in the same location as the "Join DAO" button above the "DAO Bounty Board" title - and we can override the button to join the Bankless server if the user is not already a member.

When first loading bountyboard.bankless.community, the user will be requested to authenticate with Discord OAuth2. This decision can be revisited when Connect Wallet auth is added.

Issue 105: [merged, author: @mosejs]

#105

Issue 104: [in flight, author: @moshejs]

#104

Implement a test suite for the bounty board

We do not currently have a test suite nor any automated test hooks built into the Bounty board, beyond the typescript compile time checks on commit.

This is something we will need to address as the application grows in complexity.

Looking at other banklessDAO projects, a proposal could be:

Stage 1:

• Implement a unit test suite in Jest to test the base functionality of the application
• Agree on a target coverage metric and begin writing tests to achieve said coverage

Stage 2:

• Add a pre-commit hook and/or github actions stage to run a suite of tests against the application on various OS
• This is so that we keep on top of testing as part of a continuous process

Stage 3:

• Add Cypress or another E2E testing suite, this does not need to be in any hook, but any developer can run the application and get a visual overview of the base functionality. At the same time, Cypress solves the problem of manually clicking and validating test cases.

Implement searching and filters for bounties

Description

We will need to implement functionality for searching and filtering the bounties.

Files

components/pages/Bounties/Filters
pages/api/bounties/index.ts

API Implementation

• Search query function
• Filter by Status
• Filter by Bounty Reward Value (min & max)
• Filter by Guilds (once implemented on the backend)

Component Implementation

• Search input with debounce
• Filter by Status
• Filter by Bounty Reward Value (min & max)
• Filter by Guilds (once implemented on the backend)
• Sort by Bounty Reward Value (ascending & descending)

Screenshot examples

Guild filters

Sort filters

Value filters

Mobile Styling needs fixing

Describe the bug

There are a couple of styling issues on mobile we need to fix

To Reproduce
Steps to reproduce the behavior:

1. Load dev tools and select the mobile emulator

Issue 1: Scrollbar on mobile is causing LHS alignment, intended behaviour would be full page width for a small device

Issue 2: Bankless logo needs re-ordering below the footer on a mobile device

Issue 3: Headers need center aligning on mobile

Issue 4: Mobile nav buttons all are of different width - are we sure that's intended behaviour?

Mobile and Desktop UI Redesign

[WIP]

Fix Netlify to build correctly

Description

I noticed after deploying my PR that Netlify gives a 404 error when trying to load the preview page. I think that there may be something wrong with the output pathing because of yarn workspaces but I am not sure.

Next steps

Review the logs and possibly try to find out what is going on.

Multiuser Claiming Support

Add support for allowing multiple users to claim a bounty

Add images to footer section

Description

The current footer is more of a placeholder but all of the pieces are there it just needs some work to get the social media icons on there.

What it should look like:

BountyPage component is being passed an incorrect id of "api" when hitting the /api route

Describe the bug
BountyPage component is being passed an incorrect id of "api" when hitting the /api route (without any additional path, so the full url is localhost:3000/api )

To Reproduce
Steps to reproduce the behavior:

1. Go to packages/react-app/src/pages/[id]/index.tsx
2. Add the debugger command to expose the call stack:

const BountyPage = (): JSX.Element => {
	const router = useRouter();
	const { id } = router.query;
	debugger
	return (
		<Layout title="DAO Bounty Board">
			<Bounties id={id} />
		</Layout>
	);
};

3. Run the app on localhost:3000, and navigate to localhost:3000/api
4. Step through the debugger until the app crashes. In the frame before, you will see the issue:

• The variable id is expected to be a string value corresponding to the objectId of the Mongo Document, instead, nextJS is extracting the value "api" and assigning it to the id variable.

• This id is then passed to SWR as a query to /api/bounties/api, which obviously returns nothing, you can see this in:
  packages/react-app/src/components/pages/Bounties/index.tsx

const { data: bounties, error } = useSWR(
   id ? `/api/bounties/${id}`: `/api/bounties?status=${status}&search=${debounceSearch}`,
   fetcher
)

This cascades to an unhanded error in dev because we are trying to access a property bounties.createdBy.discordHandle on a non existent bounties.createdBy.

Expected behavior

• We should catch errors if there is no bounty data fetched from SWR
• The /api route should not pass the string "api" to SWR as a query

Desktop (please complete the following information):

• OS: Linux Fedora 34 w. GNOME
• Browser Brave (Shields off)
• Version development

Feedback & Need Help links are reversed

Describe the bug
The link for the "Give us Feedback" is to the support Discord channel and the link for the "Need Help?" button is to the feedback form.

To Reproduce
Steps to reproduce the behavior:

1. Navigate to https://bountyboard.bankless.community/
2. Click on "Give us Feedback"
   a. bug: you are taken to the support channel
3. Click on "Need Help?"
   a. bug: you are taken to the feedback form

Expected behavior
These links should be reversed. "Give us Feedback" should link to the feedback form and the "Need Help?" button should link to the support channel.

Desktop (please complete the following information):

• OS: Windows
• Browser: Chrome
• Version: 95.0.4638.54

Refactor Bounty form to use Chakra UI

Description

The current form is not using Chakra UI and will need to be refactored.

Files

pages/[id]/edit.tsx
components/pages/Bounty/Form

Implement claim linking to Discord

Description

The Claim It button should link to a direct link to the bounty post on Discord.

Files

components/pages/Bounties

DEGEN error on submit but it seems to have been successful.

Describe the bug
I submitted a bounty for review using DEGEN with a url attachment. DEGEN told me "Sorry something is not working and our devs are looking into it.", but the bounty was in review.

Bounty ID was 61896f4f5f6f5200201b38d1 if that helps

Update data schema with latest bounty board DB collection schema

Description

The database has been changed to use a new collection with a different schema, we need to update the data model that is used in the front end.

Files

models/Bounty.ts

Multitenancy | Add DAO logo as a configurable input

Why?
As a stakeholder in the customer experience, I should drive for customers to be able to configure important elements of their UX to fit with their brand and identity.

What story?
As part of the Multitenancy story, we have chosen the DAO logo in front end as a design feature that customers can configure pre-deployment.

Describe the solution you'd like
Create a functional component or class called Configurations in a file named Configurations.ts
The component should have a parameter, customerId, that is used to query the customers collection in our mongodb, and grab a URL to the hosted logo.
The customer chosen logo should sit in place of the Bankless logo.

Description [WIP]

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Allow filtering of web frontend by "type" of work

Currently on the web frontend, you can only filter by bounty state. It would be helpful (when there are more bounties) to be able to filter by type of work (i.e. writing, development, design, etc)

DEGEN bot integration

Should integrate with DEGEN bot SlinkyPotato/DEGEN#12

Discord OAuth | Display avatar

Discord OAuth has been implemented in feature/95_discord-oauth. Due to resource constraints, I have to pivot to the Multi-Tenancy story. There are additional UX features to implement to complete this story.

Describe the solution you'd like
Display Discord PFP. Using the user object returned in the Discord OAuth flow, query the discord CDN for a user's avatar and display in place of the 'Join DAO' button. Display avatar as 30 x 30 pixels, and display the username and discriminant next to it like in the example from sesh bot in the third image below.

Links to the discord avatars for a user reside in a link like: cdn.discordapp.com/avatars/464797917350461450/0026f9b54f6b07470103fc61df071f3a.png
https://cdn.discordapp.com/avatars/user_id/user_avatar.png

Documentation: https://discord.com/developers/docs/reference#image-formatting-cdn-endpoints

The user object returned by the discord object has the following fields (my user object as an example):
accent_color: 16557085

avatar: "0026f9b54f6b07470103fc61df071f3a""

banner: null

banner_color: "#fca41d"

discriminator: "1111"

flags: 0

id: "464797917350461450"

locale: "en-US"

mfa_enabled: true
public_flags: 0

username: "Behold"

The changes for OAuth have been implemented in src/components/global/Header/index.tsx

To close this issue, submit a PR from your local branch to feature/95_discord-oauth

Discord handles are mangled in web frontend

Steps to reproduce

1. Use DEGEN to create a new bounty, copying your discord handle into the text as a link (i.e. contact links#7868 when completed)
2. View your bounty on the web frontend: https://bountyboard.bankless.community/
   ACTUAL: your discord handle shows up as a string of numbers
   EXPECTED: your human-readable discord handle (or even better, a link to msg on discord)