ribondao / interface Goto Github PK

View Code? Open in Web Editor NEW

11.0 2.0 8.0 28.44 MB

An open source frontend for the Ribon protocol

Home Page: https://dapp.ribon.io

HTML 0.57% TypeScript 98.33% JavaScript 0.71% Handlebars 0.36% Shell 0.02%

blockchain charity web3 reactjs

interface's Introduction

Ribon DApp

The decentralized giving protocol on the Web 3.0

Ribon is a decentralized donation platform that allows donors to become promoters and, by doing so, encourages others to join them in a global culture of giving. This way it’s possible to increase donations to charities, promote a culture of giving in the world and make people happier. The decentralized platform is governed by the community, and this whitepaper is a reader-friendly description of the Ribon protocol, which is built on Matic/Polygon, a layer 2 in Ethereum.

📖 Prerequisites

In order to run the project from a local environment we need node>=16, npm>=8 installed on our development machines. We also recommend yarn>=1.22 to manage dependencies but is optional. The following steps are using the yarn CLI.

NOTE: You may need the .env file with some environment variables. You can get it by accessing our Discord Server and requesting it on the #Development channel

🖥️ Local development

To clone the repo:

git clone [email protected]:RibonDAO/interface.git

To install the application:

yarn install

Copy the .env.example to a .env file

cp .env.example .env

To start a local copy of the app on port 3000:

yarn start

With Dockerfile

clone this repository: git clone [email protected]:RibonDAO/interface.git
copy the .docker-compose.yml.sample to a .docker-compose.yml file cp .docker-compose.yml.sample .docker-compose.yml
run docker-compose up

Your project will be running on http://localhost:3000/

or if you already have the core-api project on your machine you can use our script to run the whole project:

clone this repository: git clone [email protected]:RibonDAO/interface.git
clone the core-api repository: git clone [email protected]:RibonDAO/core-api.git
run ./script.sh inside one of the projects The app will be running on http://localhost:3000/

🧪 Test

For running the test suite, use the following command. Since the tests run in watch mode by default, some users may encounter errors about too many files being open. In this case, it may be beneficial to install watchman.

yarn test

You can request a coverage report by running the following command:

yarn testCoverage

🎨 Code linting

To check the code quality, use the following command:

yarn lint

To check the styles quality, use the following command:

yarn lint:css

🚀 Production deployment

A production deployment is a complete build of the project, including the build of the static assets.

yarn build

📙 Storybook

Storybook is being leveraged to mock out visual React components. You can start the Storybook Server on http://localhost:6006 by running the following command:

yarn storybook

💾 Back-End environments

In local development the data comes from the development API (hosted on AWS). There are still two other environments:

Staging: https://ribon-dapp-staging.web.app/?integration_id=1
Production: https://dapp.ribon.io/?integration_id=1

The staging environment is a production replica, but with a different database. Every time a PR is merged into main this environment is updated with the new code

The production environment is the environment that users are in. Every new merge in main updates this environment

Both environments are hosted on firebase.

🤝 Contributing

We encourage you to contribute! Please check out the Contributing guide for guidelines about how to proceed.

🍕 Community

Got Questions? Join the conversation in our Discord.
Find RibonDAO updates on our Twitter.

interface's People

Contributors

Stargazers

Watchers

Forkers

letbueno trousiakis hrr817 isaac-alencar brunoviveiros cesar-dom fabiothiroki omahs

interface's Issues

Change background color of all screens to #FBFBFD

Details

Currently is: #FFFFFF
Change it for: #FBFBFD

Standard Definition of Done

Features and screens must have been tested on mobile and desktop - ensuring responsiveness;
Unit tests must have been created;
Features must have met all acceptance criteria;
Translation documents must have been updated (for features and changes involving the interface and copywriting).

Are you getting started?

Check Ribon Docs to learn what is Ribon, how to contribute and get a Smart contract overview.

Questions? Join Discord!

We highly recommend that you join us in Discord #development channel to ask questions quickly and hear about upcoming new issues.

Adjust navbar height in mobile version

Details

