{"id":18369905,"url":"https://github.com/cawfree/react-pretty-ethereum","last_synced_at":"2026-05-03T01:44:10.015Z","repository":{"id":88544213,"uuid":"303272911","full_name":"cawfree/react-pretty-ethereum","owner":"cawfree","description":"⚛️ Ξ Render Web3 data models in a user-friendly way.","archived":false,"fork":false,"pushed_at":"2020-10-12T04:17:26.000Z","size":174,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-02-15T20:57:08.546Z","etag":null,"topics":["ethereum","react","react-native","web3"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cawfree.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-10-12T04:01:41.000Z","updated_at":"2022-10-13T16:32:02.000Z","dependencies_parsed_at":"2024-03-30T18:15:27.690Z","dependency_job_id":null,"html_url":"https://github.com/cawfree/react-pretty-ethereum","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cawfree%2Freact-pretty-ethereum","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cawfree%2Freact-pretty-ethereum/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cawfree%2Freact-pretty-ethereum/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cawfree%2Freact-pretty-ethereum/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cawfree","download_url":"https://codeload.github.com/cawfree/react-pretty-ethereum/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248281425,"owners_count":21077423,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ethereum","react","react-native","web3"],"created_at":"2024-11-05T23:33:31.880Z","updated_at":"2025-10-30T22:12:59.833Z","avatar_url":"https://github.com/cawfree.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-pretty-ethereum\nTools to render Web3 data models in a user-friendly way, because [**Ethereum**](https://ethereum.org) is complicated enough for outsiders.\n\nThe project works in two simple ways:\n  - Firstly, you register mechanisms by which low-level information can be converted into something more useful to an end user.\n    - For instance, you could override an ethereum address to resolve to a user's profile name, if it was known.\n  - Secondly, you declare dedicated [**render props**](https://reactjs.org/docs/render-props.html) capable of handling the processed data.\n\nSupports both [**React**](https://reactjs.org) and [**React Native**](https://reactnative.dev).\n\n## 🚀 Getting Started\n\nUsing [**Yarn**](https://yarnpkg.com):\n\n```bash\nyarn add react-pretty-ethereum\n```\n\n## ✍️ Usage\n\nUse the [`\u003cPrettyEthereumProvider`](./src/components/PrettyEthereumProvider/PrettyEthereumProvider.js) to declare ways to process data.\n\nThere are two _resolver_ methods used:\n  - We provide a way to convert Ethereum wallet addresses into user names.\n  - Next, there's a simple demonstration of how we could convert transaction values into high-level components.\n\nWe create dedicated components to handle these types of resolved transaction keys using the [`createPrettyEthereum`](./src/components/PrettyEthereum/createPrettyEthereum.js) function, which creates a [**Component**](https://reactjs.org/docs/react-component.html) which receives transformed values and renders them via a child render prop.\n\n```javascript\nimport \"@formatjs/intl-numberformat/polyfill\";\nimport \"@formatjs/intl-numberformat/locale-data/en\";\n\nimport React, { useCallback } from \"react\";\nimport { IntlProvider, FormattedNumber } from \"react-intl\";\nimport { StyleSheet, View, Text } from \"react-native\";\nimport { ethers } from \"ethers\";\nimport BigNumber from \"bignumber.js\";\n\nimport PrettyEthereumProvider, { PrettyEthereum, createPrettyEthereum } from \"react-pretty-ethereum\";\n\n/* example high-level data */\nconst Bob = \"0xbc28Ea04101F03aA7a94C1379bc3AB32E65e62d3\";\nconst Alice = \"0x89D24A7b4cCB1b6fAA2625Fe562bDd9A23260359\"; \n\n/* example fields */\nconst From = createPrettyEthereum(\"from\");\nconst To = createPrettyEthereum(\"to\");\nconst Value = createPrettyEthereum(\"value\");\n\nconst styles = StyleSheet.create({\n  bold: { fontWeight: \"bold\" },\n  center: {\n    alignItems: \"center\",\n    flex: 1,\n    justifyContent: \"center\",\n  },\n  text: { fontFamily: 'Arial', fontSize: 14 },\n});\n\nexport default function App() {\n  const renderUser = useCallback(({ value: children, style }) =\u003e (\n    \u003cText style={style} children={children} /\u003e\n  ), []);\n\n  const renderCurrency = useCallback(({ value, currencyFormat, style }) =\u003e (\n    \u003cText style={[styles.text, styles.bold, StyleSheet.flatten(style)]}\u003e\n      \u003cFormattedNumber\n        value={value[currencyFormat]}\n        currency={currencyFormat}\n        style=\"currency\"\n      /\u003e\n    \u003c/Text\u003e\n  ), []);\n\n  /* https://docs.sendwyre.com/docs/live-exchange-rates 10/12/20 */\n  const conversionRates = {\n    ETHGBP: 0.0035,\n    ETHUSD: 0.0027,\n  };\n\n  // TODO: test we can replace this\n  const resolveAddress = useCallback(({ value }) =\u003e {\n    if (value === Bob) {\n      return \"Bob\";\n    } else if (value === Alice) {\n      return \"Alice\";\n    }\n    return value;\n  }, []);\n\n  const resolveCurrency = useCallback(({ value }) =\u003e {\n    const { ETHGBP, ETHUSD } = conversionRates;\n    const valueInWei = BigNumber(value);\n    const valueInEth = BigNumber(valueInWei).dividedBy(ethers.constants.WeiPerEther.toString());\n    const USD = valueInEth.dividedBy(BigNumber(ETHUSD));\n    const GBP = valueInEth.dividedBy(BigNumber(ETHGBP));\n    return { GBP, USD };\n  }, [conversionRates]);\n\n  return (\n    \u003cIntlProvider locale=\"en\"\u003e\n      \u003cPrettyEthereumProvider\n        resolvers={{\n          from: resolveAddress,\n          to: resolveAddress,\n          gas: resolveCurrency,\n          value: resolveCurrency,\n        }}\n      \u003e\n        \u003cView style={styles.center}\u003e\n          \u003cPrettyEthereum\n            {...{\n              from: Bob,\n              to: Alice,\n              value: ethers.constants.WeiPerEther.toString(),\n            }}\n          \u003e\n            \u003cText style={styles.text}\u003e\n              {\"🔥 \"}\n              \u003cFrom style={styles.bold} children={renderUser} /\u003e\n              \u003cText style={styles.text} children=\" would like to send \" /\u003e\n              \u003cValue currencyFormat=\"GBP\" children={renderCurrency} /\u003e\n              \u003cText style={styles.text} children=\" to \" /\u003e\n              \u003cTo style={styles.bold} children={renderUser} /\u003e\n              \u003cText style={styles.text} children=\"!\" /\u003e\n              {\" 🔥\"}\n            \u003c/Text\u003e\n          \u003c/PrettyEthereum\u003e\n        \u003c/View\u003e\n      \u003c/PrettyEthereumProvider\u003e\n    \u003c/IntlProvider\u003e\n  );\n}\n```\n\nThis yields the following result:\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./public/alice.png\" alt=\"react-pretty-web3\"\u003e\u003c/img\u003e\n\u003c/p\u003e\n\n## ✌️ License\n[**MIT**](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcawfree%2Freact-pretty-ethereum","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcawfree%2Freact-pretty-ethereum","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcawfree%2Freact-pretty-ethereum/lists"}