r-group-devs/hypervibes-frontend

Frontend app for the HyperVIBES project.

hypervibes-frontend

Frontend app for the HyperVIBES project.

Links

• Product Brief
• MVP Coordination Doc
• Contracts repo

Requirements

• Node >=14.0.0
• Yarn ^1.22.0

Setup

Clone the repo:

$ git clone [email protected]:R-Group-Devs/hypervibes-frontend.git

Development

Install dependencies:

$ yarn

You'll need RPC endpoints for all networks you plan to use during local development. You can generate private RPC endpoints with Infura or Alchemy, or search for public RPC endpoints to use.

Add the following environment variables to a .env.local file:

REACT_APP_ETHEREUM_RPC_URL=???
REACT_APP_POLYGON_RPC_URL=???
REACT_APP_FANTOM_RPC_URL=???
REACT_APP_ARBITRUM_RPC_URL=???
REACT_APP_ROPSTEN_RPC_URL=???
REACT_APP_RINKEBY_RPC_URL=???
REACT_APP_GOERLI_RPC_URL=???
REACT_APP_MUMBAI_RPC_URL=???

Run the app in development mode:

$ yarn start

Generate a browser-ready build artifact:

$ yarn build

Preview an app build:

$ yarn serve

hypervibes-frontend's Issues

Update radio button card form elements to not have default selected state

Update the Select Collections and Create Infusion screens in the Create Realm flow to not have default selected states for radio button card form elements.

Show pending transaction state when creating realm

Update the Create Realm form submission flow to show a loading/pending state after the transaction is submitted (on step 4), and listen for a transaction state change to display a "Realm created" success message when the transaction appears in a mined block. Ideally this pattern could be generalized and applied to other transaction submission flows throughout the app.

Use something like ethers' Contract.on to listen to the RealmCreated event.

Convert NumberInput component to use native text input

Convert the NumberInput component to use a native text input instead of number input -- this circumvents a counterintuitive UX issue where mousewheeling when the cursor is over the input changes the value of the input.

Implement SubmitButton component in pure CSS

Currently the SubmitButton component is implemented using a static PNG background, which makes in inflexible to dynamic content changes. Update it so it's implemented using purely CSS.

Stroke: #bcff67
Gradient: #17ffe3 (32% opacity) to #bcff67