** This component is about interacting with a smart contract deployed by Lido. ** Lido is an Ethereum 2.0 liquid staking protocol that allows users to deposit their ether into Lido smart contracts and receive stETH, a tokenized version of their staked ether, in return. Initializing Contract Addresses. This declares the (immutable) addresses of the Lido contract on different Ethereum networks: ``` const lidoContract = "0xae7ab96520de3a18e5e111b5eaab095312d7fe84"; const mainnetLidoContract = "0xae7ab96520de3a18e5e111b5eaab095312d7fe84"; const rinkebyLidoContract = "0xF4242f9d78DB7218Ad72Ee3aE14469DBDE8731eD"; const kovanLidoContract = "0x4b7FCBC11BB45075b9A1F953128C09bC97D6a0D7"; const gorliLidoContract = "0x1643E812aE58766192Cf7D2Cf9567dF2C37e9B7F"; ``` `tokenDecimals` represents the decimal precision used by the token: ``` const tokenDecimals = 18; ``` Selecting A Contract Based On Network: ``` const network = "gorli"; ``` The application can work on different Ethereum networks. It determines the contract address to use based on the `network` value: ``` switch (network) { case "kovan": lidoContract = kovanLidoContract; break; //...other switches } ``` Fetching The Lido Contract ABI: ``` const lidoAbi = fetch( "https://raw.githubusercontent.com/lidofinance/lido-subgraph/master/abis/Lido.json" ); ``` Fetching the APR for staking on Lido from an API endpoint: ``` const apr = fetch( "https://api.allorigins.win/get?url=https://stake.lido.fi/api/sma-steth-apr" ); ``` Helper Functions/Conditions: - `getStakedBalance`: retrieves the staked balance of a user or receiver. ``` const getStakedBalance = (receiver) => { /*...*/ }; ``` - `submitEthers`: initiates the staking (submitting ethers function) on the contract. ``` const submitEthers = (strEther, _referral) => { /*...*/ }; ``` - Detect Sender And Fetch Balance ``` if (state.sender === undefined) { /*...*/ } if (state.balance === undefined && state.sender) { /*...*/ } ``` - Fetches the estimated transaction cost for the transaction. It does so by calculating gas fees in Ethereum and converting it to USD. ``` if (state.txCost === undefined) { /*...*/ } ``` - Fetching Stylesheets ``` const cssFont = fetch(/*...*/); const css = fetch(/*...*/); ``` Returning the JSX syntax is used to render the user interface. ``` return ( // JSX codes ); ```