The Claimed/Unfunded checkboxes look fine on large screen, but on small screens we realize they are different sizes.

Can we make them the same standard length and align them in the middle?

Description
People won't know how to use OpenQ when they first land on the site. So let's show'm!

There should be a small, unobtrusive yet still attention-grabbing banner that says "New to OpenQ? Watch the demo!" or something of the like on the first launch.

This will link to a quick demo, or the docs.

Getting Started
This component doesn't yet exist - must be made from scratch

A new FirstLaunchService.js should be made in https://github.com/OpenQDev/OpenQ-Frontend/tree/development/services and imported into https://github.com/OpenQDev/OpenQ-Frontend/blob/development/store/Store/InitialState.js for use throughout the app.

This service should save a firstVisit or something to window.localStorage to tell across visits if it's their first visit to the site

This way, we can make a MockFirstLaunchService.js which can always return true/false for testing

Description

Organization Card
Card

• Logo
• Name
• Total Value Locked in USD
• Open Bounties Badge on top right of logo

List

• 1 -4 Cards in a row
• Responsive on resize

Mock Ups
Screenshot of inspiration for individual card and list: https://imgur.com/a/95mAIQS

Essentially the same as the above is fine, just white is fine.

Qualifications

• Where the "Join" button is should instead be the TVL shown in USD like $143.43
• The number badge can be the same. It will represent openBounties.

Additional Requirements
Responsive on screen compression down to mobile size - can just choose reasonable breakpoints to go from four cards down to one card.

Getting Started
Implementation can take place in OpenQHomepage.js and OrganizationCard.js.

Here is the organization data structure that will be passed to the OrganizationCard.js component as a prop:

{
	"id": "MDEyOk9yZ2FuaXphdGlvbjc3NDAyNTM4",
	"payouts": [],
	"payoutTokenBalances": [],
	"bountiesCreated": [
		{
			"bountyAddress": "0x75537828f2ce51be7289709686a69cbfdbb714f1",
			"bountyId": "I_kwDOE5zs-M480ik8",
			"bountyMintTime": "1639269180",
			"bountyClosedTime": null,
			"status": "OPEN",
			"deposits": []
		}
	],
	"name": "OpenQ",
	"login": "OpenQDev",
	"createdAt": "2021-01-13T16:10:08Z",
	"description": "Ethereum on top of GitHub",
	"email": "[email protected]",
	"websiteUrl": "https://openq.dev",
	"avatarUrl": "https://avatars.githubusercontent.com/u/77402538?v=4",
	"isVerified": false,
	"descriptionHTML": "<div>Ethereum on top of GitHub</div>",
	"twitterUsername": "OpenQDev",
	"url": "https://github.com/OpenQDev"
}

Feel free to just comment out any network requests and directly pass the Organization Cards mock data!

What is Not In Scope
Data fetching

error handle connect wallet bugs

It seems in dev and on my local that Show Claimed is erroring - showing more than it should be.

Steps To Recreate:

1. Go to https://development.openq.dev
2. Enter user foo password okay
3. See there are no issues shown
4. Click Show Claimed - shows all issues
5. Uncheck Show Claimed - still shows all issues but in different order

People's address is their account id.

Once connected and on the correct network, when they click on their account button like "0x709...4d3s", they should be redirected to a page like https://www.development.openq.dev/account/{address}

For now the page can show their address. In the future, it will show their stats, favorites, etc.

After a bounty has been claimed, we should have a simple grey border for the deposit cards.

Instead of "Locked Until" it should just be the amount and nothing else.

Description

Mock Ups

Qualifications

Additional Requirements
Responsive on screen compression down to mobile size - can just choose reasonable breakpoints to go from four cards down to one card.

Getting Started
Implementation can take place in [organization].js](https://github.com/OpenQDev/OpenQ-Frontend/blob/main/pages/organization/%5Borganization%5D.js).

Here is the organization data structure that will be passed to the OrganizationCard.js component as a prop:

{
	"id": "MDEyOk9yZ2FuaXphdGlvbjc3NDAyNTM4",
	"payouts": [],
	"payoutTokenBalances": [],
	"bountiesCreated": [
		{
			"bountyAddress": "0x75537828f2ce51be7289709686a69cbfdbb714f1",
			"bountyId": "I_kwDOE5zs-M480ik8",
			"bountyMintTime": "1639269180",
			"bountyClosedTime": null,
			"status": "OPEN",
			"deposits": []
		}
	],
	"name": "OpenQ",
	"login": "OpenQDev",
	"createdAt": "2021-01-13T16:10:08Z",
	"description": "Ethereum on top of GitHub",
	"email": "[email protected]",
	"websiteUrl": "https://openq.dev",
	"avatarUrl": "https://avatars.githubusercontent.com/u/77402538?v=4",
	"isVerified": false,
	"descriptionHTML": "<div>Ethereum on top of GitHub</div>",
	"twitterUsername": "OpenQDev",
	"url": "https://github.com/OpenQDev"
}

Feel free to just comment out any network requests and directly pass the Organization page mock data!

What is Not In Scope

A hopefully quick one! Just make it the same color.

body of test2

just do it

Hardhat relies on ethereum-utils which relies on keccak and secp256 which very unfortunately have Python dependencies.

Hardhat is used in both OpenQ-Frontend and OpenQ-Contracts repositories.

This issue is resolved once the correct apk installation of python3 is added and configured in the Dockerfile.dev and Dockerfile or OpenQ-Frontend and OpenQ-Contracts such that the line RUN yarn succeeds rather than fails with the all-to-well-known node-gyp errors.

It must be compatible with node:lts-alpine as this is the base image we are using (equivalent is Node 17.0 I believe) and python3.

NOTE! Python2 is dead (https://www.python.org/doc/sunset-python-2/). The APK package doesn't exist. Ignore online forums suggesting you RUN apk add python as it will fail.

Some guidance from the webs:
https://dev.to/grigorkh/node-gyp-support-in-alpine-linux-4d0f
https://stackoverflow.com/questions/54428608/docker-node-alpine-image-build-fails-on-node-gyp

DESCRIPTION
I love how the Deposit Card looks - I think a similar treatment would be good for the Refund cards.

They're quite skeleton right now -

In order to see them, you'll need to connect an account which is the sender of the Deposit it is linked to, since we pre-filter on that like so:

	bounty.deposits
		.filter((deposit) => {
			return (ethers.utils.getAddress(deposit.sender.id) == account);
		})

NOTES:

• Some nice way to show 'Your Deposits' header and the 'Refundable', 'Not Yet Refundable' and 'Refunded' deposits.
• Having the DepositCards laid out just like the organization cards makes sense, several in one row since they're small, adjustable on mobile view down to 1 per column
• The Refund button should only be on cards in the Refundable section. It should not be present on the Not Yet Refundable section or the Refunded section
• Show null messages like "No refundable deposits" and "No refunded deposits" and "No non-refundable deposits" for each of the sections if there are zero deposit cards in them

Should blend into background:

Since contributors will want to know how long the bounty TVL is guaranteed at it's current level, they'll need to see the deposit history on the issue.

I've piped the data to the right place, but have yet to:
A) Show the correct token symbol, volume and price
B) Show the list in a compelling way