The navbar is 76px tall, when ideally it should be 64px.

When we look at each element individually, all the elements and alignments are in the correct dimensions. However, looking at the entire navbar, it gets to 76.

The only thing it was noted as different in size is the height of the text block which, instead of 20px, could be 16px. But 4px is not enough to take the navbar height from 76px to 64px. If we don't find anything else concerning the navbar, we can lower the text block size to 14px (in last case), so that we reduce the height at least a little.

Standard Definition of Done

Features and screens must have been tested on mobile and desktop - ensuring responsiveness;
Unit tests must have been created;
Features must have met all acceptance criteria;
Translation documents must have been updated (for features and changes involving the interface and copywriting).

Are you getting started?

Check Ribon Docs to learn what is Ribon, how to contribute and get a Smart contract overview.

Questions? Join Discord!

We highly recommend that you join us in Discord #development channel to ask questions quickly and hear about upcoming new issues.

Adjust distance of elements from edges of settings menu

Details

Where?

Adjustment: Adjust left and right paddings to 16px

Standard Definition of Done

Features and screens must have been tested on mobile and desktop - ensuring responsiveness;
Unit tests must have been created;
Features must have met all acceptance criteria;
Translation documents must have been updated (for features and changes involving the interface and copywriting).

Are you getting started?

Check Ribon Docs to learn what is Ribon, how to contribute and get a Smart contract overview.

Questions? Join Discord!

We highly recommend that you join us in Discord #development channel to ask questions quickly and hear about upcoming new issues.

Add tests to ModalError component

Details

Add tests to the component ModalError to increase test coverage and ensure that the component works well

Some attention points

Make sure the entire file is covered.
To do so, you can run yarn testCoverage and see if the file you're updating or creating has 100%.
We have a testUtils with our custom functions.
Don't forget to use them in place of "testing-library/react" functions.
Feel free to add new tests and new functions that were not used yet.

Are you getting started?

Check Ribon Docs to learn what is Ribon, how to contribute and get a Smart contract overview.

Get rewarded in USDC

We have USDC bountys for all our issues on Github. If you want to get rewarded for solving this issue just follow these steps:

Click on this link to access this issue on Ribons Dework.
Log in using your Github account, and add your metamask wallet.
Make sure you're in the right issue, then click on "submit work" to apply.
You'll be added to our discord and a thread will be automaticaly created so you can talk with the reviewer. You can ask questions or simply ask to work on the issue and we will assign it to you.
When you're done, link your pool request. We will review your work and send the USDC to the wallet you added on dework.

Questions? Join Discord!

We highly recommend that you join us in Discord #development channel to ask questions quickly and hear about upcoming new issues.

Individual givings page

Details

Is your feature request related to a problem? Please describe.
I want to be able to check the complete list of all paid contributions I've ever made to the dApp.

Describe the solution you'd like

Button to access page of all givings appear in the carousel of my givings
When the user accesses the treasure page, its 3 most recent givings are already displayed on cards (from most recent to oldest) containing date, value of contribution made and transaction link on the blockchain. It should be added: new card (following these 3 first cards) containing a CTA to access a full page of givings.
Individual givings page
When the user accesses, it should see its whole giving history:

All givings connected to users crypto wallet address and/or logged email;
Contributions must be displayed regardless of payment method (crypto deposit or credit card);
The givings will be displayed from most recent (top left) to the oldest (bottom right)
This page should be loaded just when requested (click to access the page via the button displayed on the treasure page)

Cards gradual loading
Given that the user accesses the individual contributions page then:

on mobile 6 cards will be displayed per load/at a time;
on desktop 9 cards will be displayed per load/at a time;
loading button just appears if there is more cards to be loaded.

Additional context
Figma design handoff file

In Figma design handoff file you will find:

Components to be implemented
Visual reference for page implementation
Color scheme and fonts following Ribon's visual identity
Events that must be implemented to be logged during user interaction with the dApp (they detailed in the handoff comments)

Standard Definition of Done

