|
| 1 | +<div align="center"> |
| 2 | +<h3 align="center">Getting Cryptocurrency and Fiat Prices on the Frontend With Javascript or Solidity</h3> |
| 3 | + |
| 4 | + <p align="center"> |
| 5 | + <a href="https://github.com/smartcontractkit/smart-contract-examples/issues">Report Bug</a> |
| 6 | + · |
| 7 | + <a href="https://github.com/smartcontractkit/smart-contract-examples/issues">Request Feature</a> |
| 8 | + </p> |
| 9 | +</div> |
| 10 | + |
| 11 | + |
| 12 | + |
| 13 | +<!-- TABLE OF CONTENTS --> |
| 14 | +<details> |
| 15 | + <summary>Table of Contents</summary> |
| 16 | + <ol> |
| 17 | + <li> |
| 18 | + <a href="#about-the-project">About The Project</a> |
| 19 | + <ul> |
| 20 | + <li><a href="#built-with">Built With</a></li> |
| 21 | + </ul> |
| 22 | + </li> |
| 23 | + <li> |
| 24 | + <a href="#getting-started">Getting Started</a> |
| 25 | + <ul> |
| 26 | + <li><a href="#prerequisites">Prerequisites</a></li> |
| 27 | + <li><a href="#installation">Installation</a></li> |
| 28 | + </ul> |
| 29 | + </li> |
| 30 | + <li><a href="#usage">Usage</a></li> |
| 31 | + <li><a href="#contributing">Contributing</a></li> |
| 32 | + </ol> |
| 33 | +</details> |
| 34 | + |
| 35 | + |
| 36 | + |
| 37 | +<!-- ABOUT THE PROJECT --> |
| 38 | +## About The Project |
| 39 | + |
| 40 | +This project is a sample SvelteKit Skeleton project that includes a util function to return the price of ETH in USD on the Kovan Network. |
| 41 | + |
| 42 | +<p align="right">(<a href="#top">back to top</a>)</p> |
| 43 | + |
| 44 | + |
| 45 | + |
| 46 | +### Built With |
| 47 | +* [Ethers](https://ethers.org/) |
| 48 | +* [Svelte](https://svelte.dev/) |
| 49 | + |
| 50 | + |
| 51 | +<p align="right">(<a href="#top">back to top</a>)</p> |
| 52 | + |
| 53 | + |
| 54 | + |
| 55 | +<!-- GETTING STARTED --> |
| 56 | +## Getting Started |
| 57 | + |
| 58 | +In order to run this code locally follow the steps below. |
| 59 | + |
| 60 | +If you'd like to see the two relevant files for the example check out `src/routes/index.svelte` and `src/utils/getETHPrice.js` |
| 61 | + |
| 62 | +### Prerequisites |
| 63 | + |
| 64 | +Ensure you have Node.js and npm installed |
| 65 | + ```sh |
| 66 | + node -v |
| 67 | + npm -v |
| 68 | + ``` |
| 69 | + |
| 70 | +* npm is installed as part of Node. Instructions can be found at https://nodejs.org/en/ |
| 71 | + |
| 72 | + |
| 73 | +### Installation |
| 74 | + |
| 75 | +1. Get a RPC API Key from a node provider such as [Alchemy](https://www.alchemy.com/), [Infura](https://infura.io/), [Moralis](https://moralis.io/), or [QuickNode](https://www.quicknode.com/). This example uses the KOVAN Ethereum test network. |
| 76 | +1. Clone the repo |
| 77 | + ```sh |
| 78 | + git clone https://github.com/smartcontractkit/smart-contract-examples.git |
| 79 | + ``` |
| 80 | +1. Enter the direcory |
| 81 | + ```sh |
| 82 | + cd smart-contract-examples/datafeeds-in-svelte |
| 83 | + ``` |
| 84 | +1. Install NPM packages |
| 85 | + ```sh |
| 86 | + npm install |
| 87 | + ``` |
| 88 | +1. Enter your RPC URL in `src/utils/getETHPrice.js` |
| 89 | + ```js |
| 90 | + const provider = new ethers.providers.JsonRpcProvider('RPC_URL_HERE'); |
| 91 | + ``` |
| 92 | + |
| 93 | +<p align="right">(<a href="#top">back to top</a>)</p> |
| 94 | + |
| 95 | + |
| 96 | + |
| 97 | +<!-- USAGE EXAMPLES --> |
| 98 | +## Usage |
| 99 | + |
| 100 | +Once you've installed dependencies with `npm install` and updated your RPC URL, start the server: |
| 101 | + ```bash |
| 102 | + npm run dev |
| 103 | + # or start the server and open the app in a new browser tab |
| 104 | + npm run dev -- --open |
| 105 | + ``` |
| 106 | + |
| 107 | +<p align="right">(<a href="#top">back to top</a>)</p> |
0 commit comments