Raw State: {JSON.stringify(state.image)}
-{n}
) - - console.log(lastNumber + page*10) - setDisplay(toDisplay); - setLastNumber(lastNumber + page*10); -}; - -return ( -Selected: {selected.join(', ')}
-; -``` - -Please login to be notified
- } - -``` - -Profile: {JSON.stringify(profile)}
-Widgets: {JSON.stringify(widget)}
-Profile: {JSON.stringify(profile)}
-Save a message showing some love to the NEAR Docs
- - -``` - -Index an action showing some love to the NEAR Docs
- - : -Login to index an action
} - -``` - -Number of indexed "readDocs" actions with key "docs": {readDocs.length}
- - Indexed actions - {JSON.stringify(readDocs)} - -``` - -You clicked {count} times
- -This component props: {JSON.stringify(props)}
-You clicked {count} times
-- You clicked more than 5 times -
- -2 + 3 = {add(2, 3)}
-2 * 3 = {multiply(2, 3)}
- -``` - -{uptime? `Uptime: ${uptime}s` : `Fetch a value` }
- - -``` - -Time Now: {Date.now()}
-Time Stored: {Storage.get('time_now')}
- - -``` - -{count} cheers for {name}!
- -Counter: {counter}
- {!context.accountId && -Please login to interact with the contract
- } - {context.accountId && - <> - - - - } - -``` - -Switch to Ethereum Mainnet
; -} - -// FETCH LIDO ABI - -const lidoContract = "0xae7ab96520de3a18e5e111b5eaab095312d7fe84"; -const tokenDecimals = 18; - -const lidoAbi = fetch( - "https://raw.githubusercontent.com/lidofinance/lido-subgraph/master/abis/Lido.json" -); -if (!lidoAbi.ok) { - return "Loading"; -} - -const iface = new ethers.utils.Interface(lidoAbi.body); - -// FETCH LIDO STAKING APR - -if (state.lidoArp === undefined) { - const apr = fetch( - "https://api.allorigins.win/get?url=https://stake.lido.fi/api/sma-steth-apr" - ); - if (!apr) return; - State.update({ lidoArp: JSON.parse(apr?.body?.contents) ?? "..." }); -} - -// HELPER FUNCTIONS - -const getStakedBalance = (receiver) => { - const encodedData = iface.encodeFunctionData("balanceOf", [receiver]); - - return Ethers.provider() - .call({ - to: lidoContract, - data: encodedData, - }) - .then((rawBalance) => { - const receiverBalanceHex = iface.decodeFunctionResult( - "balanceOf", - rawBalance - ); - - return Big(receiverBalanceHex.toString()) - .div(Big(10).pow(tokenDecimals)) - .toFixed(2) - .replace(/\d(?=(\d{3})+\.)/g, "$&,"); - }); -}; - -const submitEthers = (strEther, _referral) => { - if (!strEther) { - return console.log("Amount is missing"); - } - const erc20 = new ethers.Contract( - lidoContract, - lidoAbi.body, - Ethers.provider().getSigner() - ); - - let amount = ethers.utils.parseUnits(strEther, tokenDecimals).toHexString(); - - erc20.submit(lidoContract, { value: amount }).then((transactionHash) => { - console.log("transactionHash is " + transactionHash); - }); -}; - -// DETECT SENDER - -if (state.sender === undefined) { - const accounts = Ethers.send("eth_requestAccounts", []); - if (accounts.length) { - State.update({ sender: accounts[0] }); - console.log("set sender", accounts[0]); - } -} - -//if (!state.sender) return "Please login first"; - -// FETCH SENDER BALANCE - -if (state.balance === undefined && state.sender) { - Ethers.provider() - .getBalance(state.sender) - .then((balance) => { - State.update({ balance: Big(balance).div(Big(10).pow(18)).toFixed(2) }); - }); -} - -// FETCH SENDER STETH BALANCE - -if (state.stakedBalance === undefined && state.sender) { - getStakedBalance(state.sender).then((stakedBalance) => { - State.update({ stakedBalance }); - }); -} - -// FETCH TX COST - -if (state.txCost === undefined) { - const gasEstimate = ethers.BigNumber.from(1875000); - const gasPrice = ethers.BigNumber.from(1500000000); - - const gasCostInWei = gasEstimate.mul(gasPrice); - const gasCostInEth = ethers.utils.formatEther(gasCostInWei); - - let responseGql = fetch( - "https://api.thegraph.com/subgraphs/name/uniswap/uniswap-v2", - { - method: "POST", - headers: { "Content-Type": "application/json" }, - body: JSON.stringify({ - query: `{ - bundle(id: "1" ) { - ethPrice - } - }`, - }), - } - ); - - if (!responseGql) return ""; - - const ethPriceInUsd = responseGql.body.data.bundle.ethPrice; - - const txCost = Number(gasCostInEth) * Number(ethPriceInUsd); - - State.update({ txCost: `$${txCost.toFixed(2)}` }); -} - -// FETCH CSS - -const cssFont = fetch( - "https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800" -).body; -const css = fetch( - "https://pluminite.mypinata.cloud/ipfs/Qmboz8aoSvVXLeP5pZbRtNKtDD3kX5D9DEnfMn2ZGSJWtP" -).body; - -if (!cssFont || !css) return ""; - -if (!state.theme) { - State.update({ - theme: styled.div` - font-family: Manrope, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; - ${cssFont} - ${css} -`, - }); -} -const Theme = state.theme; - -// OUTPUT UI - -const getSender = () => { - return !state.sender - ? "" - : state.sender.substring(0, 6) + - "..." + - state.sender.substring(state.sender.length - 4, state.sender.length); -}; - -return ( -
-
-2. Repost the message and convert it to a Blog post
-
- Once the message has been posted, promoting it to a blog post is straight forward.
- Just click on the repost button, and select the `Blog` option:
-
- 
-
-3. That's it, your blog post has been published, and you can find it under the `Blog` tab in your [social profile](https://dev.near.org/near/widget/ProfilePage?accountId=bucanero.near&tab=blog):
-
- 
-
-
-:::note
-
-You can find the published blog post example in [this link](https://dev.near.org/near/widget/BlogPostPage?accountId=bucanero.near&blockHeight=117452680&returnLocation=/near/widget/ProfilePage?accountId=bucanero.near&tab=blog).
-
-:::
diff --git a/docs/3.tutorials/near-components/bos-ethersjs-best-practices.md b/docs/3.tutorials/near-components/bos-ethersjs-best-practices.md
deleted file mode 100644
index f455166d660..00000000000
--- a/docs/3.tutorials/near-components/bos-ethersjs-best-practices.md
+++ /dev/null
@@ -1,413 +0,0 @@
----
-id: ethers-js-best-practices
-title: Best Practices for Ethereum developers on NEAR
----
-
-import {WidgetEditor} from "@site/src/components/widget-editor"
-
-In this example, we will create an Ethereum dApp on NEAR that functions as a portfolio manager, displaying the current balances for a list of tokens. Additionally, we will display current market value of each asset in the portfolio.
-
-We will be using several technologies:
-- NEAR Components for the user interface (UI).
-- [Ethers.js](bos-ethersjs.md) for retrieving balance data from the blockchain.
-- CoinGecko API for fetching static content with information about tokens and their current prices.
-- [Social-DB](https://github.com/NearSocial/social-db) for storing the list of tokens to be tracked.
-- GitHub Actions for caching static content, speeding up loading, and circumventing rate limits.
-
-## Step 1: Load balances from chain
-
-Let's start with a simple example and consider an application where we want to display a user's balances for multiple tokens.
-
-### Source code
-
-```js
-// Load current sender address if it was not loaded yet
-if (state.sender == undefined && Ethers.provider()) {
- Ethers.provider()
- .send("eth_requestAccounts", [])
- .then((accounts) => {
- if (accounts.length) {
- // save sender address to the state
- State.update({ sender: accounts[0] });
- }
- });
-}
-
-// Load ERC20 ABI JSON
-const erc20Abi = fetch(
- "https://ipfs.near.social/ipfs/bafkreifgw34kutqcnusv4yyv7gjscshc5jhrzw7up7pdabsuoxfhlnckrq"
-);
-if (!erc20Abi.ok) {
- return "Loading";
-}
-
-// Create contract interface
-const iface = new ethers.utils.Interface(erc20Abi.body);
-
-// specify list of tokens
-const tokens = [
- "0x2260FAC5E5542a773Aa44fBCfeDf7C193bc2C599", // WBTC
- "0x6b175474e89094c44da98b954eedeac495271d0f", // DAI
- "0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984", // UNI
-];
-
-// load receiver's balance for a giver token
-const getTokenBalance = (receiver, tokenId) => {
- // encode `balanceOf` request
- const encodedData = iface.encodeFunctionData("balanceOf", [receiver]);
-
- // send request to the network
- return Ethers.provider()
- .call({
- to: tokenId,
- data: encodedData,
- })
- .then((rawBalance) => {
- // decode response
- const receiverBalanceHex = iface.decodeFunctionResult(
- "balanceOf",
- rawBalance
- );
-
- return Big(receiverBalanceHex).toFixed(0);
- });
-};
-
-const loadTokensData = () => {
- // load balances of all tokens
- tokens.map((tokenId) => {
- getTokenBalance(state.sender, tokenId).then((value) => {
- // save balance of every token to the state
- State.update({ [tokenId]: { balance: value, ...state[tokenId] } });
- });
- });
-};
-
-const renderToken = (tokenId) => (
- Your account: {state.sender}
- - ); -} else { - // output connect button for anon user - returnMy JSX context 1.
-Here's another paragraph.
- - ), - }, - { - value: "2", - header: "Header 2", - content: ( - <> -My JSX context 2.
-Here's another paragraph.
- - ), - }, - ], - }} -/>); -``` - -