Features and screens must have been tested on mobile and desktop - ensuring responsiveness;
Unit tests must have been created;
Features must have met all acceptance criteria;
Translation documents must have been updated (for features and changes involving the interface and copywriting).

Are you getting started?

Check Ribon Docs to learn what is Ribon, how to contribute and get a Smart contract overview.

Get rewarded in USDC

We have USDC bountys for all our issues on Github. If you want to get rewarded for solving this issue just follow these steps:

Click on this link to access this issue on Ribons Dework.
Log in using your Github account, and add your metamask wallet.
Make sure you're in the right issue, then click on "submit work" to apply.
You'll be added to our discord and a thread will be automaticaly created so you can talk with the reviewer. You can ask questions or simply ask to work on the issue and we will assign it to you.
When you're done, link your pool request. We will review your work and send the USDC to the wallet you added on dework.

Questions? Join Discord!

We highly recommend that you join us in Discord #development channel to ask questions quickly and hear about upcoming new issues.

Add tests to InputAutoComplete component

Details

Add tests to the component InputAutoComplete to increase test coverage and ensure that the component works well

Some attention points

Make sure the entire file is covered.
To do so, you can run yarn testCoverage and see if the file you're updating or creating has 100%.
We have a testUtils with our custom functions.
Don't forget to use them in place of "testing-library/react" functions.
Feel free to add new tests and new functions that were not used yet.

Are you getting started?

Check Ribon Docs to learn what is Ribon, how to contribute and get a Smart contract overview.

Get rewarded in USDC

We have USDC bountys for all our issues on Github. If you want to get rewarded for solving this issue just follow these steps:

Click on this link to access this issue on Ribons Dework.
Log in using your Github account, and add your metamask wallet.
Make sure you're in the right issue, then click on "submit work" to apply.
You'll be added to our discord and a thread will be automaticaly created so you can talk with the reviewer. You can ask questions or simply ask to work on the issue and we will assign it to you.
When you're done, link your pool request. We will review your work and send the USDC to the wallet you added on dework.

Questions? Join Discord!

We highly recommend that you join us in Discord #development channel to ask questions quickly and hear about upcoming new issues.

Add tests to Dropdown component

Details

Add tests to the component Dropdown to increase test coverage and ensure that the component works well

Some attention points

Make sure the entire file is covered.
To do so, you can run yarn testCoverage and see if the file you're updating or creating has 100%.
We have a testUtils with our custom functions.
Don't forget to use them in place of "testing-library/react" functions.
Feel free to add new tests and new functions that were not used yet.

Are you getting started?

Check Ribon Docs to learn what is Ribon, how to contribute and get a Smart contract overview.

Get rewarded in USDC

We have USDC bountys for all our issues on Github. If you want to get rewarded for solving this issue just follow these steps:

Click on this link to access this issue on Ribons Dework.
Log in using your Github account, and add your metamask wallet.
Make sure you're in the right issue, then click on "submit work" to apply.
You'll be added to our discord and a thread will be automaticaly created so you can talk with the reviewer. You can ask questions or simply ask to work on the issue and we will assign it to you.
When you're done, link your pool request. We will review your work and send the USDC to the wallet you added on dework.

Questions? Join Discord!

We highly recommend that you join us in Discord #development channel to ask questions quickly and hear about upcoming new issues.

Add tests to CardSideImageButton component

Details

Add tests to the component CardSideImageButton to increase test coverage and ensure that the component works well

Some attention points

Make sure the entire file is covered.
To do so, you can run yarn testCoverage and see if the file you're updating or creating has 100%.
We have a testUtils with our custom functions.
Don't forget to use them in place of "testing-library/react" functions.
Feel free to add new tests and new functions that were not used yet.

Are you getting started?

Check Ribon Docs to learn what is Ribon, how to contribute and get a Smart contract overview.

Get rewarded in USDC

We have USDC bountys for all our issues on Github. If you want to get rewarded for solving this issue just follow these steps:

