https://github.com/cawfree/react-pretty-ethereum

⚛️ Ξ Render Web3 data models in a user-friendly way.
https://github.com/cawfree/react-pretty-ethereum

ethereum react react-native web3

Last synced: 2 months ago
JSON representation

⚛️ Ξ Render Web3 data models in a user-friendly way.

• Host: GitHub
• URL: https://github.com/cawfree/react-pretty-ethereum
• Owner: cawfree
• License: mit
• Created: 2020-10-12T04:01:41.000Z (almost 6 years ago)
• Default Branch: main
• Last Pushed: 2020-10-12T04:17:26.000Z (almost 6 years ago)
• Last Synced: 2025-02-15T20:57:08.546Z (over 1 year ago)
• Topics: ethereum, react, react-native, web3
• Language: JavaScript
• Homepage:
• Size: 170 KB
• Stars: 3
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# react-pretty-ethereum

Tools to render Web3 data models in a user-friendly way, because [**Ethereum**](https://ethereum.org) is complicated enough for outsiders.

The project works in two simple ways:

  - Firstly, you register mechanisms by which low-level information can be converted into something more useful to an end user.

    - For instance, you could override an ethereum address to resolve to a user's profile name, if it was known.

  - Secondly, you declare dedicated [**render props**](https://reactjs.org/docs/render-props.html) capable of handling the processed data.

Supports both [**React**](https://reactjs.org) and [**React Native**](https://reactnative.dev).

## 🚀 Getting Started

Using [**Yarn**](https://yarnpkg.com):

```bash

yarn add react-pretty-ethereum

```

## ✍️ Usage

Use the [` (

    

  ), []);

  const renderCurrency = useCallback(({ value, currencyFormat, style }) => (

    

      

    

  ), []);

  /* https://docs.sendwyre.com/docs/live-exchange-rates 10/12/20 */

  const conversionRates = {

    ETHGBP: 0.0035,

    ETHUSD: 0.0027,

  };

  // TODO: test we can replace this

  const resolveAddress = useCallback(({ value }) => {

    if (value === Bob) {

      return "Bob";

    } else if (value === Alice) {

      return "Alice";

    }

    return value;

  }, []);

  const resolveCurrency = useCallback(({ value }) => {

    const { ETHGBP, ETHUSD } = conversionRates;

    const valueInWei = BigNumber(value);

    const valueInEth = BigNumber(valueInWei).dividedBy(ethers.constants.WeiPerEther.toString());

    const USD = valueInEth.dividedBy(BigNumber(ETHUSD));

    const GBP = valueInEth.dividedBy(BigNumber(ETHGBP));

    return { GBP, USD };

  }, [conversionRates]);

  return (

    

      

        

          

            

              {"🔥 "}

              

              

              

              

              

              

              {" 🔥"}

            

          

        

      

    

  );

}

```

This yields the following result:



  



## ✌️ License

[**MIT**](./LICENSE)