如何使用JavaScript 或Solidity 在前端展示加密通證和法幣價格

Web3 開發者在前端顯示的協議顯示加密貨幣通證，而不是與法律的轉換結果。這樣的轉換平台，往往容易讓用戶選擇金字塔通證或成為一個更好的選擇。為加密通證價格要求對通證當前的價值，通證的價值其實是波動而參考的，而且還為用戶創造了一個很好的體驗，有很多人對美元或他們當地的貨幣的價值更舒服。

幸運的是，通過Chainlink 數據饋送，ETH/USD 等貨幣之間的關係非常好，這意味著開發者只需簡單地使用幾個簡單的步驟為用戶提供更好的體驗。顯示加密通證和法幣價格。

什麼是Chainlink 數據源？

Chainlink 的數據源是提供安全和真實的世界數據源的智能合約。它們由它們的、可信度的高和地理上分發運營商運營商提供的支持，例如確保數據源提供獨立的可靠設置。 ，以太幣/美元，目前利用31 個獨立的美元機器，或者用於確定ETH 對當前價格的可靠來源的回答。

需要31個信息源來獲取相同的信息？使用多個來源來匯總一個有效的響應，意味著我們可能有單點故障問題，並防止數據被篡改。

關於提供者（Provider）的說明

當與智能合約互動時連接有一個Web3的提供者。通常，這可以通過用戶的錢包連接獲得。沒有，或者你必須連接用戶的錢包，你可以通過以下方式完成同樣的功能：

const provider = new ethers.providers.JsonRpcProvider('RPC_URL_HERE');

RPC_URL_HERE可以從一個我喜歡的地方，比如煉金術, 英富拉, 莫拉利斯或者快速節點。提供者）是我們區塊鏈的“網關”。

本教程的另一個要求是一個以太坊JavaScript 庫。在這個例子中，我使用的是醚類庫。你需要安裝它，讓這里工作。

npm install --save ethers

使用JavaScript部署ETH/USD轉換

現在是需要在前端顯示ETH/USD價格的代碼。

如果你想跟著做，這個例子的代碼可以在例子庫中找到。自述文件.md中的說明，在本地運行這個例子。這個例子使用苗條，但同樣的概念應該適用於任何前端的JavaScript 框架，如React 或Vue。在SmartContract 的GitHub倉庫中，你還可以使用其他入門套件。

使用代碼可以通過語句導入前端：

import { getETHPrice } from '../utils/getETHPrice';

然後，將結果存儲為以美元計算的ETH 價格：

value = await getETHPrice();

假設ethAmount是要轉換的ETH金額，則使用此值從ETH轉為美元。

usdValue = Number(ethAmount * value).toFixed(2);

這裡是完整的文件：

~/utils/getEthPrice.js

import { ethers } from 'ethers';


export async function getETHPrice() {
    const provider = new 
ethers.providers.JsonRpcProvider('RPC_URL_HERE');

    // This constant describes the ABI interface of the contract, which will provide the price of ETH
    // It looks like a lot, and it is, but this information is generated when we compile the contract
    // We need to let ethers know how to interact with this contract.
    const aggregatorV3InterfaceABI = [
        {
            inputs: [],
            name: 'decimals',
            outputs: [{ internalType: 'uint8', name: '', type: 'uint8' }],
            stateMutability: 'view',
            type: 'function'
        },
        {
            inputs: [],
            name: 'description',
            outputs: [{ internalType: 'string', name: '', type: 'string' }],
            stateMutability: 'view',
            type: 'function'
        },
        {
            inputs: [{ internalType: 'uint80', name: '_roundId', type: 'uint80' }],
            name: 'getRoundData',
            outputs: [
                { internalType: 'uint80', name: 'roundId', type: 'uint80' },
                { internalType: 'int256', name: 'answer', type: 'int256' },
                { internalType: 'uint256', name: 'startedAt', type: 'uint256' },
                { internalType: 'uint256', name: 'updatedAt', type: 'uint256' },
                { internalType: 'uint80', name: 'answeredInRound', type: 'uint80' }
            ],
            stateMutability: 'view',
            type: 'function'
        },
        {
            inputs: [],
            name: 'latestRoundData',
            outputs: [
                { internalType: 'uint80', name: 'roundId', type: 'uint80' },
                { internalType: 'int256', name: 'answer', type: 'int256' },
                { internalType: 'uint256', name: 'startedAt', type: 'uint256' },
                { internalType: 'uint256', name: 'updatedAt', type: 'uint256' },
                { internalType: 'uint80', name: 'answeredInRound', type: 'uint80' }
            ],
            stateMutability: 'view',
            type: 'function'
        },
        {
            inputs: [],
            name: 'version',
            outputs: [{ internalType: 'uint256', name: '', type: 'uint256' }],
            stateMutability: 'view',
            type: 'function'
        }
    ];
    // The address of the contract which will provide the price of ETH
    const addr = '0x8A753747A1Fa494EC906cE90E9f37563A8AF630e';
    // We create an instance of the contract which we can interact with
    const priceFeed = new ethers.Contract(addr, aggregatorV3InterfaceABI, provider);
    // We get the data from the last round of the contract 
    let roundData = await priceFeed.latestRoundData();
    // Determine how many decimals the price feed has (10**decimals)
    let decimals = await priceFeed.decimals();
    // We convert the price to a number and return it
    return Number((roundData.answer.toString() / Math.pow(10, decimals)).toFixed(2));
}