Click on this link to access this issue on Ribons Dework.
Log in using your Github account, and add your metamask wallet.
Make sure you're in the right issue, then click on "submit work" to apply.
You'll be added to our discord and a thread will be automaticaly created so you can talk with the reviewer. You can ask questions or simply ask to work on the issue and we will assign it to you.
When you're done, link your pool request. We will review your work and send the USDC to the wallet you added on dework.

Questions? Join Discord!

We highly recommend that you join us in Discord #development channel to ask questions quickly and hear about upcoming new issues.

Wallet connection loading

Details

Is your feature request related to a problem? Please describe.
Contribution flow transparency (USDC deposit in the treasury) in the protocol

Describe the solution you'd like
Given that the user clicked to connect to the wallet then the loader will appear until it returns success or failure.

Additional context
Figma design handoff file

In Figma design handoff file you will find:

Components to be implemented
Visual reference for page implementation
Color scheme and fonts following Ribon's visual identity
Events that must be implemented to be logged during user interaction with the dApp (they detailed in the handoff comments)

Standard Definition of Done

Features and screens must have been tested on mobile and desktop - ensuring responsiveness;
Unit tests must have been created;
Features must have met all acceptance criteria;
Translation documents must have been updated (for features and changes involving the interface and copywriting).

Are you getting started?

Check Ribon Docs to learn what is Ribon, how to contribute and get a Smart contract overview.

Get rewarded in USDC

We have USDC bountys for all our issues on Github. If you want to get rewarded for solving this issue just follow these steps:

Click on this link to access this issue on Ribons Dework.
Log in using your Github account, and add your metamask wallet.
Make sure you're in the right issue, then click on "submit work" to apply.
You'll be added to our discord and a thread will be automaticaly created so you can talk with the reviewer. You can ask questions or simply ask to work on the issue and we will assign it to you.
When you're done, link your pool request. We will review your work and send the USDC to the wallet you added on dework.

Questions? Join Discord!

We highly recommend that you join us in Discord #development channel to ask questions quickly and hear about upcoming new issues.

Change navbar background color to #FFFFFF

Details

Currently is: #FBFBFD
Change it for: #FFFFFF

Standard Definition of Done

Features and screens must have been tested on mobile and desktop - ensuring responsiveness;
Unit tests must have been created;
Features must have met all acceptance criteria;
Translation documents must have been updated (for features and changes involving the interface and copywriting).

Are you getting started?

Check Ribon Docs to learn what is Ribon, how to contribute and get a Smart contract overview.

Questions? Join Discord!

We highly recommend that you join us in Discord #development channel to ask questions quickly and hear about upcoming new issues.

Adjust size of wallet connect button on treasure screen

Details

Where?
https://dapp.ribon.io/promoters/fund

Adjustment: Adjust the height of the button to 24px.

Standard Definition of Done

Features and screens must have been tested on mobile and desktop - ensuring responsiveness;
Unit tests must have been created;
Features must have met all acceptance criteria;
Translation documents must have been updated (for features and changes involving the interface and copywriting).

Are you getting started?

Check Ribon Docs to learn what is Ribon, how to contribute and get a Smart contract overview.

Questions? Join Discord!

We highly recommend that you join us in Discord #development channel to ask questions quickly and hear about upcoming new issues.

Adjustments to card contribution price buttons

Details

Decrease font size of buttons text to 12px
Remove decimals from button values

Screen: https://dapp.ribon.io/promoters/support-fund

Buttons highlighted by red outline:

Standard Definition of Done

Features and screens must have been tested on mobile and desktop - ensuring responsiveness;
Unit tests must have been created;
Features must have met all acceptance criteria;
Translation documents must have been updated (for features and changes involving the interface and copywriting).

Are you getting started?

Check Ribon Docs to learn what is Ribon, how to contribute and get a Smart contract overview.

Questions? Join Discord!

We highly recommend that you join us in Discord #development channel to ask questions quickly and hear about upcoming new issues.

Exit button adjustments in settings menu

Details

Where?

Adjustments:

Adjust Sign Out button dimensions to 76px X 26px
Set the button's background color to #FFFFFF

Standard Definition of Done

