{"id":21936154,"url":"https://github.com/learnweb3dao/chainlink-datafeeds","last_synced_at":"2026-05-17T00:45:06.305Z","repository":{"id":104011127,"uuid":"453980011","full_name":"LearnWeb3DAO/Chainlink-DataFeeds","owner":"LearnWeb3DAO","description":null,"archived":false,"fork":false,"pushed_at":"2022-01-31T11:33:45.000Z","size":21779,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-22T14:16:29.489Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LearnWeb3DAO.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2022-01-31T11:29:51.000Z","updated_at":"2023-01-15T05:13:53.000Z","dependencies_parsed_at":null,"dependency_job_id":"0e2c3aff-a019-4918-881e-06d2aafad297","html_url":"https://github.com/LearnWeb3DAO/Chainlink-DataFeeds","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/LearnWeb3DAO/Chainlink-DataFeeds","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LearnWeb3DAO%2FChainlink-DataFeeds","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LearnWeb3DAO%2FChainlink-DataFeeds/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LearnWeb3DAO%2FChainlink-DataFeeds/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LearnWeb3DAO%2FChainlink-DataFeeds/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LearnWeb3DAO","download_url":"https://codeload.github.com/LearnWeb3DAO/Chainlink-DataFeeds/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LearnWeb3DAO%2FChainlink-DataFeeds/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273649203,"owners_count":25143631,"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","status":"online","status_checked_at":"2025-09-04T02:00:08.968Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-11-29T01:13:25.136Z","updated_at":"2026-05-17T00:45:01.262Z","avatar_url":"https://github.com/LearnWeb3DAO.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Chainlink: Data Feeds\n\n## Introduction\n\n### Connect Your Smart Contracts to the Outside World\n\nChainlink Data Feeds are the quickest way to connect your smart contracts to the real-world market prices of assets. For example, one use for data feeds is to enable smart contracts to retrieve the latest pricing data of an asset in a single call.\n\n### Use case\n\nOften, smart contracts need to act upon prices of assets in real-time. This is especially true in DeFi.\n\nFor example, [Synthetix](https://www.synthetix.io) use Data Feeds to determine prices on their derivatives platform. Lending and Borrowing platforms like [AAVE](https://aave.com/) use Data Feeds to ensure the total value of the collateral.\n\nThe [Decentralized Data Model](https://docs.chain.link/docs/architecture-decentralized-model/) describes how Data Feeds are aggregated from many data sources and published on-chain.\n\n## BUIDL IT\n\n### What will we be building?\n\nSometimes people want to send the same worth of Ether as a specific amount of fiat currency for like payment.\n\nLet’s say, you want to send $500 worth of Ether, then you realize you can’t set the amount of Ether which is worth of a specific amount of US dollar in Metamask.\n\n![](https://i.imgur.com/8IXyIKy.png)\n\nIt shows what’s your Ether worth in US dollar, but like you cannot set $500 worth of Ether.\n\nThat’s where this dApp comes in. You can send the amount of Ether based on fiat currency.\n\n### How will it work?\n\nWell, the idea will be simple:\n\n- You enter the value you want to send, in USD\n- The dApp fetches the current prices for the ETH/USD pair\n- Converts the USD amount into ETH according to the pair prices\n- Sends that amount of Ether across\n\n### Setup a new Hardhat project\n\nWe'll work on `web` later.\nFor now, switch inside the eth directory, and setup a new Hardhat boilerplate\n\n```\ncd eth\nnpm init --y\nnpx hardhat\n```\n\nThis will ask you a few questions to setup the new project. You must be familiar to this by now.\n\nI've chosen a basic Hardhat sample project.\n\n### Writing the contract\n\nLet's `cd` into `contracts` and start a new contract `SendEthInUsd.sol`:\n\n```\n//SPDX-License-Identifier: Unlicense\npragma solidity ^0.8.0;\n\ncontract SendEthInUsd {\n\n}\n```\n\nTo consume price data, your smart contract should reference [`AggregatorV3Interface`](https://github.com/smartcontractkit/chainlink/blob/master/contracts/src/v0.8/interfaces/AggregatorV3Interface.sol), which defines the external functions implemented by Data Feeds.\n\nThus, we'll start by importing this and initialise it in our contract:\n\nTherefore, we'll `yarn add @chainlink/contracts` and then:\n\n```\n//SPDX-License-Identifier: Unlicense\npragma solidity ^0.8.0;\n\nimport \"@chainlink/contracts/src/v0.8/interfaces/AggregatorV3Interface.sol\";\n\ncontract SendEthInUsd {\n\n}\n```\n\nNow, initialise it:\n\n```\n//SPDX-License-Identifier: Unlicense\npragma solidity ^0.8.0;\n\nimport \"@chainlink/contracts/src/v0.8/interfaces/AggregatorV3Interface.sol\";\n\ncontract SendEthInUsd {\n   AggregatorV3Interface internal priceFeed;\n\n    constructor(aggregatorAddress) {\n        priceFeed = AggregatorV3Interface(aggregatorAddress);\n    }\n\n}\n```\n\nLet's see what's happening here:\n\n- We first declared a new internal variable called `priceFeed` of the type `AggregatorV3Interface`: [https://github.com/smartcontractkit/chainlink/blob/master/contracts/src/v0.8/interfaces/AggregatorV3Interface.sol](https://github.com/smartcontractkit/chainlink/blob/master/contracts/src/v0.8/interfaces/AggregatorV3Interface.sol)\n- Next, we'll call the aggregator interface with the exact contract address of the price feed we want. We can find different price feeds for different networks here: [https://docs.chain.link/docs/reference-contracts/](https://docs.chain.link/docs/reference-contracts/). This is the `aggregatorAddress` in code.\n- We'll use the ETH/USD data feed on the Kovan network which has the address: `0x9326BFA02ADD2366b30bacB125260Af641031331`.\n\nYou can find the different price feeds for the Kovan network here: [https://docs.chain.link/docs/ethereum-addresses/#Kovan%20Testnet](https://docs.chain.link/docs/ethereum-addresses/#Kovan%20Testnet)\n\nOnce we have the `priceFeed` initialised, we can move forward to getting the latest price for this pair:\n\n```\n/**\n * Returns the latest price\n*/\nfunction getEthUsd() public view returns (int) {\n (\n            uint80 roundID,\n            int price,\n            uint startedAt,\n            uint timeStamp,\n            uint80 answeredInRound\n        ) = priceFeed.latestRoundData();\n}\n```\n\nWell, what are these new values and where did they come from?\n\nLet's try to understand everything the (`AggregatorV3Interface.sol` interface)[https://github.com/smartcontractkit/chainlink/blob/master/contracts/src/v0.8/interfaces/AggregatorV3Interface.sol] has:\n\n| Name            | Description                                                          |\n| --------------- | -------------------------------------------------------------------- |\n| Decimals        | The number of decimals in the response.                              |\n| description     | The description of the aggregator that the proxy points to.          |\n| getRoundData    | Get data from a specific round.                                      |\n| latestRoundData | Get data from the latest round.                                      |\n| version         | The version representing the type of aggregator the proxy points to. |\n\nWe're calling the `latestRoundData` function right now, which returns us:\n\n- `uint80 roundId`: the round ID\n- `int256 answer,`: the price\n- `uint256 startedAt,`: timestamp of when the round started\n- `uint256 updatedAt`: timestamp of when the round was updated\n- `uint80 answeredInRound`: the round ID of the round in which the answer was computer\n\nSeeing this, the return values should make a lot of sense.\n\nThe one we're interested in, for the scope of our dApp, is the `answer`, or the price.\n\nThus,\n\n```\n//SPDX-License-Identifier: Unlicense\npragma solidity ^0.8.0;\n\nimport \"@chainlink/contracts/src/v0.8/interfaces/AggregatorV3Interface.sol\";\n\ncontract SendEthInUsd {\n   AggregatorV3Interface internal priceFeed;\n\n    constructor(aggregatorAddress) {\n        priceFeed = AggregatorV3Interface(aggregatorAddress);\n    }\n\n    /**\n    * Returns the latest price\n    */\n    function getEthUsd() public view returns (int) {\n        (\n            ,\n            int price,\n            ,\n            ,\n\n        ) = priceFeed.latestRoundData();\n        return price;\n    }\n}\n```\n\nWe can exclude abstracting values separated with commas.\n\nLet's add the final function to allow sending Ether to a recipient\n\n```\n/**\n* Sends the ether in msg.value across to the recipient\n*/\nfunction sendEther(address payable _to) public payable {\n    // Call returns a boolean value indicating success or failure.\n    // This is the current recommended method to use.\n    (bool sent, bytes memory data) = _to.call{value: msg.value}(\"\");\n    require(sent, \"Failed to send Ether\");\n}\n```\n\nThere are multiple ways to send ether, the _best_ of which is by `call`. Refer to this for more details: [https://solidity-by-example.org/sending-ether/](https://solidity-by-example.org/sending-ether/)\n\n**NOTE:** the Chainlink feed aggregators have 8 decimals of precision, you have to divide returned price by 10⁸ later when consuming this value on the frontend.\n\nThe contract, in entirety, should look like this now:\n\n```\n//SPDX-License-Identifier: Unlicense\npragma solidity ^0.8.0;\n\nimport \"@chainlink/contracts/src/v0.8/interfaces/AggregatorV3Interface.sol\";\n\ncontract SendEthInUsd {\n   AggregatorV3Interface internal priceFeed;\n\n    constructor(address aggregatorAddress) {\n        priceFeed = AggregatorV3Interface(aggregatorAddress);\n    }\n\n    /**\n    * Returns the latest price\n    */\n    function getEthUsd() public view returns (int) {\n        (\n            ,\n            int price,\n            ,\n            ,\n\n        ) = priceFeed.latestRoundData();\n        return price;\n    }\n    /**\n    * Sends the ether in msg.value across to the recipient\n    */\n    function sendEther(address payable _to) public payable {\n        // Call returns a boolean value indicating success or failure.\n        // This is the current recommended method to use.\n        (bool sent, ) = _to.call{value: msg.value}(\"\");\n        require(sent, \"Failed to send Ether\");\n    }\n\n}\n```\n\nLet's write the deploy script for this (`eth/scripts/deploy.js`), and get the contract address:\n\n```\nconst hre = require(\"hardhat\");\nconst config = require(\"../config\");\n\nasync function main() {\n  const SendEthInUsd = await hre.ethers.getContractFactory(\"SendEthInUsd\");\n  const contract = await SendEthInUsd.deploy(config.aggregatorAddress);\n  console.log(\"deploying...\");\n\n  await contract.deployed();\n\n  console.log(\"SendEthInUsd deployed to:\", contract.address);\n}\n\nmain()\n  .then(() =\u003e process.exit(0))\n  .catch((error) =\u003e {\n    console.error(error);\n    process.exit(1);\n  });\n\n```\n\nMake sure to setup a config file/add the aggregator address to be fed in this deploy script.\n\nThat's it!! Let's start writing the web part for this now and integrate the contract:\n\n### Integrating with the webapp\n\nMy weapons of choice for the webapp will be Next with TypeScript.\n\nWe are going to be making a very very simplistic vanilla looking UI for this. The real beauty lies in what's happening behind the scenes.\n\nLet's start with going into the `web` directory and initing a new Next app:\n\n```\ncd ../web\nnpx create-next-app@latest --typescript\n```\n\nThis should setup a boilerplate app for you.\n\nInside of `/pages`, create a new component called `Main.tsx`:\n\n```\nconst Main = () =\u003e {\n\n}\n\nexport default Main;\n```\n\nThis will be our component that will be doing all the heavy-lifting. Let's render it inside `index.tsx`:\n\n```\nimport type { NextPage } from \"next\";\nimport Main from \"./Main\";\nimport Head from \"next/head\";\nimport Image from \"next/image\";\nimport styles from \"../styles/Home.module.css\";\n\nconst Home: NextPage = () =\u003e {\n  return (\n    \u003cdiv className={styles.container}\u003e\n      \u003cHead\u003e\n        \u003ctitle\u003eSend ETH in USD\u003c/title\u003e\n        \u003cmeta name=\"description\" content=\"Send ETH in USD\" /\u003e\n        \u003clink rel=\"icon\" href=\"/favicon.ico\" /\u003e\n      \u003c/Head\u003e\n\n      \u003cmain className={styles.main}\u003e\n        \u003cMain /\u003e\n      \u003c/main\u003e\n\n      \u003cfooter className={styles.footer}\u003e\n        \u003ca\n          href=\"https://vercel.com?utm_source=create-next-app\u0026utm_medium=default-template\u0026utm_campaign=create-next-app\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        \u003e\n          Made with ❤️ by LW3DAO\n          \u003cspan className={styles.logo}\u003e\n            \u003cImage src=\"/vercel.svg\" alt=\"Vercel Logo\" width={72} height={16} /\u003e\n          \u003c/span\u003e\n        \u003c/a\u003e\n      \u003c/footer\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default Home;\n```\n\nNow that this is done, let's go back to `Main.tsx` and code it up:\n\nFirst, we need to ensure wallet connections. Let's use ethers.js and web3modal:\n`yarn add ethers web3modal`\n\nAdd this function:\n\n```\n  useEffect(() =\u003e {\n    if (!walletConnected) {\n      web3ModalRef.current = new Web3Modal({\n        network: \"kovan\",\n        providerOptions: {},\n        disableInjectedProvider: false,\n      });\n\n      connectWallet().then(() =\u003e {});\n      getEthPrice();\n    }\n  }, [walletConnected]);\n```\n\nThis runs everytime the wallet is connected/disconnected and/or the component refreshes.\n\nWhat is this `connectWallet`?\n\n```\n  const connectWallet = async () =\u003e {\n    try {\n      await getProviderOrSigner();\n      setWalletConnected(true);\n    } catch (error) {\n      console.error(error);\n    }\n  };\n```\n\nLet's also fetch our provider/signer helper:\n\n```\n // Helper function to fetch a Provider/Signer instance from Metamask\n  const getProviderOrSigner = async (needSigner = false) =\u003e {\n    const provider = await web3ModalRef!.current!.connect();\n    const web3Provider = new providers.Web3Provider(provider);\n\n    const { chainId } = await web3Provider.getNetwork();\n    if (chainId !== 42) {\n      window.alert(\"Please switch to the Kovan network!\");\n      throw new Error(\"Please switch to the Kovan network\");\n    }\n\n    if (needSigner) {\n      const signer = web3Provider.getSigner();\n      return signer;\n    }\n    return web3Provider;\n  };\n```\n\nNow that our wallet connection is good, let's jump to the good part.\n\nFetch the contract instance:\n\n```\n  const getContractInstance = (\n    providerOrSigner: providers.Provider | Signer\n  ) =\u003e {\n    return new Contract(\n      config.contractAddress,\n      config.contractAbi,\n      providerOrSigner\n    );\n  };\n```\n\nLet's start with initialising a few state variables:\n\n```\n  const [ethPriceInUsd, setEthPriceInUsd] = useState\u003cnumber\u003e();\n\n  const [amountToSend, setAmountToSend] = useState\u003cnumber\u003e();\n\n  const [recipientAddress, setRecipientAddress] = useState\u003cstring\u003e();\n\n  // True if user has connected their wallet, false otherwise\n  const [walletConnected, setWalletConnected] = useState(false);\n\n  const web3ModalRef = useRef\u003cCore\u003e();\n```\n\nIf you're thinking about the `getEthPrice` function in the `useEffect`, we call the contract to fetch the latest ETH price that we'll use to convert our USD value =\u003e Ether\n\n```\n const getEthPrice = async () =\u003e {\n    try {\n      const signer = await getProviderOrSigner(true);\n      const contract = getContractInstance(signer);\n      const _ethPriceInUsd = await contract.getEthUsd();\n      setEthPriceInUsd(\n        parseInt(BigNumber.from(_ethPriceInUsd).toString()) / 100000000\n      );\n    } catch (error: any) {\n      console.error(error);\n      alert(error?.message);\n    } finally {\n    }\n  };\n```\n\nRemember: we divide the gotten ETH price by 10^8 because of the decimal precision we previously discussed.\n\nLet's now bootstrap a quick form that will be responsible for taking in inputs:\n\n```\n\u003cdiv\u003e\n      \u003ch1 className=\"flex justify-center underline my-8\"\u003eSend ETH in USD\u003c/h1\u003e\n      \u003cdiv className=\"flex flex-col\"\u003e\n        \u003clabel className=\"my-2\"\u003e\n          Recipient:\n          \u003cinput\n            onChange={(event) =\u003e {\n              setRecipientAddress(event.target.value);\n            }}\n            name=\"recipient\"\n            type={\"text\"}\n          /\u003e\n        \u003c/label\u003e\n        \u003clabel className=\"my-2 flex flex-col\"\u003e\n          Anount to send (in USD):\n          \u003cspan className=\"text-xs mb-1\"\u003e\n            Current ETH price (in USD): {ethPriceInUsd}\n          \u003c/span\u003e\n          \u003cinput\n            onChange={(event) =\u003e {\n              setAmountToSend(parseFloat(event.target.value));\n            }}\n            name={\"amount\"}\n            step={\"any\"}\n            type={\"number\"}\n          /\u003e\n        \u003c/label\u003e\n      \u003c/div\u003e\n      \u003cspan className=\"flex justify-center\"\u003e\n        \u003cbutton\n          disabled={\n            ethPriceInUsd \u0026\u0026 recipientAddress \u0026\u0026 amountToSend ? false : true\n          }\n          className={`rounded-full border p-2 my-2 ${\n            ethPriceInUsd \u0026\u0026 recipientAddress \u0026\u0026 amountToSend\n              ? \"bg-blue-500\"\n              : \"bg-red-500\"\n          }`}\n          onClick={async () =\u003e {\n            await sendEth();\n          }}\n        \u003e\n          Send ETH\n        \u003c/button\u003e\n      \u003c/span\u003e\n    \u003c/div\u003e\n```\n\n**I've used TailwindCSS for styling**: you don't need to know TailwindCSS for working on this project. You can write vanilla CSS too :)\n\nThe state variables used were defined in the start, and they change values based on various functions we've written.\n\nLet's now work on the main `sendEth` function that'll be responsible of calling the payable function in the contract:\n\n```\nconst sendEth = async () =\u003e {\n    try {\n      if (!amountToSend || !recipientAddress) {\n        alert(\"please fill the form\");\n        console.log({ amountToSend, recipientAddress });\n        return;\n      }\n\n      const ethToSend = amountToSend / ethPriceInUsd!;\n\n      const signer = await getProviderOrSigner(true);\n      const contract = getContractInstance(signer);\n      const txn = await contract.sendEther(recipientAddress, {\n        value: parseEther(ethToSend.toString()),\n      });\n      txn.wait();\n      alert(\"txn sent\");\n      console.log({ txn });\n    } catch (error: any) {\n      console.error(error);\n      alert(error?.message);\n    }\n};\n```\n\nHere, we first check the form validity.\n\nIf everything's good, we calculate the Ether format of the USD price entered by the user (Amount of Ether to send = Amount to send in USD / Price of 1 ETH in USD)\n\nOnce that's done, we send the transaction adding the recipient address and `msg.value` :rocket:\n\nBefore going further to test it out, make sure to have your `config` and `ABI` setup:\n\nYou can choose how you want to structure it for yourself. The way I've done it is:\n\nIt lives in `./constants/` of my root directory.\n![](https://i.imgur.com/HOooxtd.png)\n\nAnd my `config.ts` looks like:\n\n```\nexport const config = {\n  contractAddress: \"0xFd6c3404D9eCb450fe9361FB9CD36A0265Ea74De\",\n  contractAbi: require(\"./ABI/SendEthInUsd.json\"),\n};\n```\n\nwhere `contractAddress` is the address of my earlier deployed contract.\n\nThat's about it. :rocket:\n\nThis is what our `Main.tsx` looks like, at the end:\n\n```\nimport { useEffect, useRef, useState } from \"react\";\nimport { BigNumber, Contract, providers, Signer } from \"ethers\";\nimport Web3Modal from \"web3modal\";\nimport Core from \"web3modal\";\nimport { config } from \"../constants/config\";\nimport { parseEther } from \"ethers/lib/utils\";\n\nconst Main = () =\u003e {\n  const [ethPriceInUsd, setEthPriceInUsd] = useState\u003cnumber\u003e();\n\n  const [amountToSend, setAmountToSend] = useState\u003cnumber\u003e();\n\n  const [recipientAddress, setRecipientAddress] = useState\u003cstring\u003e();\n\n  // True if user has connected their wallet, false otherwise\n  const [walletConnected, setWalletConnected] = useState(false);\n\n  const web3ModalRef = useRef\u003cCore\u003e();\n\n  // Helper function to connect wallet\n  const connectWallet = async () =\u003e {\n    try {\n      await getProviderOrSigner();\n      setWalletConnected(true);\n    } catch (error) {\n      console.error(error);\n    }\n  };\n\n  // Helper function to fetch a Provider/Signer instance from Metamask\n  const getProviderOrSigner = async (needSigner = false) =\u003e {\n    const provider = await web3ModalRef!.current!.connect();\n    const web3Provider = new providers.Web3Provider(provider);\n\n    const { chainId } = await web3Provider.getNetwork();\n    if (chainId !== 42) {\n      window.alert(\"Please switch to the Kovan network!\");\n      throw new Error(\"Please switch to the Kovan network\");\n    }\n\n    if (needSigner) {\n      const signer = web3Provider.getSigner();\n      return signer;\n    }\n    return web3Provider;\n  };\n\n  // Helper function to return a provider/signer\n  const getContractInstance = (\n    providerOrSigner: providers.Provider | Signer\n  ) =\u003e {\n    return new Contract(\n      config.contractAddress,\n      config.contractAbi,\n      providerOrSigner\n    );\n  };\n\n  //  piece of code that runs everytime the wallet is connected/disconnected and/or the component refreshes\n  useEffect(() =\u003e {\n    if (!walletConnected) {\n      web3ModalRef.current = new Web3Modal({\n        network: \"kovan\",\n        providerOptions: {},\n        disableInjectedProvider: false,\n      });\n\n      connectWallet().then(() =\u003e {});\n      getEthPrice();\n    }\n  }, [walletConnected]);\n\n  const getEthPrice = async () =\u003e {\n    try {\n      const signer = await getProviderOrSigner(true);\n      const contract = getContractInstance(signer);\n      const _ethPriceInUsd = await contract.getEthUsd();\n      setEthPriceInUsd(\n        parseInt(BigNumber.from(_ethPriceInUsd).toString()) / 100000000\n      );\n    } catch (error: any) {\n      console.error(error);\n      alert(error?.message);\n    } finally {\n    }\n  };\n\n  const sendEth = async () =\u003e {\n    try {\n      if (!amountToSend || !recipientAddress) {\n        alert(\"please fill the form\");\n        console.log({ amountToSend, recipientAddress });\n        return;\n      }\n      console.log({ amountToSend, recipientAddress });\n\n      const ethToSend = amountToSend / ethPriceInUsd!;\n\n      const signer = await getProviderOrSigner(true);\n      const contract = getContractInstance(signer);\n      const txn = await contract.sendEther(recipientAddress, {\n        value: parseEther(ethToSend.toString()),\n      });\n      txn.wait();\n      alert(\"txn sent\");\n      console.log({ txn });\n    } catch (error: any) {\n      console.error(error);\n      alert(error?.message);\n    }\n  };\n\n  return (\n    \u003cdiv\u003e\n      \u003ch1 className=\"flex justify-center underline my-8\"\u003eSend ETH in USD\u003c/h1\u003e\n      \u003cdiv className=\"flex flex-col\"\u003e\n        \u003clabel className=\"my-2\"\u003e\n          Recipient:\n          \u003cinput\n            onChange={(event) =\u003e {\n              setRecipientAddress(event.target.value);\n            }}\n            name=\"recipient\"\n            type={\"text\"}\n          /\u003e\n        \u003c/label\u003e\n        \u003clabel className=\"my-2 flex flex-col\"\u003e\n          Anount to send (in USD):\n          \u003cspan className=\"text-xs mb-1\"\u003e\n            Current ETH price (in USD): {ethPriceInUsd}\n          \u003c/span\u003e\n          \u003cinput\n            onChange={(event) =\u003e {\n              setAmountToSend(parseFloat(event.target.value));\n            }}\n            name={\"amount\"}\n            step={\"any\"}\n            type={\"number\"}\n          /\u003e\n        \u003c/label\u003e\n      \u003c/div\u003e\n      \u003cspan className=\"flex justify-center\"\u003e\n        \u003cbutton\n          disabled={\n            ethPriceInUsd \u0026\u0026 recipientAddress \u0026\u0026 amountToSend ? false : true\n          }\n          className={`rounded-full border p-2 my-2 ${\n            ethPriceInUsd \u0026\u0026 recipientAddress \u0026\u0026 amountToSend\n              ? \"bg-blue-500\"\n              : \"bg-red-500\"\n          }`}\n          onClick={async () =\u003e {\n            await sendEth();\n          }}\n        \u003e\n          Send ETH\n        \u003c/button\u003e\n      \u003c/span\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default Main;\n```\n\nCongratulations! Your own dApp which can take in a USD amount of ETH and transfer it to a recipient is now active! :rocket:\n\n## Testing\n\n- Connect your wallet on Kovan\n- Enter the recipient address you want to send the Ether to, and the amount in USD\n- This should now open the Metamask prompt to send the transaction. Make sure your account is well funded.\n- We send the transaction, and then we wait.\n- If everything goes well, you should see the transaction gotten mined and the Ether transfered!\n\n## Push to Github\n\nMake sure to push all this code to Github before proceeding to the next step.\n\n## Website Deployment\n\nWhat good is a website if you cannot share it with others? Let's work on deploying your dApp to the world so you can share it with all your LearnWeb3DAO frens.\n\n- Go to [Vercel Dashboard](https://vercel.com) and sign in with your GitHub account.\n- Click on the `New Project` button and select your `Chainlink-DataFeeds` repo.\n- When configuring your new project, Vercel will allow you to customize your `Root Directory`\n- Since our Next.js application is within a subfolder of the repo, we need to modify it.\n- Click `Edit` next to `Root Directory` and set it to `my-app`.\n- Select the framework as `Next.js`\n- Click `Deploy`\n- Now you can see your deployed website by going to your Vercel Dashboard, selecting your project, and copying the domain from there!\n\n## CONGRATULATIONS! You're all done!\n\nHopefully you enjoyed this tutorial.\nFeel free to go artistic on the frontend and add animations or whatever! :D\nDon't forget to share your verifiable on-chain coin flip website in the `#showcase` channel on Discord ❤️\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flearnweb3dao%2Fchainlink-datafeeds","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flearnweb3dao%2Fchainlink-datafeeds","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flearnweb3dao%2Fchainlink-datafeeds/lists"}