Rena Weekly Dev Report #15

Rena Finance
2 min readNov 25, 2022

After months of continuous backend development, we are finally touching down on the frontend sprints. As the holiday spirit closes in, we feel the thrills of a new year and a new beginning for the protocol. But until that time comes, we keep building! Let’s dive in!

Weekly Task Summary

  • Web3 Library
  • Frontend Architecture & dev onboarding
  • UI component library
  • Frontend Testing Environment & Testing
  • Web 3 integration into Frontend

What was Achieved?

Frontend Architecture & Dev Onboarding

The most major Primitive Components that comprise the Component Library have been translated from Figma Design. Among them are the theme colors, typography elements, spacings, buttons, cards, dividers, and aspects that are themeable, reusable, and appear more than once in the application.

Teaser of the Rena UI color schemes, buttons, & grids

A Living Styleguide Document was created to Live-Document and showcase the Components.

Component Libraries make it easy to develop them in isolation and parallel, making changes later easier to implement and onboard other developers.

Slider & Divider specs

UI component library

The latest component to be added to the library is the Slider Primitives. Why are we adding sliders? Because sliders are used for fine-grained control over user amounts when they use inputs and are effective at communicating information.

Slider preview

Web3 Integration into the Frontend

Refactoring the State Management from an EventEmitter-based one to a modern solution is completed.

Stores Added:

  • ThemeProvider
  • Web3 (based on ethers js)

With the Scaffolding finished, we can connect the Templates to the Testnet as soon as they are developed. The Web3 Store includes an ABI Generator to simplify the Developer Experience and remove the tedious inclusion of ABI JSON Files.

Carry Over

The frontend testing environment and tooling setup have been postponed to next week.

Next Week’s Tasks

Web3 library testing

UI Sync design meeting & further primitives

UI Design of final pages — rStaking & rBond

UI: Frame & menu (reponsive)

Frontend Testing & tooling setup

Web3 integration to frontend

Thank you for reading our Rena V2 report! We’ll be back next week for another update for week #16.🙌

--

--