Features and screens must have been tested on mobile and desktop - ensuring responsiveness;
Unit tests must have been created;
Features must have met all acceptance criteria;
Translation documents must have been updated (for features and changes involving the interface and copywriting).

Are you getting started?

Check Ribon Docs to learn what is Ribon, how to contribute and get a Smart contract overview.

Questions? Join Discord!

We highly recommend that you join us in Discord #development channel to ask questions quickly and hear about upcoming new issues.

Adjust the Ribon logo container size

Details

Adjust the size of the Ribon logo container to be 34px X 34px, leading to the positioning of the header on the left, aligned with the other elements below.

How it is today:

Standard Definition of Done

Features and screens must have been tested on mobile and desktop - ensuring responsiveness;
Unit tests must have been created;
Features must have met all acceptance criteria;
Translation documents must have been updated (for features and changes involving the interface and copywriting).

Are you getting started?

Check Ribon Docs to learn what is Ribon, how to contribute and get a Smart contract overview.

Questions? Join Discord!

We highly recommend that you join us in Discord #development channel to ask questions quickly and hear about upcoming new issues.

Gradual loading of the impact screen

Details

Is your feature request related to a problem? Please describe.
As a user of Ribon, I want to navigate the impact screen in a less frictionless way (faster loading).

Describe the solution you'd like

Restricted initial load
Given that the display space is restricted and we will have a shorter loading time when the user accesses the impact screen then only up to 4 impact cards will be displayed on mobile and up to 6 impact cards on desktop. These cards will be in order of most recent donations made.
"Show more" button
Given that the user has more than 4 (mobile) and 6 (desktop) different donation cards when accessing the impact screen then a "Show more" button will be displayed at the bottom of the page (loading button just appears if there is more cards to be loaded).
Cards gradual loading
When the user clicks "Show more", then 4 more impact cards on mobile and 6 impact cards on desktop will be displayed. These cards will be displayed in descending order of the donation date.

Additional context
Figma design handoff file

In Figma design handoff file you will find:

Components to be implemented
Visual reference for page implementation
Color scheme and fonts following Ribon's visual identity
Events that must be implemented to be logged during user interaction with the dApp (they detailed in the handoff comments)

Standard Definition of Done

Features and screens must have been tested on mobile and desktop - ensuring responsiveness;
Unit tests must have been created;
Features must have met all acceptance criteria;
Translation documents must have been updated (for features and changes involving the interface and copywriting).

Are you getting started?

Check Ribon Docs to learn what is Ribon, how to contribute and get a Smart contract overview.

Get rewarded in USDC

We have USDC bountys for all our issues on Github. If you want to get rewarded for solving this issue just follow these steps:

Click on this link to access this issue on Ribons Dework.
Log in using your Github account, and add your metamask wallet.
Make sure you're in the right issue, then click on "submit work" to apply.
You'll be added to our discord and a thread will be automaticaly created so you can talk with the reviewer. You can ask questions or simply ask to work on the issue and we will assign it to you.
When you're done, link your pool request. We will review your work and send the USDC to the wallet you added on dework.

Questions? Join Discord!

We highly recommend that you join us in Discord #development channel to ask questions quickly and hear about upcoming new issues.

Add tests to ModalForm component

Details

Add tests to the component ModalForm to increase test coverage and ensure that the component works well

Some attention points

Make sure the entire file is covered.
To do so, you can run yarn testCoverage and see if the file you're updating or creating has 100%.
We have a testUtils with our custom functions.
Don't forget to use them in place of "testing-library/react" functions.
Feel free to add new tests and new functions that were not used yet.

Are you getting started?

Check Ribon Docs to learn what is Ribon, how to contribute and get a Smart contract overview.

Get rewarded in USDC

We have USDC bountys for all our issues on Github. If you want to get rewarded for solving this issue just follow these steps:

Click on this link to access this issue on Ribons Dework.
Log in using your Github account, and add your metamask wallet.
Make sure you're in the right issue, then click on "submit work" to apply.
You'll be added to our discord and a thread will be automaticaly created so you can talk with the reviewer. You can ask questions or simply ask to work on the issue and we will assign it to you.
When you're done, link your pool request. We will review your work and send the USDC to the wallet you added on dework.