Bonus Maybe have the deposit cards be different colors like green, yellow red across a gradient depending on how soon before they are refundable. This is a kind of "heads up" to contributors if a large deposit is red and will become refundable in a day or two. They should request the deposit be extended

Description

We should have the possibility to filter and sort through the list. Important filters are funded vs not funded, claimed vs open. Sorting features like higher vs lower, new vs old.

Additional Requirements

By default, we should only display open issues that are funded going from newest to oldest.

Beep boop bop

body of test1

We now have a custom useCheckFirstLaunch hook: https://github.com/OpenQDev/OpenQ-Frontend/blob/development/hooks/useCheckFirstLaunch.js

Time to add this to the right page (I think index.js but could be wrong), run it ONCE on rendering, to show/hide a thin banner saying "Welcome to OpenQ! Since it's your first time with us, checkout our demo.

I tried doing this, but a double render caused it to always say false to firstLaunch since it ran twice...

In development.openq.dev, I've thought that sorting Oldest/Newest wasn't ordering correct, with issues from 2022 appearing interspersed with issues from 2021.

But then I realized that was because I was looking at the ISSUE CREATION TIME which we display. Not the BOUNTY MINT TIME, which we don't display.

This confused me - and if it confused me and I'm making the platform then it will confuse others im sure 🤷🏼‍♂️

Can we add a "Minted on " string to the bounty cards and bounty details page?

Additionally, let's updated "Opened on" to "Issue opened on" to make it clear that this is GitHub data and not OpenQ data

For consistency, the proportions of the search bar and mint bounty button should match the Homepage, like this:

Description
When user goes to Bounty page like https://staging.openq.dev/bounty/0x4453fd7946e61427973480dd84f612fd90e5a0c2 and clicks Fund, and then clicks to choose their token, the list is too large for the screen, non-responsive, and also doesn't close when user clicks outside of Token Select modal

Task 1: Make the Token List fit to the screen
Task 2: Be able to click outside the TokenSearch modal to close it
Task 3: Make sure it's responsive on mobile

Getting Started

Dev locally so you don't have to deal with...the Internet.

Terminal 1

yarn json-server

Terminal 2

yarn boot:local

Implementation will likely take place in the following files:

TokenSearch which contains the TokenList

The Token list and Metadata is loaded from local-tokens.json. I made it intentionally long to reflect production.

Right now we make one GH request for each and every GitHub issue we fetch. Gross and slow!

This story is to use the batch fetching functionality of GitHub's GraphQL API to fetch a whole batch of issueId's in one go, making a dozens to hundreds of requests a single request.

This will be great for Organization BountyList and the Homepage BountyList, both of which currently fetch one issue at a time.

Batching looks like this:

{
 nodes(ids: ["I_kwDOGAqhQc48U54v", "I_kwDOGWnnz85AkiDt"]) {
   ...on Issue {
     body
     [other issue things...]
   }
 }
}

Working Files

Work will be done in:

• GithubRepository

• queries used by that GitHub Repository

Additional Requirements

Please update the MockGithubRepository and the mock-server.json as well to allow for local environment and eventually testing

Closes #123

Should be in this order:

Unclaimed/Claimed
[If claimed] Claimed on:
Bounty Created on:
Issue created on:

Each of the above should have the same date format

At small-medium width, there's a breakpoint where Show Unfunded bounces up beside the Sort By List:

I don't particularly care about that since it's only for like 50 pixels - I only point it out in case it might rear it's head later as an annoying piece of tech debt.

Best to address these small things early before they grow!

Confetti? Explosions? Bring back the <blink> HTML tag? I want some creative ideas on my desk by noon. Stat!

Balancer.fi has confetti which makes me say "take my money!"

Most sites at least have a little green check.

Let's do something unique, like...a puzzle completing or something.