我們需要的代碼中是聚合器V3接口ABI或ABI。這是我們將與互動合約的數據結構，我們需要讓醚類知道這些通常，你可能會在前端項目中把這些存儲在單獨的JSON文件中。在本例中，它被包含在實用程序文件中，這樣是把所有內容都在這裡。

// The address of the contract which will provide the price of ETH
    const addr = '0x8A753747A1Fa494EC906cE90E9f37563A8AF630e';

這個合約地址將根據網絡或價格對的變化而變化；你可以使用這些數據饋送合同地址中的一個。

// We get the data from the last round of the contract 
    let roundData = await priceFeed.latestRoundData();
    // Determine how many decimals the price feed has (10**decimals)
    let decimals = await priceFeed.decimals();
    // We convert the price to a number and return it
    return Number((roundData.answer.toString() / Math.pow(10, decimals)).toFixed(2));

與契約的意思是我們直接的。最新一輪數據，它返回：

• 圓形標識：輪次ID。
• 回答: 價格。
• 開始於：該輪次開始的發現。
• 更新時間：這一輪更新的目的地。
• 輪迴回答：計算結果的輪次ID。我們對回答這就是。這將是一個重要的數字。這就是我們需要知道答案的小數點。小數點它的作用。它返回要包含的小數照。

我們使用回答和十進制來回ETH的價格：

return Number((roundData.answer.toString() / Math.pow(10, decimals)).toFixed(2));

使用價格數據

我們可以用另外一個ETH 來舉例說明價格，下面我們用ETH 轉換成美元價格的例子。原始ETH是一個合同的餘額返回的字符串。

<!-- Display the raw ETH -->
{Number(rawETH).toFixed(8)} ETH
<!-- Display the ETH converted to USD -->
$ {(Number(rawETH) * value).toFixed(2)} USD

Chainlink 數據饋送提供了一個可靠的解決方案，它使用安全的方法將資產價值從ETH 轉換為美元。

使用Solidity

，在一個前端應用程序中創建一個實用的功能看起來很簡單。但是，如果我們能夠消除前端開發者對價格的擔心，並為他們處理價格問題呢？

對你的合同，你可以向終端用戶提供他們當前的價格數據例子。

pragma solidity ^0.8.0;
// Import the chainlink Aggregator Interface
import "@chainlink/contracts/src/v0.8/interfaces/AggregatorV3Interface.sol";

// Create the contract
contract YourAwesomeContract { 
// Declare the priceFeed as an Aggregator Interface
    AggregatorV3Interface internal priceFeed;

    constructor() {
/** Define the priceFeed
* Network: Rinkeby
    * Aggregator: ETH/USD
      * Address: 0x8A753747A1Fa494EC906cE90E9f37563A8AF630e
      */
        priceFeed = AggregatorV3Interface(
            0x8A753747A1Fa494EC906cE90E9f37563A8AF630e
        );
    } 

// OTHER CONTRACT LOGIC HERE

    /**
    * Returns the latest price and # of decimals to use
    */
    function getLatestPrice() public view returns (int256, uint8) {
// Unused returned values are left out, hence lots of ","s
        (, int256 price, , , ) = priceFeed.latestRoundData();
        uint8 decimals = priceFeed.decimals();
        return (price, decimals);
    }
}

首先，我們導入我們在前面版本中使用的相同的聚合器接口。

import "@chainlink/contracts/src/v0.8/interfaces/AggregatorV3Interface.sol";

然後，需要讓聚合器知道我們的價格信息。

priceFeed = AggregatorV3Interface(
            0x8A753747A1Fa494EC906cE90E9f37563A8AF630e
        );

在我們的獲取最新價格（）函數中，我們調用priceFeed.latestRoundData()。價格飼料引用是我們在的獲取ETH價格使用中使用的同一份合同。它返回：

• 圓形標識：輪次ID。
• 回答: 價格。
• 開始於：該輪次開始的發現。
• 更新時間：這一輪更新的目的地。
• 輪迴回答：計算答案的那一輪的ID。

這裡的代碼可能有點像。回答因此，我們不把其他字段的值分配給。

(, int256 price, , , ) = priceFeed.latestRoundData();

對前端的改變

現在，數據價值已經包含在你的智能合約中，我們只需要從前端訪問合約中的價值數據。

    async function getETHPrice() {
        let [ethPrice, decimals] = await 
yourAwesomeContract.getLatestPrice();
        ethPrice = Number(ethPrice / Math.pow(10, 
decimals)).toFixed(2);
        return ethPrice;
    }

這只是我們簡單的契約的消費者創造了一個更簡單的界面，因為他們不需要了解機器人或導入一個單獨的ABI。

總結

在這個技術中，我們展示瞭如何輕鬆轉換到Chain用戶的inlink數據源中，集成DApp中，集成適用於加密通證和法幣價格的鏈接價格數據源，開發他們可以調整他們的使用步驟，適用於他們的價格數據。

帖子 如何使用JavaScript 或Solidity 在前端展示加密通證和法幣價格 首先出現在 Chainlink 博客.

Source Link