Questions? Join Discord!

We highly recommend that you join us in Discord #development channel to ask questions quickly and hear about upcoming new issues.

Add tests to SliderImage component

Details

Add tests to the component slider image to increase test coverage and ensure that the component works well

Standard Definition of Done

Features and screens must have been tested on mobile and desktop - ensuring responsiveness;
Unit tests must have been created;
File test coverage must have been increased.

Are you getting started?

Check Ribon Docs to learn what is Ribon, how to contribute and get a Smart contract overview.

Questions? Join Discord!

We highly recommend that you join us in Discord #development channel to ask questions quickly and hear about upcoming new issues.

Add tests to Header component

Details

Add tests to the component Header to increase test coverage and ensure that the component works well

Some attention points

Make sure the entire file is covered.
To do so, you can run yarn testCoverage and see if the file you're updating or creating has 100%.
We have a testUtils with our custom functions.
Don't forget to use them in place of "testing-library/react" functions.
Feel free to add new tests and new functions that were not used yet.

Are you getting started?

Check Ribon Docs to learn what is Ribon, how to contribute and get a Smart contract overview.

Get rewarded in USDC

We have USDC bountys for all our issues on Github. If you want to get rewarded for solving this issue just follow these steps:

Click on this link to access this issue on Ribons Dework.
Log in using your Github account, and add your metamask wallet.
Make sure you're in the right issue, then click on "submit work" to apply.
You'll be added to our discord and a thread will be automaticaly created so you can talk with the reviewer. You can ask questions or simply ask to work on the issue and we will assign it to you.
When you're done, link your pool request. We will review your work and send the USDC to the wallet you added on dework.

Questions? Join Discord!

We highly recommend that you join us in Discord #development channel to ask questions quickly and hear about upcoming new issues.

Need to fix brand color

Details

Hello! wrong color value of the brandColors:
theme.colors.brand[50] == '##FFF7F0'

