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.

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.