Skip to content
This repository has been archived by the owner on May 24, 2024. It is now read-only.

FRONTEND - Create a website widget for organization branded dHEDGE pools #1

Closed
edsonayllon opened this issue Mar 10, 2022 · 14 comments
Closed

FRONTEND - Create a website widget for organization branded dHEDGE pools #1

edsonayllon opened this issue Mar 10, 2022 · 14 comments

Comments

@edsonayllon
Copy link
Member

edsonayllon commented Mar 10, 2022 •
edited
Loading

Description

dHEDGE would like a widget created so external organizations can present their dHEDGE pool within their own site.

As an external organization, I'd like to present my dHEDGE pool within my own website, where users can connect their wallet, invest, and withdraw.

For now, the widget only needs to support dHEDGE on the Optimism network.

Ideally, the widget is an NPM package a user can import into their React project. Example from Uniswap: https://docs.uniswap.org/sdk/widgets/swap-widget.

Requirements

  • Should allow the following actions:
    • Connect wallet
    • Invest
    • Withdraw

The widget should take in a pool address and have the option to take in one image for the avatar. If no avatar is provided, generate one from the address using JazzIcon.

Like the Uniswap widget, the developers utilizing the npm widget will take care of connecting the user's wallet, and can pass down the web3 provider to the widget.

  • Should source the following data, using the dHEDGE subgraph, or calling the pool contract directly
    • User balance
    • Value managed (can be token price x token supply to keep things simple)
    • Pool name and manager name
    • Unique investor count (number of addresses holding this pool token)
    • Performance history
    • Performance fee
    • Lifetime return (can be found using the token price, as all pools start at $1)
    • Deposit assets
    • Know if the pool is a private pool, and the connected wallet address is whitelisted to invest in that private pool

Design

Rough mockup for the design. The widget is everything including and under the blue gradient. The pieces above are an example dapp containing the widget.

Screen Shot 2022-03-09 at 10 27 42 PM

For invest/withdraw, create a modal following the design used in https://app.dhedge.org.

Specs:

  • The dHEDGE app uses Tailwind CSS
  • Colors:
    • black: {
      DEFAULT: "#0c0d0d",
      dark: "#191a1a",
      medium: "#232424",
      light: "#313232",
      },
    • blue: {
      DEFAULT: "#00a0d0",
      light: "#7ae0ff",
      },
    • white: {
      DEFAULT: "#fdfdfd",
      },
    • red: {
      DEFAULT: "#dd0a3d",
      },
    • green: {
      DEFAULT: "#00c75b",
      },
    • Blue used in radial gradient: rgb(41 139 255 / 66%)

Contracts

Here are the contracts for optimism. Let me know if you need any other ones.

      "PoolFactoryProxy": "0x5e61a079A178f0E5784107a4963baAe0c5a680c6",
      "PoolFactory": "0x6CA177b0Ee3B1D352e6A9AF62a403FFd7E2013D1",

Here is the contracts repo for Optimism and Polygon, from which you can get the ABIs: https://github.com/dhedge/V2-Public.

dHEDGE Optimism Subgraph: https://thegraph.com/hosted-service/subgraph/dhedge/dhedge-v2-optimism.
@gitcoinbot
Copy link

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

This issue now has a funding of 3000.0 USDC (3000.0 USD @ $1.0/USDC) attached to it.

@gitcoinbot
Copy link

gitcoinbot commented Apr 7, 2022 •
edited
Loading

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

Work has been started.

These users each claimed they can complete the work by 264 years, 7 months from now.
Please review their action plans below:

1) mindsgn has started work.

I will create the widget using nextjs, react and typescript. and also convert it into a npm package.
2) woobinpro has started work.

Hi there, How are you?
I just saw your post and understood everything what you want.
Of course, I have rich experience in developing defi, dex, dao, NFT marketplace and launchpad.
https://app.alchemix.fi/
https://pppandas.com
http://dogebets.gg/
http://Nanopass.io
https://piggygang.com/
https://solsteinft.com/
https://app.quarry.so/
https://onlydice.io/
These are my previous projects.
So I am very familiar with react, typescript, web3 and ethers.js.
Please check my recent projects and if you are interested in me, please let me know when we can discuss about your project.
Then I will looking forward to hear from you soon.
Best regards
3) haulerkonj has started work.

