# SuperFluid Console - MVP Notes

Through an explorer, SuperFluid Console enables users to query information about Superfluid which isn't surfaced by Etherscan/Blockscout, for example streams and IDA related information. It also enables users to save addresses to an address book.

Through an operational interface, the console enables users to create tokens and request us to do things (i.e. register tokens on our resolver)

[Original Spec](https://www.notion.so/Superfluid-Console-Spec-29af58065ded47ada6a074a67f61f038)
[Official Proposal](https://hackmd.io/Nl4tdbQkStewyupJ5AWQBQ)

---

[Notion Doc - Project Management](https://cheerful-candytuft-4c7.notion.site/56b45ef0a01a49f0b0d50f3e35a9f99d?v=01639934d957481fb8f48dc05a01e529)
[Frontend Repo](https://github.com/raid-guild/superfluid-console.git)
[Old Figma](https://www.figma.com/proto/HzN8tq5NrqPO0Ern7cSzeq/Protocol-Console?node-id=1%3A3)
[New Figma](https://www.figma.com/file/DnQawXgrCyQftPWssu3p7j/SuperFluid-Raid?node-id=0%3A1)
[Network Directory](https://docs.superfluid.finance/superfluid/networks/networks)
[SuperFluid xDAI Subgraph](https://thegraph.com/legacy-explorer/subgraph/superfluid-finance/superfluid-xdai)
[Tiles](https://tiles.ceramic.community/)

---

[Gnosis Safe](https://xdai.gnosis-safe.io/app/#/safes/0xFbDbBd02F3DdCb48602C666C41c1136cda9a6a4a)
[Escrow](https://xdai.escrow.raidguild.org/) (Raid ID: recgjBatL6Ih1ulj8)

## Main Objectives
- Provide information that isn't easily accessible from explorers
- Provide some useful tools pushing developers to register themselves

## Deliverables
Deliverables are defined and marked as "Feature" by the User Stories below:
- Front Page
- SuperToken Page
- Inspector pages:
- Account Page
- SuperApp Page
- Create a Token
- Get SuperApp Deploy Key

### Notes
- Discord Field
- SuperToken, name and symbol
- Negative is postive
- Total supply not working
- Dropdown month day week and possibly a global setting, tooltip per second
- Show outstanding unit
- amount sent, every distibution
- Publisher data
- Add magnfying glass in search bar right or left
- Add some basic copy, search and address
- Add Edit for name on
- Add star to left
- Make address editable on account page
---
- Ricochet
## User Stories

Feature: Front Page
    
  Scenario: User can search valid address - Subgraph, GraphQL
    Then the user can search for an address in all available Superfluid networks
        - Rinkeby
        - Goerli
        - Kovan
        - Ropsten
        - Mumbai
        - xDAI
        - Matic
        
    Then the user is returned a corresponding superToken, or superApp
    
  Scenario: User wants to view a list of favorite addresses - Local storage
    Then the user can open a sidebar on the right
    
  Scenario: User wants to create a token
    Then the user can select the create a token link
    
  Scenario: User wants to request a SuperApp deploy key
    Then the user can select the deploy key link

Feature: SuperToken Page
    
  Scenario: User clicks the SuperToken page link - React Router
    Given The token selected is "listed"
    Then a usable URL (~/xdai/supertoken/{address}) is created 
    Then the user can view:
        * What kind of token it is (Custom vs Wrapped)
        * Address and name of underlying token
        * If it is the latest version of superToken.sol, or if not latest, whichever version it is
        * Total Supply
        * Number of holders
        * TVL, if applicable
        * Total # of open streams in this token
        * Total # of active IDAs in this token
        * All users with active streams, so a user can "discover" accounts
        
  Scenario: User wants to add resource to favorites - Local storage
    Then user can add resource to list of favorites in local storage

Feature: Account Page
    
  Scenario: User clicks the Account page link - React Router, Subgraph,  GraphQL
    Then a usable URL (~/xdai/account/{address}) is created 
    Then the user can view:
        * Detailed breakdown of all (listed?) superTokens held by the user.
    Then the user can view details for each token:
        * Balance at time of loading (no need for animation)
        * NetFlow
        * Number of active streams
        * If it's a superToken wrapper, show underlying token's balance too
        
  Scenario: User clicks on a currency
    Then the user can view:
        * IDA information
        * CFA information
        * Activity history
    
  Scenario: User wants to add resource to favorites
    Given all circumstances
    Then user can add resource to list of favorites on local storage

Feature: SuperApp Page
    
  Scenario: User clicks the App page link - React Router, Subgraph,  GraphQL
    Then a usable URL (~/xdai/superapp/{address}) is created 
    Then the user can view:
        * Detailed breakdown of all (listed?) superTokens held by the user.
    Then the user can view details for each token:
        * Balance at time of loading (no need for animation)
        * NetFlow
        * Number of active streams
        * If it's a superToken wrapper, show underlying token's balance too
        
  Scenario: User clicks on a currency
    Then the user can view:
        * IDA information
        * CFA information
        * Activity history
    
  Scenario: User wants to add resource to favorites
    Given all circumstances
    Then user can add resource to list of favorites on local storage
        
  Scenario: User wants to create a SuperApp
    Then API key page opens
    
  Scenario: User wants to add resource to favorites
    Then the user adds resource to list of favorites on local storage

Feature: Create a token - Ethers.js, Web3Modal, Formik?
    
  Scenario: user goes through token creation wizard
    Then the user
        * picks a network
        * connects their wallet
        * decides whether to create wrapped vs custom token
        * add colors, graphics, etc... for dashboard
        * sign with wallet
    Then the user can submit form (submission functionality is not included in these deliverables)

Feature: Get SuperApp Deploy Key - Formik?
    
  Scenario: User goes through deploy key wizard
    Then the user
        * picks a network
        * inputs a deployer address
        * chooses if it's a "one off" or a "factory contract"
        * submits link to code repository
        * adds comments for SuperFluid
    Then the user can submit form (submission functionality is not included in these deliverables)

## Hours Estimate

1. Front Page
- **HOURS: 12**
--
- GraphQL
- React
- Styling Lib
2. SuperToken Page
- **HOURS: 14**
--
- React Router for dynamic routing
3. Account Page
- **HOURS: 18**
4. SuperApp Page
- **HOURS: 8**
6. Create a token
- **HOURS: 17**
--
- Etherjs
7. Get SuperApp Deploy Key
- **HOURS: 8**

Total Hours: 93 (with 20% buffer)
**Days: 12**

## Tech Stack
- Typescript
- GraphQL
- React
- Styled-Components / `reach-ui`?
- React Router
- Ethers.js
- Web3Modal
- Formik?

## Team

- Total - 22000 DAI
- Spoils - 10%
- Tae - Account Manager - 10%
- Elliott (MDT) - Project Manager - 10%
- Jeff - Frontend - 50% of dev payout
- Backfill
- Keating (EST) - Frontend - 50% of dev payout
- Frontend Lead
- ~15-20 hrs week

## Standup Notes

### Questions:
1. How do we know if SuperTokens are listed? **Will be added to the subgraph later**
2. If it is the latest version of superToken.sol, or if not latest, whichever version it is <- How? **Leave out; allow this be easily added later**
3. Do you specifically want a sidebar, or rather a whole favorite addresses page (like SuperFluid has now)? **Make a page**
4. Are SuperApps listed on subgraph? **Will be added to the subgraph later**

### 8/6:
- [x] Determine roles/responsibilities
- Split per view
- Temp check on hours / payout week of 16th
- [x] Determine payout
- [x] Go through each user story--determine tools
- [x] Determine tasks, plus who is doing what
- [x] Determine PM style
- 2 standups a week (1 internal, 1 with SuperFluid) - 30 mins
- 8am PST on Tuesday
- Code reviews
- Testing frontend
- [x] Schedule standups

### 8/10:
- [x] Go through tasks
- [x] Anything for external meeting to discuss?

### 8/17:
- [x] Ask about table / data layout
- [x] Ask about SuperApp data
- [x] Clarify on use-case for address book and favorites page
- [x] SuperToken / Account data update

### 8/24:
- [x] Go through tasks
- [x] Talk about QA backlogs
- [x] Show 2 forms
- [x] Ask about CFA vs IDA
- [x] Ask about SuperApp
- Don't worry about the SuperApp page

#### SuperFluid Meeting Notes:
- Display as closed if stream is actually closed
- ((Current block time - last update) * flow rate) - sum
- IDA can have similar format to the CFA
- Number of shares
- Transferred so far
- CoinGecko ID of the token
- Contact info
- Default price (fallback if CoinGecko doesn't work)
- Simulate ethereum tx

### 8/31:
- Get feedback on dashboard
- Update them on timeline

### 9/7:
- What has been done?
- What will be done this week?
- What can we demo?
- What questions do we have for SuperFluid?
- What should title and description
- How do they want to trasfer
- Do we have a delivery date?
- 9/14

## 9/15
- Make sure edited names update in account table
- What does change mean? Units changed
- Move star to account name
- Active streams should go to top
- Count only active streams
- Double-check balances on account page
- Display name of IDA
- Make superTokens linkable on account page
- Debug with `0x263026e7e53dbfdce5ae55ade22493f828922965`

## 9/20
- How to get supply of Custom SuperToken?

## 9/23
- This will be the last demo we do
- If there are no other bugs, or things within scope that are missing, we can officially deliver it today
- Transfer repo ownership
- We'll leave a 2 week window open for any other in-scope requests or bug fixes