Cannot create pull request :(

Update privacy policy links

Details

🇺🇸 English version

Currently:

Change it for:
By signing up you agre to Ribon's Privacy Policy.

Link: https://ribon.io/2022/06/10/privacy-and-personal-data-retention-policy/

🇧🇷 Portuguese version

Currently:

Ao inserir seu e-mail e se inscrever, você aceita a nossa Política de Privacidade.

Link: https://ribon.io/2021/06/01/politica-de-privacidade-e-retencao-de-dados-pessoais/

Standard Definition of Done

Features and screens must have been tested on mobile and desktop - ensuring responsiveness;
Unit tests must have been created;
Features must have met all acceptance criteria;
Translation documents must have been updated (for features and changes involving the interface and copywriting).

Are you getting started?

Check Ribon Docs to learn what is Ribon, how to contribute and get a Smart contract overview.

Questions? Join Discord!

We highly recommend that you join us in Discord #development channel to ask questions quickly and hear about upcoming new issues.

Adjust "Your Giving" title size to match main pages title sizes

Details

Interface today:

Link: https://dapp.ribon.io/promoters/support-fund

One of the main pages for comparison:

Link: https://dapp.ribon.io/promoters/fund

Note: apparently this inconsistency is only appearing on the desktop (mobile seems to be ok, but it is good to confirm the responsiveness for the most diverse screens)

Standard Definition of Done

Features and screens must have been tested on mobile and desktop - ensuring responsiveness;
Unit tests must have been created;
Features must have met all acceptance criteria;
Translation documents must have been updated (for features and changes involving the interface and copywriting).

Are you getting started?

Check Ribon Docs to learn what is Ribon, how to contribute and get a Smart contract overview.

Questions? Join Discord!

We highly recommend that you join us in Discord #development channel to ask questions quickly and hear about upcoming new issues.

Align text of cause cards to the left

Details

Screen: https://dapp.ribon.io/

Text in question highlighted by red frame:

Standard Definition of Done

Features and screens must have been tested on mobile and desktop - ensuring responsiveness;
Unit tests must have been created;
Features must have met all acceptance criteria;
Translation documents must have been updated (for features and changes involving the interface and copywriting).

Are you getting started?

Check Ribon Docs to learn what is Ribon, how to contribute and get a Smart contract overview.

Questions? Join Discord!

We highly recommend that you join us in Discord #development channel to ask questions quickly and hear about upcoming new issues.

Add tests to card full image component

Details

Add tests to the component cardFullImage to increase test coverage and ensure that the component works well

Standard Definition of Done

Features and screens must have been tested on mobile and desktop - ensuring responsiveness;
Unit tests must have been created;
File test coverage must have been increased.

Are you getting started?

Check Ribon Docs to learn what is Ribon, how to contribute and get a Smart contract overview.

Questions? Join Discord!

We highly recommend that you join us in Discord #development channel to ask questions quickly and hear about upcoming new issues.

Dework test task

Details

Just follow the contribution flow :D

Standard Definition of Done

Features and screens must have been tested on mobile and desktop - ensuring responsiveness;
Unit tests must have been created;
Features must have met all acceptance criteria;
Translation documents must have been updated (for features and changes involving the interface and copywriting).

Are you getting started?

Check Ribon Docs to learn what is Ribon, how to contribute and get a Smart contract overview.

Questions? Join Discord!

We highly recommend that you join us in Discord #development channel to ask questions quickly and hear about upcoming new issues.

"Your Givings" card placeholder adjustments

Details

Where?
https://dapp.ribon.io/promoters/fund

Adjustments:

Adjust card chest icon margin to 16px
Adjust the text block so that it is aligned with the center of the container where it is positioned (currenlty it is halfway down, as if it were aligned with the base of the container)
Remove the margins of the text block itself, since the card already has a lower and upper padding of 12px

Standard Definition of Done

Features and screens must have been tested on mobile and desktop - ensuring responsiveness;
Unit tests must have been created;
Features must have met all acceptance criteria;
Translation documents must have been updated (for features and changes involving the interface and copywriting).

Are you getting started?

Check Ribon Docs to learn what is Ribon, how to contribute and get a Smart contract overview.

Questions? Join Discord!

We highly recommend that you join us in Discord #development channel to ask questions quickly and hear about upcoming new issues.

Remove header integrator logo

Details

Remove integrator logo and divider (that is between Ribon logo and integrator logo) components from the interface off all screens of the dApp

Standard Definition of Done

Features and screens must have been tested on mobile and desktop - ensuring responsiveness;
Unit tests must have been created;
Features must have met all acceptance criteria;
Translation documents must have been updated (for features and changes involving the interface and copywriting).

Are you getting started?

Check Ribon Docs to learn what is Ribon, how to contribute and get a Smart contract overview.

Questions? Join Discord!

We highly recommend that you join us in Discord #development channel to ask questions quickly and hear about upcoming new issues.

Add tests to CardDoubleTextDividerButton component

Details

Add tests to the component CardDoubleTextDividerButton to increase test coverage and ensure that the component works well

Some attention points

Make sure the entire file is covered.
To do so, you can run yarn testCoverage and see if the file you're updating or creating has 100%.
We have a testUtils with our custom functions.
Don't forget to use them in place of "testing-library/react" functions.
Feel free to add new tests and new functions that were not used yet.

Are you getting started?

Check Ribon Docs to learn what is Ribon, how to contribute and get a Smart contract overview.

Get rewarded in USDC

We have USDC bountys for all our issues on Github. If you want to get rewarded for solving this issue just follow these steps:

Click on this link to access this issue on Ribons Dework.
Log in using your Github account, and add your metamask wallet.
Make sure you're in the right issue, then click on "submit work" to apply.
You'll be added to our discord and a thread will be automaticaly created so you can talk with the reviewer. You can ask questions or simply ask to work on the issue and we will assign it to you.
When you're done, link your pool request. We will review your work and send the USDC to the wallet you added on dework.

Questions? Join Discord!

We highly recommend that you join us in Discord #development channel to ask questions quickly and hear about upcoming new issues.