I am senior web3 developer.
I am good at React.JS, TypeScrypt and Web3.js/Ethere.js.
I wanna take part in this project.
4) manyrios has started work.

Hey! I can help you with your website using nextJS and tailwinds, always following your requirements
5) skyc0der has started work.

Using Next.js and Tailwind, I will be able to set up the widget to be fully responsive with pixel perfect design as well as being performant. It will have the stated functionalities and be dynamic allowing the logo and avatar to be passed as props. This is a task that I can deliver up to speed.
6) pumpkin46 has started work.

Hi there. how are you?
I read your description carefully. I am very interested in that.
I am a full stack developer with rich experience in frontend and blockchain development.
I have already checked your project and it is built by antd UI and Tailwind. I am very familiar with them.
Also, i can start working right away. so please contact me. I will do my best.
I look forward to a great opportunity to work with you.
Best regards.
7) giorgiothegood has started work.

My task here is to create this widget completing what you are asking.
8) mushroomgenie has started work.

Hello,

I have gone through the requirements and I can implement the widget in React ( can be embedded on any website ). I have experience with Tailwind and for subgraph queries we can use either urql or apollo, depending upon the bundle size restriction. Once approved, will provide regular updates.

Thanks
9) gall0x has started work.

I'll make a widget fetching the subgraph and smart contracts events.

Learn more on the Gitcoin Issue Details page.

@edsonayllon
Copy link
Member Author

edsonayllon commented Apr 12, 2022 •
edited
Loading

Changed the bounty to be a contest. Anyone can start work, we'll approve the best one, and pay them out. Also, it will be permissionless, no approval is required to start work.

Apologies to anyone who preferred the traditional bounty type.

@pumpkin46
Copy link

Can i start working?

@edsonayllon
Copy link
Member Author

Can i start working?

yes

@edsonayllon
Copy link
Member Author

If anyone has questions, please reach out to me on the dHEDGE discord: https://discord.gg/PAcvThwVZD.

@pumpkin46
Copy link

Hi @edsonayllon.
I would like to discuss about your project. when are you free?
this is my discord id
pumpkin#5402

@edsonayllon
Copy link
Member Author

dHEDGE is deployed on Ethereum, Polygon, and Optimism. Reducing the scope of this widget to only support Optimism for now. So it doesn't need to be multichain at this point.

@edsonayllon
Copy link
Member Author

Also, I've updated the description of this issue to include a link to the dHEDGE Optimism contracts/abi and subgraph.

@edsonayllon
Copy link
Member Author

edsonayllon commented Apr 26, 2022 •
edited
Loading

Here. Sorry, the contracts repo I posted wasn't public. I posted the public one above.

Also, just an update, it's best if the widget was an NPM package that could be imported into a React app. That's what we're looking for. Example from Uniswap: https://docs.uniswap.org/sdk/widgets/swap-widget.

Thanks!

@edsonayllon
Copy link
Member Author

edsonayllon commented May 2, 2022 •
edited
Loading

Just as clarification for the scope, referencing the screenshot, no need to include the following features:

  • Profit/Loss
  • Benchmarking vs Ethereum and Bitcoin

Also, no need to pass a logo image, only an avatar image is required as an optional parameter. When no image is passed, use Jazzicon https://www.npmjs.com/package/@ukstv/jazzicon-react.

@gitcoinbot
Copy link

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

Work for 3000.0 USDC (3000.0 USD @ $1.0/USDC) has been submitted by:

  1. @mushroomgenie

@edsonayllon please take a look at the submitted work:

@edsonayllon
Copy link
Member Author

Hello everyone.

We created this bounty as our capacity was focused on the previous release. Now with that release deployed, our frontend team can take this task on. It seems we underestimated the amount of effort this project requires when creating the bounty.

We will be using a different approach to deal with this use case than an NPM package. Though, we gave a partial payout to the one submission we received.

We are closing this bounty now.

@gitcoinbot
Copy link

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

The funding of 3000.0 USDC (3000.00 USD @ $1.0/USDC) attached to this issue has been cancelled by the bounty submitter

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@gitcoinbot @edsonayllon @pumpkin46