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

Validate discord identity form front end using degen bot

Description

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

Files

components/pages/Bounty/Form

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.

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)

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

Add support for allowing multiple users to claim a bounty

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.

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

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

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.

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

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

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"

Description

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

Files

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

Description

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

Files

components/pages/Bounties

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

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

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

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

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

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:

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

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

Add uuid library through yarn

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

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

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

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.

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.

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.

Description

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

Files

pages/[id]/index.tsx

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.

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

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

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?

Should integrate with DEGEN bot SlinkyPotato/DEGEN#12

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.

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

[WIP]

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

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)

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

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)

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 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.

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

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

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.

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