diff --git a/docs/2.build/3.near-components/anatomy/builtin-components.md b/docs/2.build/3.near-components/anatomy/builtin-components.md
deleted file mode 100644
index fca9965e470..00000000000
--- a/docs/2.build/3.near-components/anatomy/builtin-components.md
+++ /dev/null
@@ -1,295 +0,0 @@
----
-id: builtin-components
-title: List of Native Components
----
-
-import {WidgetEditor} from "@site/src/components/widget-editor"
-
-A list of all the built-in components to be used on Near Components.
-
----
-
-## Widget
-
-The predefined component `Widget` allows you to include an existing component into your code, thus enabling to create complex applications by composing components.
-
-
-
-```ts
-const props = { name: "Anna", amount: 3 };
-
-return ;
-```
-
-
-
----
-
-## IpfsImageUpload
-
-A built-in component that enables users to directly upload an image to the InterPlanetary File System (IPFS).
-
-
-
-```js
-State.init({image: {}})
-
-return <>
-
Raw State: {JSON.stringify(state.image)}
-
-
-```
-
-
-
----
-
-## Files
-
-A built-in component that enables to input files with drag and drop support. Read more about the `Files` component [here](https://www.npmjs.com/package/react-files).
-
-
-
-```js
-const [img, setImg] = useState(null);
-const [msg, setMsg] = useState('Upload an Image')
-
-const uploadFile = (files) => {
- setMsg('Uploading...')
-
- const file = fetch(
- "https://ipfs.near.social/add",
- {
- method: "POST",
- headers: { Accept: "application/json" },
- body: files[0]
- }
- )
-
- setImg(file.body.cid)
- setMsg('Upload an Image')
-}
-
-return <>
-
- {msg}
-
- {img ?
: ''}
-;
-```
-
-
-
----
-
-## Markdown
-
-A component that enables to render Markdown.
-
-
-
-```jsx
-const markdown = (`
-## A title
-
-This is some example **markdown** content, with _styled_ text
-`)
-
-return ;
-```
-
-
-
-:::tip Markdown Editor
-
-Checkout this [Markdown Editor](https://near.social/#/mob.near/widget/MarkdownEditorIframeExample), and [its source code](https://near.social/mob.near/widget/WidgetSource?src=mob.near/widget/MarkdownEditorIframeExample).
-:::
-
----
-
-## OverlayTrigger
-
-Used to display a message or icon when the mouse is over a DOM element.
-
-
-
-```javascript
-const [show, setShow] = useState(false);
-
-const overlay = (
-
- This is the overlay Message
-
-);
-
-return (
-
-
-
-);
-```
-
-
-
-
-
- Component props
-
-The OverlayTrigger component has several props that allow you to customize its behavior:
-
-| Prop | Description |
-|-------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| `show` | A boolean value that determines whether the overlay is currently visible or not. |
-| `trigger` | An array of events that trigger the display of the overlay. In this example, the `trigger` prop is set to `["hover", "focus"]`, which means that the overlay will be displayed when the user hovers over or focuses on the element. |
-| `delay` | An object that specifies the delay before the overlay is displayed or hidden. In this example, the `delay` prop is set to `{ show: 250, hide: 300 }`, which means that the overlay will be displayed after a 250-millisecond delay and hidden after a 300-millisecond delay. |
-| `placement` | A string that specifies the position of the overlay relative to the trigger element. In this example, the `placement` prop is set to `"auto"`, which means that the position will be automatically determined based on available space. |
-| `overlay` | The content that will be displayed in the overlay. In this example, the `overlay` prop is set to a `
` element containing the message "This is the overlay message. |
-
-
----
-
-## InfiniteScroll
-
-Infinitely load a grid or list of items. This component allows you to create a simple, lightweight infinite scrolling page or element by supporting both window and scrollable elements.
-
-Read more about the [react-infinite-scroller](https://www.npmjs.com/package/react-infinite-scroller) package.
-
-
-
-```js
-const allNumbers = Array.from(Array(100).keys())
-const [lastNumber, setLastNumber] = useState(0);
-const [display, setDisplay] = useState([]);
-
-const loadNumbers = (page) => {
- const toDisplay = allNumbers
- .slice(0, lastNumber + page*10)
- .map(n =>
{n}
)
-
- console.log(lastNumber + page*10)
- setDisplay(toDisplay);
- setLastNumber(lastNumber + page*10);
-};
-
-return (
-
- {display}
-
-);
-```
-
-
-
----
-
-## TypeAhead
-
-Provides a type-ahead input field for selecting an option from a list of choices. More information about the component can be found [here](https://github.com/ericgio/react-bootstrap-typeahead).
-
-
-
-```jsx
-const [selected, setSelected] = useState([]);
-const options = ["Apple", "Banana", "Cherry", "Durian", "Elderberry"];
-
-return <>
- setSelected(v)}
- placeholder='Choose a fruit...'
- />
-
-
-);
-```
-
-
-
----
-
-## Tooltip
-
-Displays a message once the mouse hovers over a particular item. This component was imported from [`React-Bootstrap`](https://react-bootstrap-v3.netlify.app/components/tooltips/).
-
-
-
-```js
-const tooltip = (
-
- Holy guacamole! Check this info.
-
-);
-
-return <>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-
\ No newline at end of file
diff --git a/docs/2.build/3.near-components/anatomy/near.md b/docs/2.build/3.near-components/anatomy/near.md
deleted file mode 100644
index c906ee8c9bb..00000000000
--- a/docs/2.build/3.near-components/anatomy/near.md
+++ /dev/null
@@ -1,160 +0,0 @@
----
-id: near
-title: Interacting with Near
----
-
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import {WidgetEditor} from "@site/src/components/widget-editor"
-
-The components can use the `Near` object to interact with smart contracts in the NEAR blockchain. There are three methods:
-
-- [`Near.view`](#nearview)
-- [`Near.block`](#nearblock)
-- [`Near.call`](#nearcall)
-
----
-
-## Near.view
-Queries a read-only method from a NEAR smart contract, returning:
-- **`null`**: If the query is still being processed
-- **`undefined`**: If the query is complete and no value was returned by the contract
-- A **value**: If the query is complete and a value was returned by the contract
-
-
-
-```js
-const greeting = Near.view("hello.near-examples.testnet", "get_greeting", {});
-
-if (greeting === null) return "Loading...";
-
-return `The contract says: ${greeting}`;
-```
-
-
-
-
- Parameters
-
-| param | required | type | description |
-|--------------------|--------------|-----------------|--------------------------------------------------------------------------------------------------------------------------------|
-| `contractName` | **required** | string | Name of the smart contract |
-| `methodName` | **required** | string | Name of the method to call |
-| `args` | _optional_ | object instance | Arguments to pass to the method |
-| `blockId/finality` | _optional_ | string | Block ID or finality of the transaction |
-| `subscribe` | _optional_ | boolean | This feature allows users to subscribe to a query, which automatically refreshes the data for all subscribers every 5 seconds. |
-
-
-
-:::tip
-Notice that the optional parameter `subscribe` allows users to subscribe to a query, which automatically refreshes the data every 5 seconds.
-:::
-
-
-
-#### Avoiding a Common Pitfall
-
-If you want to initialize the state with the result of a `Near.view` call, be sure to check first that the value was obtained, to avoid initializing the state with `null`.
-
-
-
-```js
-const contractGreet = Near.view("hello.near-examples.testnet", "get_greeting", {});
-
-// you need to first check that the value was obtained
-if (contractGreet === null) return "Loading...";
-
-const [greeting, setGreeting] = useState(contractGreet);
-
-return `The contract says: ${greeting}`;
-```
-
-
-
-If you don't want to delay the render of your component, you can also use the `useEffect` hook to control the value returned by `Near.view`
-
-
-
-```js
-const contractGreet = Near.view('hello.near-examples.testnet', 'get_greeting');
-
-const [greeting, setGreeting] = useState('Loading ...');
-
-useEffect(() => {
- if (contractGreet !== null) setGreeting(contractGreet);
-}, [contractGreet]);
-
-return `The contract says: ${greeting}`;
-```
-
-
-
----
-
-## Near.call
-
-Calls a smart contract method from the blockchain. Since a transaction needs to be signed, the user must be logged in in order to make the call.
-
-
-
-```js
-if (!context.accountId) return "Please login...";
-
-const onClick = () => {
- Near.call(
- "hello.near-examples.testnet",
- "set_greeting",
- { greeting: "Hello!" }
- );
-};
-
-return <>
-
Hello {context.accountId}
-
-;
-```
-
-
-
- Parameters
-
-| param | required | type | description |
-|----------------|--------------|-----------------|-----------------------------------------------------------------------------|
-| `contractName` | **required** | string | Name of the smart contract to call |
-| `methodName` | **required** | string | Name of the method to call on the smart contract |
-| `args` | _optional_ | object instance | Arguments to pass to the smart contract method as an object instance |
-| `gas` | _optional_ | string / number | Maximum amount of gas to be used for the transaction (default 300Tg) |
-| `deposit` | _optional_ | string / number | Amount of NEAR tokens to attach to the call as deposit (in yoctoNEAR units) |
-
-
-
-:::tip
-Remember that you can login using the `Login` button at the navigation bar.
-:::
-
----
-
-## Near.block
-
-Queries a block from the blockchain.
-
-
-
-```js
-return Near.block("optimistic");
-```
-
-
-
-
- Parameters
-
-| param | required | type | description |
-|-------------------------|------------|------|---------------------------------------------------------------------------------------------------------------------------------------------------|
-| `blockHeightOrFinality` | _optional_ | any | The block height or finality level to use for the blockchain query (desired block height, or one of the following strings: `optimistic`, `final`) |
-
-- desired block height: The height of the specific block to query, expressed as a positive integer
-- `optimistic`: Uses the latest block recorded on the node that responded to your query (< 1 second delay)
-- `final`: a block that has been validated on at least 66% of the nodes in the network (approx. 2s)
-
-
\ No newline at end of file
diff --git a/docs/2.build/3.near-components/anatomy/notifications.md b/docs/2.build/3.near-components/anatomy/notifications.md
deleted file mode 100644
index b58d50fcca0..00000000000
--- a/docs/2.build/3.near-components/anatomy/notifications.md
+++ /dev/null
@@ -1,184 +0,0 @@
----
-id: notifications
-title: Social Notifications
----
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import {WidgetEditor} from "@site/src/components/widget-editor"
-
-Applications such as [NEAR Social](https://near.social) and the [NEAR Dev Portal](https://dev.near.org/) allow components to send notifications to their users.
-
-Notifications are great to inform users in real time that something has happened, and can be [easily incorporated into any web app](../../../3.tutorials/near-components/push-notifications.md).
-
----
-
-## Sending Notifications
-
-Notifications are implemented as a particular case of [indexed actions](./social.md#socialindex).
-
-This means that to send a notification we just need to `index` the `notify` action for the indexer, with a `key` and a `value`.
-
-- The `key` tells **which account** to notify.
-- The `value` includes the [notification type](#notification-types) and the item being notified of.
-
-
-
-```js
-const notifyMe = () => {
- Social.set({
- index: {
- notify: JSON.stringify({
- key: context.accountId,
- value: "docs notification"
- })
- }
- });
-}
-
-return <>
- {context.accountId?
-
- :
-
Please login to be notified
- }
-
-```
-
-
-
-
-In this example, the account executing the code is notifying `mob.near` that they liked their social post created at the block height `102169725`.
-
----
-
-## Notification Types
-
-Since notifications are indexed actions, anyone can create their own kind of notification.
-
-While there is no standard for notifications, we recommend using the following types:
-
-
-
-
-```js
- Social.set({
- index: JSON.stringify({
- notify: {
- key: "mob.near",
- value: {
- type: "custom",
- message: "A message in the notification",
- widget: "The widget to open when clicking on the notification",
- params: { parameters: "to pass to the widget", ... },
- },
- }
- })
- });
-```
-
-**Note**: currently, only dev.near.org implements custom notifications
-
-
-
-
-
-```js
- Social.set({
- index: JSON.stringify({
- notify: {
- key: "mob.near",
- value: {
- type: "like",
- item: {
- type: "social",
- path: "mob.near/post/main",
- blockHeight: 102169725
- }
- }
- }
- })
- })
-```
-
-**Reference**: [LikeButton](https://near.org/near/widget/ComponentDetailsPage?src=near/widget/LikeButton&tab=source)
-
-
-
-
-
-```js
- Social.set({
- index: JSON.stringify({
- notify: {
- key: "nearhacks.near",
- value: {
- type: "comment",
- item: {
- type: "social",
- path: "nearhacks.near/post/main",
- blockHeight: 102224773
- }
- }
- }
- })
- })
-```
-
-**Reference**: [CommentButton](https://near.org/near/widget/ComponentDetailsPage?src=near/widget/Comments.Compose&tab=source)
-
-
-
-
-
-```js
- Social.set({
- index: JSON.stringify({
- notify: {
- key: "mob.near",
- value: {
- type: "follow",
- }
- }
- })
- })
-```
-
-**Reference**: [FollowButton](https://near.org/near/widget/ComponentDetailsPage?src=near/widget/FollowButton&tab=source)
-
-
-
-
-
-:::caution
-There is no standard for notifications, but you can contribute to create one [in this public discussion](https://github.com/NearSocial/standards/pull/19/files).
-:::
-
----
-
-## Parsing Notifications
-
-In order to get all notifications for an user, we make a call to the Social indexer.
-
-
-
-```js
-// login to see your notifications
-const accountId = context.accountId || 'influencer.testnet'
-
-const index = Social.index("notify", accountId, {limit: 2, order: "desc", subscribe: true});
-
-return <>
-
Notifications for {accountId}
- {index.map(e => <> {JSON.stringify(e, null, 2)} ) }
-
-```
-
-
-
-:::caution
-Please notice that anyone can create a notification for the user, and thus some form of filtering might be needed.
-:::
-
-:::tip
-You can also check how the [Notifications Page](https://near.org/near/widget/ComponentDetailsPage?src=near/widget/NotificationsPage&tab=source) is implemented.
-:::
diff --git a/docs/2.build/3.near-components/anatomy/social.md b/docs/2.build/3.near-components/anatomy/social.md
deleted file mode 100644
index 9d62c34c7f2..00000000000
--- a/docs/2.build/3.near-components/anatomy/social.md
+++ /dev/null
@@ -1,348 +0,0 @@
----
-id: social
-title: Social Interactions
----
-
-import {WidgetEditor} from "@site/src/components/widget-editor"
-
-NEAR components can natively communicate with the [SocialDB smart contract](https://github.com/NearSocial/social-db) (currently deployed at [social.near](https://nearblocks.io/address/social.near)).
-
-The `SocialDB` is a contract that stores `key-value` pairs, and is used mostly to store social-related data, such as `posts`, `likes`, or `profiles`.
-
-:::tip
-Besides user data, the `SocialDB` contract stores **all existing NEAR components**.
-:::
-
----
-
-## Social.get
-
-`Social.get` queries a key from the SocialDB contract and returns the data. The key being queried can contain wildcards.
-
-For example:
-
- - `alice.near/profile/**` will match the entire profile data of account alice.near.
- - `alice.near/profile/*` will match all the fields of the profile, but not the nested objects.
- - `alice.near/profile/name` will match only the name field of the profile.
- - `*/widget/*` will match all the widgets of all the accounts.
-
-
-
-
-
-```js
-// Ask for the `profile` key of the influencer.testnet account
-const profile = Social.get("influencer.testnet/profile/*");
-
-// Ask a component from the influencer.testnet account
-const widget = Social.get("influencer.testnet/widget/Greeter");
-
-if(profile === null || widget === null) return "Loading ..."
-
-return (
-
-
Profile: {JSON.stringify(profile)}
-
Widgets: {JSON.stringify(widget)}
-
-);
-```
-
-
-
-
-
- Parameters
-
-| param | required | type | description |
-|------------|--------------|--------------------|------------------------------|
-| `patterns` | **required** | string / string[] | the path pattern(s) |
-| `finality` | _optional_ | `"final"` / number | the block height or finality |
-| `options` | _optional_ | object | the `options` object. |
-
-:::info options object
-
-- `subscribe` _(optional)_: if true, the data will be refreshed every 5 seconds.
-- `return_deleted` _(optional)_: whether to return deleted values (as `null`). Default is `false`.
-
-:::
-
-The block height or finality can be used to get the data at a specific block height or finality.
-If the block height or finality is not specified, the data will be fetched at the `optimistic` finality (the latest block height).
-
-For block height and finality `final`, instead of calling the NEAR RPC directly, the VM uses the Social API Server to fetch the data.
-
-Social API server indexes the data for SocialDB and allows to fetch the data at any block height with additional options.
-
-It also allows returning more data than an RPC call because it's not restricted by the gas limit.
-In general, the API server also serves data faster than the NEAR RPC, because it doesn't execute the contract code in a virtual machine.
-
-
-
-:::tip
-While the data is fetching, `Social.get` returns `null`.
-:::
-
-
----
-
-## Social.getr
-`Social.getr` is just a wrapper helper for `Social.get`, it appends `**` to each of the path pattern.
-
-
-
-```js
-const profile = Social.getr("influencer.testnet/profile");
-
-return (
-
-
Profile: {JSON.stringify(profile)}
-
-);
-```
-
-
-
-
- Parameters
-
-| param | required | type | description |
-|------------|--------------|--------------------|------------------------------|
-| `patterns` | **required** | string / string[] | the path pattern(s) |
-| `finality` | _optional_ | `"final"` / number | the block height or finality |
-| `options` | _optional_ | object | the `options` object. |
-
-:::info options object
-
-- `subscribe` _(optional)_: if true, the data will be refreshed every 5 seconds.
-- `return_deleted` _(optional)_: whether to return deleted values (as `null`). Default is `false`.
-
-:::
-
-
-
----
-
-## Social.keys
-
-The `keys` method allows to get the list of keys that match a pattern. It's useful for querying the data without reading values.
-
-It also has an additional `options` field that can be used to specify the return type and whether to return deleted keys.
-
-
-
-```js
-const data = Social.keys(`influencer.testnet/profile/*`, "final");
-
-return JSON.stringify(data)
-```
-
-
-
-
- Parameters
-
-`Social.keys` takes up to 3 arguments:
-
-| param | required | type | description |
-|------------|--------------|--------------------|------------------------------|
-| `patterns` | **required** | string / string[] | the path pattern(s) |
-| `finality` | _optional_ | `"final"` / number | the block height or finality |
-| `options` | _optional_ | object | the `options` object. |
-
-:::info options object
-
-- `subscribe` _(optional)_: if true, the data will be refreshed every 5 seconds.
-- `return_type` _(optional)_: either `"History"`, `"True"`, or `"BlockHeight"`. If not specified, it will return the `"True"`.
-- `return_deleted` _(optional)_: whether to return deleted values (as `null`). Default is `false`.
-- `values_only` _(optional)_: whether to return only values (don't include objects). Default is `false`.
-
-:::
-
-
-
-:::tip
-The Social API server supports custom options `return_type: "History"`. For each matching key, it will return an array containing all the block heights when the value was changed in ascending order.
-It can be used for building a feed, where the values are overwritten.
-:::
-
----
-
-## Social.set
-
-Takes a `data` object and commits it to SocialDB. The data object can contain multiple keys, and each key can contain multiple values.
-
-Importantly, a user can only commit to **their own** space in `SocialDB` (e.g. `alice.near` can only write in `alice.near/**`), except if [**given explicit permission**](https://github.com/NearSocial/social-db#permissions) by the owner of another space.
-
-Each time a user wants to commit data, they will be prompted to confirm the action. On confirming, the user can choose to not be asked again in the future.
-
-
-
-```js
-const onClick = () => {
- Social.set({
- post: {
- main: JSON.stringify({
- type: "md",
- text: "I've read the docs!"
- })
- }
- })
-}
-
-if(!context.accountId) return "Please login...";
-
-return <>
-
Save a message showing some love to the NEAR Docs
-
-
-```
-
-
-
-
- Parameters
-
-`Social.set` arguments:
-
- | param | required | type | description |
- |-----------|--------------|--------|----------------------------------------------------------------------------------------------------|
- | `data` | **required** | object | the data object to be committed. Similar to `CommitButton`, it shouldn't start with an account ID. |
- | `options` | _optional_ | object | optional object. |
-
-:::info options object
-
-- `force` _(optional)_: whether to overwrite the data.
-- `onCommit` _(optional)_: function to trigger on successful commit. Will pass the
-data that was written (including `accountID`).
-- `onCancel` _(optional)_: function to trigger if the user cancels the commit.
-
-:::
-
-
-
-:::tip
-By default `Social.set` will omit saving data that is already saved (e.g. if the user already liked a post, it won't save the like again). To force saving the data, pass the `force` option.
-:::
-
----
-
-## Social.index
-NEAR Social readily provides an indexer - a service that listen to actions in SocialDB, and caches them so they can be retrieved without needing to interact with the contract.
-
-The indexer is very useful, for example, to rapidly store and retrieve information on all comments for a post. Without the indexer, we would need to check all entries in the contract to see who answered, surely running out of GAS before completion.
-
-
-
-### Indexing an Action
-To index an action we need to add the `index` key to the data being saved, within the `index` key we will save the `action` being indexed, alongside a `key` and a `value` that identifies this specific instance.
-
-
-
-```js
-// General form of an indexed action
-// {
-// index: {
-// actionName: JSON.stringify({ key, value })
-// }
-// }
-
-const onClick = () => {
- Social.set({
- index: {
- readDocs: JSON.stringify({key: "docs", value: "like"})
- } ,
- })
-}
-
-return <>
- {context.accountId ?
- <>
-
Index an action showing some love to the NEAR Docs
-
- :
-
Login to index an action
}
-
-```
-
-
-
-In the example above we index a `docs` action. In this case the `action` is `docs`, and the `key` that identifies it is `"read"`.
-
-
-
- Standards
-
-#### Indexing a Post
-To index a post, the standard is to save the action `post`, with `{key: "main", value: {type: "md"}`.
-
-```js
-{
- index: {
- post: JSON.stringify({
- key: "main",
- value: {type: "md"}
- })
- }
-}
-```
-
-#### Indexing a Like
-To index a like, the standard is to save the action `like`, with `{key: object-representing-the-post, value: {type: "like" }}`
-
-```js
-{
- index: {
- like: JSON.stringify({
- key: {type: 'social', path: 'influencer.testnet/post/main', blockHeight: 152959480 },
- value: {type: "like"}})
- }
-}
-```
-
-
-
-
-
-### Retrieving Indexed Actions
-
-To retrieve indexed actions we use the `Social.index` method. It takes the `action` and the `key` as arguments, and returns an array of all the indexed values alongside the `blockHeight` in which they were indexed, and which user made the action.
-
-
-
-
-```js
-const readDocs = Social.index("readDocs", "docs")
-
-return <>
-
Number of indexed "readDocs" actions with key "docs": {readDocs.length}
-
- Indexed actions
- {JSON.stringify(readDocs)}
-
-```
-
-
-
-
-
- Parameters
-
-`Social.index` arguments:
-
- | param | required | type | description |
- |-----------|--------------|--------|--------------------------------------------------------------------------------------------|
- | `action` | **required** | string | is the `index_type` from the standard, e.g. in the path `index/like` the action is `like`. |
- | `key` | **required** | string | is the inner indexed value from the standard. |
- | `options` | _optional_ | object | the `options` object. |
-
-:::info options object
-
-- `subscribe` _(optional)_: if true, the data will be refreshed every 5 seconds.
-- `accountId` _(optional)_: If given, it should either be a string or an array of account IDs to filter values by them. Otherwise, not filters by account Id.
-- `order` _(optional)_: Either `asc` or `desc`. Defaults to `asc`.
-- `limit` _(optional)_: Defaults to `100`. The number of values to return. Index may return more than index values, if the last elements have the same block height.
-- `from` _(optional)_: Defaults to `0` or `Max` depending on order.
-
-:::
-
-
\ No newline at end of file
diff --git a/docs/2.build/3.near-components/anatomy/state.md b/docs/2.build/3.near-components/anatomy/state.md
deleted file mode 100644
index 7a25b75741c..00000000000
--- a/docs/2.build/3.near-components/anatomy/state.md
+++ /dev/null
@@ -1,114 +0,0 @@
----
-id: state
-title: Basics
----
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import {WidgetEditor} from "@site/src/components/widget-editor"
-
-Borrowing from React, Near Components use hooks such as [**`useState`**](#state) and [**`useEffect`**](#useeffect-hook) to handle the state's logic, and [**props**](#props) to receive parameters.
-
-Near Components are stored in the blockchain, for which you will use the `NEAR VM` to [retrieve and execute them in the browser](../../4.web3-apps/integrate-components.md).
-
-Using a VM enforces components to be sandboxed, making them very secure since they cannot access your `LocalStorage` or other elements in the page they are incorporated to. However, because of this, components cannot import external libraries. However, they can [**import functions**](#import) from other components.
-
----
-
-## State
-To handle the component's state you can use `useState` hook. The `useState` hook returns a tuple of two values: the current state and a function that updates it.
-
-
-
-```jsx
-const [count, setCount] = useState(0);
-
-return (
-
-
You clicked {count} times
-
-
-);
-
-```
-
-
-
-Each time a state variable is updated, the component will be **re-rendered**. This means that the **whole code will run again**.
-
----
-
-## Props
-Each component has access to a local variable named `props` which holds the properties received as input when the component is composed.
-
-
-
-```jsx
-return <>
-
This component props: {JSON.stringify(props)}
-
-
-```
-
-
-
----
-
-## useEffect Hook
-
-The [`useEffect` hook](https://react.dev/learn/synchronizing-with-effects) is used to handle side effects. It will execute each time one of the dependencies changes.
-
-
-
-```jsx
-const [count, setCount] = useState(0);
-const [visible, setVisible] = useState(false);
-
-useEffect(() => {
- if(count > 5) setVisible(true);
-}, [count]);
-
-return (
-
-
You clicked {count} times
-
- You clicked more than 5 times
-
-
-
-);
-```
-
-
----
-
-## Import
-
-Components can import functions from other components. This is useful to reuse code and to create libraries of components.
-
-
-
-```jsx
-const {add, multiply} = VM.require('influencer.testnet/widget/Math');
-
-return <>
-
2 + 3 = {add(2, 3)}
-
2 * 3 = {multiply(2, 3)}
-
-```
-
-
-
-Where the code of the `Math` component is:
-
-```js
-function add(a, b) {
- return a + b;
-}
-
-function multiply(a, b) {
- return a * b;
-}
-
-return { add, multiply };
-```
\ No newline at end of file
diff --git a/docs/2.build/3.near-components/anatomy/web-methods.md b/docs/2.build/3.near-components/anatomy/web-methods.md
deleted file mode 100644
index ec9e46f1418..00000000000
--- a/docs/2.build/3.near-components/anatomy/web-methods.md
+++ /dev/null
@@ -1,221 +0,0 @@
----
-id: web-methods
-title: Web Browser Methods
----
-
-import {WidgetEditor} from "@site/src/components/widget-editor"
-
-NEAR Components have access to classic web methods that enable them to:
-- [Fetch](#fetch) data from external sources.
-- [Cache](#cache) values to avoid redundant computations.
-- Use [LocalStorage](#localstorage) to store data in the web browser.
-- Access to the [Clipboard](#clipboard).
-
----
-
-## Fetch
-
-`fetch` allows to fetch data from the URL. It acts like a hook. It's a wrapper around the `fetch` function from the browser behind the caching layer.
-
-The possible returned values are:
-- If the data is not cached, it returns `null` and fetches the data in the background.
-- If the data is cached, it returns the cached value and then revalidates it.
-
-
-
-```js
-const res = fetch("https://rpc.mainnet.near.org/status");
-
-return res.body;
-```
-
-
-
-
-
-#### Async Version
-
-`asyncFetch` is the `async` version of [`fetch`](#fetch), meaning that it returns a promise instead of a value.
-
-
-
-```js
-const [uptime, setUptime] = useState(null);
-
-function reportUptime() {
- const promise = asyncFetch("https://rpc.mainnet.near.org/status")
-
- promise.then(
- res => { setUptime(res.body.uptime_sec) }
- );
-}
-
-return <>
-
{uptime? `Uptime: ${uptime}s` : `Fetch a value` }
-
-
-```
-
-
-
-:::tip
-In contrast with `fetch`, `asyncFetch` does **not** cache the resulting value, so it should only be used within a function to avoid frequent requests on every render.
-:::
-
----
-
-## Cache
-
-The `useCache` hook takes a promise through a generator function, fetches the data and caches it. It can be used to easily use and cache data from async data sources.
-
-The cache is global for the VM, but each cached element is identified by a unique `dataKey` within each component.
-
-The possible values returned are:
-- `null` if the cache is cold and data is fetching
-- the `cached value` while the data is being fetched
-- A new `value` if new data is fetched.
-
-
-
-```js
-const status = useCache(
- () =>
- asyncFetch("https://rpc.mainnet.near.org/status").then((res) => res.body),
- "mainnetRpcStatus",
- { subscribe: true }
-);
-
-return status;
-```
-
-
-
-
- Parameters
-
-| param | required | type | description |
-|--------------------|--------------|--------|----------------------------------------------------------------------|
-| `promiseGenerator` | **required** | object | a function that returns a promise, which generates data. |
-| `dataKey` | **required** | object | the unique name (within the current component) to identify the data. |
-| `options` | _optional_ | object | optional argument. |
-
-:::info options object
-
-- `subscribe` _(optional)_: if `true`, the data refreshes periodically by invalidating cache.
-
-:::
-
-:::note
-- `promiseGenerator`: you don't return the promise directly, because it should only be fired once.
-:::
-
-
-
-:::tip
-The [fetch](#fetch) method is built on top of the `useCache` hook.
-:::
-
-:::note
-The data is being cached and compared as JSON serialized objects.
-:::
-
----
-
-## LocalStorage
-
-NEAR Components have access to a simulated `localStorage` through the `Storage` object:
-
-- [`Storage.get`](#storageget)
-- [`Storage.set`](#storageset)
-- [`Storage.privateGet`](#storageprivateget)
-- [`Storage.privateSet`](#storageprivateset)
-
-
-
-```jsx
-const [time, setTime] = useState(stored || Date.now())
-
-const storeValue = () => {
- const date = Date.now();
- Storage.set('time_now', date)
-}
-
-return <>
-
-);
-```
-
-
-
-In contrast with React, NEAR Components are not wrapped in a `function` or `class` definition.
-
-Indeed, when writing a NEAR Component, you focus on writing the body of the component, which is a function that returns the JSX to be rendered.
-
----
-
-## NEAR Native
-NEAR Components can readily [interact with smart contracts](./anatomy/near.md) in the NEAR Blockchain. While `view` methods are free to query by anyone, `call` methods require the user to be logged in.
-
-
-
-```jsx
-const counter = Near.view('counter.near-examples.testnet', 'get_num')
-
-if(counter === null) return 'Loading...'
-
-const add = () => {
- Near.call('counter.near-examples.testnet', 'increment')
-}
-
-const subtract = () => {
- Near.call('counter.near-examples.testnet', 'decrement')
-}
-
-return <>
-
Counter: {counter}
- {!context.accountId &&
-
Please login to interact with the contract
- }
- {context.accountId &&
- <>
-
-
-
- }
-
-```
-
-
-
----
-
-## Social from the Get-Go
-
-NEAR Components are easily integrated with [NEAR Social](https://near.social/), a social network built on NEAR.
-
-
-
-```js
-const item = (blockHeight) => ({ type: 'social', path: 'influencer.testnet/post/main', blockHeight });
-
-// retrieve indexed posts by influencer.testnet
-const idx_posts = Social.index(
- 'post', 'main', { accountId: ['influencer.testnet'] }
-);
-
-if (idx_posts === null) return 'Loading...';
-
-// retrieve likes for each post
-const likes = idx_posts.map(
- index => Social.index('like', item(index.blockHeight)).length
-);
-
-// retrieve data for each post
-const post_data = idx_posts.map(
- index => Social.get(`${index.accountId}/post/main`, index.blockHeight)
-);
-
-// defined "Like" function
-const like = (blockHeight) => Social.set(
- {index:{like: JSON.stringify({key: item(blockHeight), value: {type: 'like'}})}}
-)
-
-return <>
-
Posts from influencer.testnet
- {post_data.map((post, idx) =>
-
-
{JSON.parse(post).text} - {likes[idx]} likes
- {context.accountId && }
-
- )}
-
-
-```
-
-
-
----
-
-## Fully On-Chain & Easily Composable
-
-Leveraging the cheap storage and computation of the NEAR Blockchain, NEAR Components' code is stored fully on-chain in the SocialDB smart contract (`social.near`).
-
-
-
-```js
-// retrieving the code of a stored component
-return Social.get('influencer.testnet/widget/Greeter')
-```
-
-
-
-Once deployed, a component can be imported and used by any other component. Composing components as LEGO blocks allows you to build complex applications.
-
-
-
-```js
-// Rendering the component with props
-return ;
-```
-
-
----
-
-## Multi-Chain by Design
-
-NEAR Components can easily interact with Ethereum compatible blockchains, helping to easily create decentralized frontends for multi-chain applications.
-
-
-
-```js
-if (
- state.chainId === undefined &&
- ethers !== undefined &&
- Ethers.send("eth_requestAccounts", [])[0]
-) {
- Ethers.provider()
- .getNetwork()
- .then((chainIdData) => {
- if (chainIdData?.chainId) {
- State.update({ chainId: chainIdData.chainId });
- }
- });
-}
-if (state.chainId !== undefined && state.chainId !== 1) {
- return
-
-);
-```
-
-
-
-:::danger ETH Disabled in Docs
-For a working example visit the [deployed NEAR Component](https://near.social/zavodil.near/widget/Lido).
-:::
-
----
-
-
-## Next Steps
-Build and deploy your first components without leaving the browser. Go to https://app.jutsu.ai/, create an account and start building!
diff --git a/docs/2.build/4.web3-apps/chain-ui-tutorial.md b/docs/2.build/4.web3-apps/chain-ui-tutorial.md
deleted file mode 100644
index df63550e626..00000000000
--- a/docs/2.build/4.web3-apps/chain-ui-tutorial.md
+++ /dev/null
@@ -1,181 +0,0 @@
----
-id: chain-hosted-ui-tutorial
-title: Chain Hosted UI tutorial
-sidebar_label: Chain Hosted UI Tutorial
----
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import {CodeTabs, Language, Github} from "@site/src/components/codetabs";
-
-[Chain Hosted UI](chain-ui.md) lets you to deploy dApp frontends directly on the NEAR blockchain.
-In this tutorial you'll learn how to build and deploy a simple [React](https://react.dev/) web app using Chain Hosted UI.
-
-:::warning
-
-This experiment reached the MVP stage of functionality but no longer has a maintainer due to [Pagoda winding down](https://docs.near.org/blog/2024-08-13-pagoda-services).
-We encourage interested parties to fork the project and carry it forward. The smart contract has not yet been audited.
-
-:::
-
-## Requirements
-
-To build and deploy your web3 dApp, you'll need to have installed:
-
-- [NodeJS](https://nodejs.org)
-- [TypeScript](https://typescriptlang.org)
-- [pnpm](https://pnpm.io/)
-
-If you already have NodeJS, installing TypeScript and `pnpm` is simple:
-
-#### TypeScript
-
-```sh
-npm install -g typescript
-```
-
-#### pnpm
-
-```sh
-npm install -g pnpm
-```
-
-## Getting Started
-
-Let's get started by cloning the [chain hosted repository](https://github.com/near/chain-hosted-ui/) from GitHub.
-You'll take advantage of a demo React project in this monorepo to build your new React application.
-
-```sh
-git clone https://github.com/near/chain-hosted-ui
-```
-
-After cloning, you need to install the dependencies from the `chain-hosted-ui` folder:
-
-#### Install
-
-```sh
-cd chain-hosted-ui
-pnpm install
-```
-
-Next, it's time to build all the packages included in the Chain Hosted solution:
-
-#### Build all
-
-```sh
-pnpm run build
-```
-
-## React App
-
-
-Now you can jump to the demo React project included in the `chain-hosted-ui` repository. This demo project provides the boilerplate code and preconfigured settings so you can start building your web app right away:
-
-```sh
-cd packages/react
-```
-
-In this folder you can build, edit, add components, content, or `npm` dependecies to your React web app.
-For example, you can edit `src/App.tsx` and add a "Hello World!" paragraph:
-
-
-
-
-
-
-
-
-When ready, you can test your sample React dApp locally:
-
-#### Run web app
-
-```sh
-npm run dev
-```
-
-## Blockchain Deployment
-
-If you want to deploy your React frontend to the NEAR blockchain, you'll need to update the project's settings, and then run the deploy script.
-
-### Settings
-
-To update the settings, configure the `nearDeployConfig` field in `package.json`:
-
-
-
-
-
-
-
-#### Configuration parameters
-
- - `application` is developer-defined and will be used as part of the URL (names should match `[a-z_-]+`)
- - `deployerAccount` is the account paying for bundle storage and calling smart contract methods (must match `DEPLOYER_ACCOUNT.near` referenced above)
- - `filestoreContract` is the hosted storage contract
- - `v1.chain-hosted-ui.testnet` on testnet
-`v1.chain-hosted-ui.near`
- - or deployed and configured separately
-
-### Account login
-
-Before you can deploy your app, you need to set credentials to your NEAR account. You can do it by [adding a new key](../../4.tools/cli.md#add-key) into your account and saving it into the legacy keychain.
-
-```bash
-near account add-key grant-full-access autogenerate-new-keypair save-to-legacy-keychain network-config testnet sign-with-keychain send
-```
-
-The JSON file will be saved at the path `~/.near-credentials/mainnet/YOUR_ACCOUNT.near.json` (replace `mainnet` with `testnet` for testnet). Edit the created file to make sure it has following structure:
-
-```js
-{
- "account_id":"YOUR_ACCOUNT.near",
- "public_key":"ed25519:44_CHARACTERS_BASE_58",
- "private_key":"ed25519:88_CHARACTERS_BASE_58"
-}
-```
-
-### Deploy
-
-After you've set up your account and contract settings, you can build the project bundle and deploy the application on chain by running:
-
-```sh
-npm run deploy
-```
-
-The deployment script will estimate the storage cost in NEAR tokens, and ask you to confirm the transaction:
-
-```
-react-example deployment calculated to cost 4.08204 N {
- appKey: '/react-example',
- newAppChars: 96,
- fileKeyChars: 327,
- partitionKeyChars: 339,
- fileBytes: 388004
-}
-? Estimated cost to deploy is 4.08204 N. Continue? (y/N)
-```
-
-Once you've deployed your frontend, you can load the web application at `gateway-url////`
- - ``: `v1.chain-hosted-ui.testnet` or `v1.chainui.near`
- - ``: the NEAR account used to deploy, e.g. `myaccount.testnet`
- - ``: the application name you defined, e.g. `react-example`
-
-### Redeployment
-
-Once deployed, new deployments can be made or the application can be removed (with any remaining storage being refunded):
-- To deploy a new version after making changes, run
- ```sh
- pnpm run deploy
- ```
- This will increment the application version, delete previous files, and refund any remaining available balance.
-- To delete application storage, refund storage-staked Near, and unregister the deployment account, run
- ```sh
- pnpm delete-and-unregister
- ```
-- To drop and recreate the application, run
- ```sh
- pnpm clean-deploy
- ```
-
-Also note that in order to do a roll forward deployment, both sets of application files must exist simultaneously to avoid downtime.
-Consequently, storage must be paid ahead of each deployment to account for the new files, regardless
-of whether the application is already deployed. Once the deployment is live, the files from the previous deployment are deleted and storage is refunded as part of the deployment script.
diff --git a/docs/2.build/4.web3-apps/chain-ui.md b/docs/2.build/4.web3-apps/chain-ui.md
deleted file mode 100644
index 94ac33a3a8e..00000000000
--- a/docs/2.build/4.web3-apps/chain-ui.md
+++ /dev/null
@@ -1,83 +0,0 @@
----
-id: chain-hosted-ui
-title: Chain Hosted UI
-sidebar_label: Chain Hosted UI
----
-
-[Chain Hosted UI](https://github.com/near/chain-deployed-ui) is a [decentralized frontend solution](frontend.md#decentralized-frontend-solutions) that lets you to deploy dApp frontends directly on the NEAR blockchain. A frontend can be built with typical Web2 tooling (e.g. React + Vite + node.js dependencies), and the resulting compressed bundle can be stored in the state of a smart contract.
-
-:::warning
-
-This experiment reached the MVP stage of functionality but no longer has a maintainer due to [Pagoda winding down](https://docs.near.org/blog/2024-08-13-pagoda-services).
-We encourage interested parties to fork the project and carry it forward. The smart contract has not yet been audited.
-
-:::
-
-## Overview
-
-Thanks to the fact that storage on NEAR is cheap, it's feasible to host lightweight applications with optimized bundles on chain. This offers a straightforward path to decentralized hosting as an alternative to static deployment platforms such as Vercel, GitHub Pages, Render, and others.
-
-The Chain Deployed UI tooling provides the boilerplate app code (React, Vue, TypeScript), along with the `FileStore` smart contract and basic CDN tools so you can build a dApp, pack it, and store it on chain.
-
-This `FileStore` smart contract deployed by NEAR is designed to store and serve dApp bundles for any user, so you don't need to have an understanding of smart contract development. You only need to understand how to sign a transaction (with help from our tooling) and to have enough NEAR tokens to pay for storage.
-
-:::tip
-
-You can still deploy your own file storage smart contract if you want to have additional customization or if you want total control over your data.
-
-:::
-
-### Pros
-
-- By decentralizing the hosting of your front-end, you minimize the risk of censoring or blocking content by centralized authorities.
-- Users might trust a decentralized application more, knowing that it operates on a transparent and immutable blockchain.
-- Data displayed on the front-end is more likely to be accurate and tamper-proof since it's typically fetched directly from the blockchain.
-
-### Cons
-
-- Implementing a decentralized front-end can be more complex than traditional web development, requiring knowledge of additional technologies like [IPFS](https://ipfs.tech), [Arweave](https://arweave.org), or blockchain interactions.
-- Decentralized networks can face issues such as latency or lower speeds compared to traditional centralized servers, potentially affecting user experience.
-The ecosystem for developing decentralized frontends is still maturing, which means there might be fewer tools and libraries available than for traditional web development.
-- While decentralized storage costs have been decreasing, they can still be higher than traditional hosting, especially if the dApp generates a lot of data transactions.
-
-## How it works
-
-A standard workflow of the chain deployed solution would be:
-- Building, packing, and compressing the web app frontend
-- Uploading the web app bundle files using the `FileStore` smart contract
-- Serving the web app using a CDN gateway
-
-Once the web app has been uploaded to the blockchain, a web [Gateway](#gateway) converts browser requests to blockchain [RPC](#rpc) calls, so users can access your decentralized application.
-
-### Gateway
-
-A gateway server is required to convert browser resource requests to RPC calls. For convenience, gateways may be deployed to cloud hosts, but this causes some centralization. It can be mitigated by having multiple gateways run by different parties. It is important that a user trust the gateway provider however, since the gateway is ultimately what is in control of the experience being served to the user's browser.
-
-### RPC
-
-An [RPC provider](../../5.api/rpc/providers.md) services requests for chain data. For resilience, gateways should ideally be capable of falling back to a different provider in the event the primary provider is experiencing degraded service.
-
-## Considerations
-
-Compared to classic Web2 hosting solutions, the cost structure of a chain-deployed dApp is very different.
-
-When deploying on chain, you pay a one-time fee for the storage space of your compressed bundles. This means that it's critical to pay attention to the size of dependencies you include in your application, as packages that are bloated or do not support proper tree-shaking will directly affect your cost.
-
-:::info
-
-NEAR uses [storage staking](../../1.concepts/storage/storage-staking.md), where NEAR tokens are locked while storage is being used and refundable in the event of deleting that data from smart contract state. The cost of storage is `1 NEAR` per `100 Kb`.
-
-:::
-
-### Storage Optimization
-
-Additional storage optimization can be achieved by building your dApp from a provided template with preconfigured code splitting. This allows you to yield separate bundles for the template boilerplate and the custom dApp code:
-- The template boilerplate can be uploaded once, and then served for every dApp built using that template.
-- This decreases the deployment cost, since you only need to deploy the custom dApp code and specific dependencies.
-
-### Asset Hosting
-
-For hosting large assets (such as images and videos) that your web app may require, you could leverage a [decentralized storage service](../../1.concepts/storage/decentralized-storage.md) to maintain a fully decentralized deployment. Some of these solutions are:
-- [Arweave](https://arweave.org)
-- [Crust](https://crust.network)
-- [IPFS](https://ipfs.tech)
diff --git a/docs/2.build/4.web3-apps/integrate-components.md b/docs/2.build/4.web3-apps/integrate-components.md
deleted file mode 100644
index 6f08a0d5a45..00000000000
--- a/docs/2.build/4.web3-apps/integrate-components.md
+++ /dev/null
@@ -1,104 +0,0 @@
----
-id: integrate-components
-title: Integrating Components
----
-import {CodeTabs, Language, Github} from "@site/src/components/codetabs"
-import {WidgetEditor} from "@site/src/components/widget-editor"
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-To integrate [Components](../3.near-components/what-is.md) to your frontend, you will leverage two tools:
-1. `Wallet Selector`: Enables the user to select their preferred NEAR wallet in your dApp.
-2. `NEAR VM`: A package that can retrieve the component's code from the blockchain and execute it in the browser.
-
-
-
-Using those tools you will implement the following flow:
-1. **Setup** the VM.
-2. Render components using the `Widget` component in the VM.
-3. **Setup** a wallet selector so users can interact with the Menu.
-
----
-
-## Adding the VM & Wallet Selector
-To use the `VM` and the `wallet-selector`, you must add them to your project first.
-
-The wallet selector has multiple wallet packages to select from. [Check their website](https://github.com/near/wallet-selector#installation-and-usage) for more information.
-
-```bash
-npm install \
- @near-wallet-selector/core \
- @near-wallet-selector/my-near-wallet \
- @near-wallet-selector/modal-ui
-```
-
-Then, manually add the `VM` to your `package.json`:
-
-```js
-"dependencies": {
- ...
- "near-social-vm": "github:NearSocial/VM#2.5.5"
- ...
-}
-```
-
-:::tip
-Check the latest released version for the VM [here](https://github.com/NearSocial/VM/releases)
-:::
-
----
-
-## Setup the VM
-To render components, you need to import the `useInitNear` hook from the `near-social-vm` package, as well as the `Widget` component.
-
-```js
-import { useInitNear, Widget } from 'near-social-vm';
-import { useEffect } from 'react';
-
-export default function Component({ src }) {
- const { initNear } = useInitNear();
-
- useEffect(() => {
- initNear && initNear({ networkId: 'testnet', selector: null });
- }, [initNear]);
-
- return ;
-}
-
-return
-```
-
-:::tip
-Notice that the VM is inherently linked to `React`, so you will need to use a reactive framework to take full advantage of the VM.
-:::
-
----
-
-## Setup the Wallet Selector
-While the VM allows you to render components, you need to set up a wallet selector to allow users to interact with the components.
-
-To instantiate a `Wallet Selector`, simply import all the wallets you want your users to have access to, and the setup method from the `near-wallet-selector` package.
-
-```js
-import '@near-wallet-selector/modal-ui/styles.css';
-import { setupModal } from '@near-wallet-selector/modal-ui';
-import { setupWalletSelector } from '@near-wallet-selector/core';
-import { setupMyNearWallet } from '@near-wallet-selector/my-near-wallet';
-
-const selector = setupWalletSelector({
- network: 'testnet,
- modules: [setupMyNearWallet()],
-});
-```
-
-Then use it during the call to `initNear`:
-
-```js
- useEffect(() => {
- initNear && initNear({ networkId: 'testnet', selector: selector });
- }, [initNear]);
-```
-
-:::tip
-To learn more about the wallet selector and how it can be used, please see the [integrating NEAR to your WebApp tutorial](./integrate-contracts.md)
-:::
\ No newline at end of file
diff --git a/docs/3.tutorials/near-components/blog-posts.md b/docs/3.tutorials/near-components/blog-posts.md
deleted file mode 100644
index e6452924226..00000000000
--- a/docs/3.tutorials/near-components/blog-posts.md
+++ /dev/null
@@ -1,260 +0,0 @@
----
-id: blog-posts
-title: Blog Posts
----
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import {CodeTabs, Language, Github} from "@site/src/components/codetabs"
-
-The Blog post components enable your gateway to promote regular Near Social posts into fully fledged blog posts.
-In this article you'll learn how to set up the required components so you can define a custom URL to show a clean feed of blog posts.
-
-## Setup
-
-To set up the Blog post features on your [`near-discovery`](https://github.com/near/near-discovery/) gateway:
-
-1. Add the [`Blog.Feed`](https://near.org/near/widget/ComponentDetailsPage?src=near/widget/Blog.Feed) and [`BlogPostPage`](https://near.org/near/widget/ComponentDetailsPage?src=near/widget/BlogPostPage) components
-2. Add `near/widget/Blog.Feed` and `near/widget/BlogPostPage` to your configuration
-
-
-
-
-- Edit your `bos-components.ts` configuration file:
-
-
-
-
-
-
-
-- Edit your `widgets.js` configuration file:
-
-```js title="src/data/widgets.js"
-const MainnetWidgets = {
- blog: 'near/widget/Blog.Feed',
- blogPost: 'near/widget/BlogPostPage',
- image: "mob.near/widget/Image",
- default: "mob.near/widget/Homepage",
- viewSource: "mob.near/widget/WidgetSource",
- widgetMetadataEditor: "mob.near/widget/WidgetMetadataEditor",
-```
-
-
-
-
-
-### Blog feed URL
-
-To set a custom URL such as `/bosblog` for your Blog feed, and define which users will be shown on it, do the following changes on your `near-discovery` gateway:
-
-
-
-
-1. Create a folder `src/pages/` for your desired custom path (e.g., `/bosblog`)
-2. Add this [`index.tsx`](https://github.com/near/near-discovery/blob/c275ab7d70a6ee7baf3a88ace1c2e02f605da644/src/pages/bosblog/index.tsx) file to `src/pages/bosblog/`:
-
-
-
-
-
-
-
-1. Add this `BlogPage.js` file to `src/pages/`:
-
-```js title="src/pages/BlogPage.js"
-import React, { useEffect, useState } from "react";
-import { Widget } from "near-social-vm";
-import { useParams } from "react-router-dom";
-import { useQuery } from "../hooks/useQuery";
-import { useHashRouterLegacy } from "../hooks/useHashRouterLegacy";
-
-export default function BlogPage(props) {
- useHashRouterLegacy();
-
- const { widgetSrc } = useParams();
- const query = useQuery();
- const [widgetProps, setWidgetProps] = useState({});
- const src = widgetSrc || props.widgets.default;
- const contributors = ['near', 'jacksonthedev.near'];
-
- useEffect(() => {
- setWidgetProps(
- [...query.entries()].reduce((props, [key, value]) => {
- props[key] = value;
- return props;
- }, {})
- );
- }, [query]);
-
- if (widgetProps.accountId && widgetProps.blockHeight) {
- return (
-
- );
-}
-```
-
-2. Update your `App.js` router file, adding the new route to your custom path (e.g., `/bosblog`):
-
-```js title="src/App.js"
-import BlogPage from "./pages/BlogPage";
-```
-
-```js title="src/App.js"
-
-
-
-
-
-
-
-
-```
-
-
-
-
-
-3. Edit the `contributors` list, with the account(s) that you want to showcase on your blog feed:
-
- ```js
- const contributors = ['near', 'jacksonthedev.near'];
- ```
-
-That's all, your gateway setup is done and you're ready to show your blog feed.
-Check the next sections if you want to learn more about the blog post [content formatting](#blog-post-formatting) and how to promote social messages into blog posts.
-
-:::tip
-
-In this code example, only promoted blog posts from users `near` and `jacksonthedev.near` will appear in the Blog feed when someone browses the `/bosblog` URL.
-
-:::
-
-### Promoting posts
-
-If you're using `near-discovery` you're all set, the Promote menu is already available using the [`v1.Posts.Feed`](https://near.org/near/widget/ComponentDetailsPage?src=near/widget/v1.Posts.Feed) component.
-
-If you're using a different gateway or your own custom feed, and you want to allow users to promote social messages into blog posts, you can integrate this `promoteToBlog` code snippet:
-
-```js
-const { accountId, blockHeight, item } = props;
-
-const promoteToBlog = () => {
- if (state.loading) {
- return;
- }
-
- if (!context.accountId && props.requestAuthentication) {
- props.requestAuthentication();
- return;
- } else if (!context.accountId) {
- return;
- }
-
- State.update({
- loading: true,
- });
-
- const data = {
- index: {
- promote: JSON.stringify({
- key: context.accountId,
- value: {
- operation: "add",
- type: "blog",
- post: item,
- blockHeight,
- },
- }),
- },
- };
-
- Social.set(data, {
- onCommit: () => State.update({ loading: false }),
- onCancel: () =>
- State.update({
- loading: false,
- }),
- });
-};
-```
-
-:::tip
-
-Check the [`Posts.Menu`](https://near.org/near/widget/ComponentDetailsPage?src=near/widget/Posts.Menu&tab=source) component for a complete implementation that includes a drop-down menu and a button to promote a blog post.
-
-:::
-
----
-
-## Blog post formatting
-
-When writing blog posts, you can format the content using standard [Markdown syntax](https://www.markdownguide.org/basic-syntax/).
-Markdown is an easy-to-read, easy-to-write language for formatting plain text.
-
-The only two special cases that you should keep in mind when writing a blog post are:
-- the blog post's title
-- an optional header image
-
-#### Header image
-
-To define an image for your blog post, just add a markdown image link at the top of your post:
-
-```md
-
-```
-
-#### Blog post title
-
-To set the post's title, define it using a top heading tag:
-
-```md
-# This is the title of a demo blog post
-```
-
-:::tip
-
-If you're new to Markdown, you might want to check this page about [basic writing and formatting syntax](https://www.markdownguide.org/basic-syntax/).
-
-:::
-
----
-
-## Writing a blog post
-
-Adding a new blog post is simple. To publish a new blog post, you only need to:
-1. Write a regular Near Social message
-
-
-
-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) => (
-
-
- );
-} else {
- // output connect button for anon user
- return ;
-}
-```
-
-You can see how it works here: [step_1](https://near.org/near/widget/ComponentDetailsPage?src=zavodil.near/widget/token-balances-step-1&tab=source).
-
-Once the web3 connection is enabled, the output will appear as follows:
-
-```
-0x2260FAC5E5542a773Aa44fBCfeDf7C193bc2C599: 726220
-0x6b175474e89094c44da98b954eedeac495271d0f: 140325040242585301886
-0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984: 127732731780832810
-```
-
-:::tip
-When developing NEAR components, it's recommended to always present some content even if the user hasn't connected their wallet yet. In this example, the component uses the `` button to prompt the user to connect their wallet if they haven't already.
-:::
-
-## Step 2: Load static data
-
-
-To format the list, we must determine the decimal precision for each asset. While it's possible to retrieve this information from the ERC-20 contract for each token, it's important to note that the ERC-20 contract lacks certain valuable data such as the token icon and description. As a solution, we can leverage the CoinGecko API to retrieve token details, including the current market price.
-
-Let's add a function to load token data for a given token from the Coingecko:
-
-```js
-const loadCoingeckData = (tokenId) => {
- let dataUrl = `https://api.coingecko.com/api/v3/coins/ethereum/contract/${tokenId}`;
-
- const data = fetch(dataUrl);
- if (data.ok) {
- return {
- name: data.body.name,
- icon: data.body.image.small,
- decimals: data.body.detail_platforms["ethereum"].decimal_place,
- price: Number(data.body.market_data.current_price.usd),
- };
- }
-};
-```
-
-Other available API methods are listed in the [Coingecko API documentation](https://www.coingecko.com/en/api).
-
-Now that we have the data, let's modify the loadTokensData function to save the token information in the state:
-
-```js
-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] } });
- });
- });
-
- tokens.map((tokenId) => {
- const tokenData = loadCoingeckoData(tokenId);
- // save balance of every token to the state
- State.update({ [tokenId]: { ...tokenData, ...state[tokenId] } });
- });
-};
-```
-
-And lets update the `renderToken` function to display data we just got:
-
-```js
-const renderToken = (tokenId) => {
- const tokenBalance = Big(state[tokenId].balance ?? 0)
- .div(new Big(10).pow(state[tokenId].decimals ?? 1))
- .toFixed(4);
- const tokenBalanceUSD = (tokenBalance * state[tokenId].price).toFixed(2);
- return (
-
- );
-};
-```
-
-You can see how it works here: [step_2](https://near.org/near/widget/ComponentDetailsPage?src=zavodil.near/widget/token-balances-step-2&tab=source).
-
-Output will be like this:
-```
-Wrapped Bitcoin: 0.0073 wbtc (247.64 USD)
-Dai: 140.3250 dai (140.21 USD)
-Uniswap: 0.1277 uni (0.54 USD)
-```
-
-:::info
-Please note that the `fetch` function caches data and will be executed only once during loading.
-:::
-
-:::tip
-Utilize any available web-services to provide data for your application on NEAR, ensuring that the user experience is on par with traditional web 2.0 applications.
-:::
-
-## Step 3. Save data in social-db
-
-Now, instead of hardcoding the list of tokens directly within the application code, let's transition them to an onchain data repository named social-db. This approach allows us to adjust the list of trackable tokens without having to modify the application's code. It also offers users the flexibility to select from pre-existing token lists or formulate their own.
-
-Learn more about how [key-value storage social-db works](https://github.com/NearSocial/social-db/blob/master/README.md).
-
-Here is an example of a simple application for [setting tokens list in social-db](https://near.org/near/widget/ComponentDetailsPage?src=zavodil.near/widget/tokens-db&tab=source).
-
-In this format, the data from the example will be stored in social-db.
-
-```
-{
-"0x6b175474e89094c44da98b954eedeac495271d0f": "",
-"0x2260FAC5E5542a773Aa44fBCfeDf7C193bc2C599": "",
-"0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984": ""
-}
-```
-
-
-Viewing this data from the blockchain is accessible for every NEAR app or, for example, through an [Explorer app](https://dev.near.org/zavodil.near/widget/Explorer?path=zavodil.near/tokens-db/**).
-
-Let's add a function to our application that will read the list of tokens.
-
-```js
-// set list of tokens
-if (!state.tokensLoaded) {
- // load tokens list from the Social DB
- const tokens = Social.get(`zavodil.near/tokens-db/*`, "final");
-
- if (tokens) {
- State.update({
- tokensLoaded: true,
- tokens,
- });
- }
-}
-
-const tokens = Object.keys(state.tokens ?? {});
-```
-:::info
-In this case, `zavodil.near` is the NEAR account of the user who created this list of tokens. Any other user can create their own list, and it will also be available in `social-db`.
-:::
-
-You can see how it works here: [step_3](https://near.org/near/widget/ComponentDetailsPage?src=zavodil.near/widget/token-balances-step-3&tab=source). The output of the data in the application remains unchanged, but now it no longer contains hardcoded values.
-
-:::tip
-Use social-db, an on-chain data storage, to decouple the data and the application.
-:::
-
-## Step 4. Caching Data Through GitHub Actions
-
-Ethereum-based applications frequently depend on static content sources to present details about tokens or contracts. Often, frontends pull this data from platforms like CoinGecko or CoinMarketCap, leveraging API keys to enhance the data retrieval rate limit. Without these API keys, and given a significant volume of data, fetching from these platforms can be sluggish or even disrupted. We'll showcase a serverless approach utilizing GitHub Actions. This method preserves the decentralized nature of NEAR gateways (where securely storing API keys isn't feasible), all while ensuring user ease-of-use and swift data loading.
-
-Let's create a Node.js application that will iterate through a list of tokens from `social-db` and display the retrieved data along with a timestamp of the operation.
-
-```js
-import * as nearAPI from "near-api-js";
-import * as cg from "coingecko-api-v3";
-
-const CONTRACT_ID = "social.near";
-const ETHEREUM_NETWORK_ID = "ethereum";
-const FETCH_TIMEOUT = 7000;
-
-async function connect() {
- const config = {
- networkId: "mainnet",
- keyStore: new nearAPI.keyStores.InMemoryKeyStore(),
- nodeUrl: "https://rpc.mainnet.near.org",
- walletUrl: "https://wallet.mainnet.near.org",
- helperUrl: "https://helper.mainnet.near.org",
- explorerUrl: "https://nearblocks.io",
- };
- const near = await nearAPI.connect(config);
- const account = await near.account(CONTRACT_ID);
-
- const contract = new nearAPI.Contract(
- account, // the account object that is connecting
- CONTRACT_ID, // name of contract you're connecting to
- {
- viewMethods: ["get"], // view methods do not change state but usually return a value
- changeMethods: [], // change methods modify state
- sender: account, // account object to initialize and sign transactions.
- }
- );
-
- return contract;
-}
-
-// load data from the social-db
-const contract = await connect();
-const data = await contract.get({ keys: ["zavodil.near/tokens-db/*"] });
-const tokens = data["zavodil.near"]["tokens-db"];
-
-// init coingecko client
-const client = new cg.CoinGeckoClient({
- timeout: 5000,
- autoRetry: false,
-});
-
-let res = {};
-for (let i = 0; i < Object.keys(tokens).length; i++) {
- const tokenId = Object.keys(tokens)[i];
-
- try {
- // load data from coingecko
- const data = await client.contract({
- id: ETHEREUM_NETWORK_ID,
- contract_address: tokenId,
- });
- // format output
- const tokenData = {
- name: data["name"],
- symbol: data["symbol"],
- icon: data["image"]?.["thumb"],
- decimals: data["detail_platforms"]?.[ETHEREUM_NETWORK_ID]?.["decimal_place"],
- price: data["market_data"]?.["current_price"]?.["usd"],
- };
- // store output
- res[tokenId] = tokenData;
-
- // add timeout to avoid rate limits
- await new Promise((resolve) => {
- setTimeout(resolve, FETCH_TIMEOUT);
- });
- } catch (ex) {
- console.error(tokenId, ex)
- }
-}
-
-// output results
-console.log(
- JSON.stringify({
- timestamp: Date.now(),
- data: res,
- })
-);
-
-```
-
-Example [of this code on a github](https://github.com/zavodil/tokens-db/), you can clone the repository and modify the data retrieval request as needed.
-
-Now, we can create a GitHub worker that will execute this script and save the data to a file named `tokens-db.json`. Here are the instructions for the worker:
-
-```yml
-name: Tokens Data Updater
-on:
- workflow_dispatch:
- schedule:
- - cron: '*/15 * * * *'
-
-jobs:
- updateStats:
- runs-on: ubuntu-latest
- steps:
- - uses: actions/checkout@v3
- - name: Prepare
- uses: actions/setup-node@v3
- with:
- node-version: 16
- - run: npm i
- - name: Tokens Data
- run: node load > tokens-db.json
- env:
- EXPORT_MODE: CS
- - uses: EndBug/add-and-commit@v9
- with:
- author_name: "Tokens Data Updater"
- add: 'tokens-db.json --force'
- message: "Tokens Data fetching"
-```
-
-Don't forget to grant the worker the necessary permissions to add files to your repository (Open GitHub Repository: Settings->Actions->General)
-
-The output of this worker will be the [tokens-db.json](https://raw.githubusercontent.com/zavodil/tokens-db/main/tokens-db.json) file which will be regularly updated with current data. You can easily add any private API keys required for bypassing rate limits in the worker.
-
-Now, let's get back to the NEAR application. We need to modify the code to read data from the cached file created by GitHub Actions instead of fetching it from CoinGecko every time.
-
-To do this, we'll make changes to the `loadTokensData` function:
-
-```js
-const loadTokensData = () => {
- let cacheTokenData = {};
- // load data generated by github action
- const cachedData = fetch(
- `https://raw.githubusercontent.com/zavodil/tokens-db/main/tokens-db.json`
- );
- if (cachedData.ok) {
- const cache = JSON.parse(cachedData.body);
- const cacheDate = new Date(cache.timestamp);
- const timeDifference = Date.now() - cacheDate.getTime();
- if (timeDifference <= 30 * 60 * 1000) { // use cached data if it is not outdated (30 min)
- cacheTokenData = cache.data;
- }
-
- tokens.map((tokenId) => {
- const tokenData = cacheTokenData.hasOwnProperty(tokenId)
- ? cacheTokenData?.[tokenId]
- : // load data from coingecko if we don't have cached data only
- loadCoingeckData(tokenId);
- // save balance of every token to the state
- State.update({ [tokenId]: { ...tokenData, ...state[tokenId] } });
- });
- }
-};
-
-```
-
-You can see how it works here: [step_4](https://near.org/near/widget/ComponentDetailsPage?src=zavodil.near/widget/token-balances-step-4&tab=source). The output of the data in the application remains the same, but now it operates more efficiently.
-
-:::tip
-Use GitHub Actions as a serverless backend for securing API keys, caching data etc.
-:::
-
diff --git a/docs/3.tutorials/near-components/bos-ethersjs.md b/docs/3.tutorials/near-components/bos-ethersjs.md
deleted file mode 100644
index 0e24d6cfb9c..00000000000
--- a/docs/3.tutorials/near-components/bos-ethersjs.md
+++ /dev/null
@@ -1,149 +0,0 @@
----
-id: ethers-js
-title: NEAR for Ethereum developers
----
-
-import {WidgetEditor} from "@site/src/components/widget-editor"
-
-NEAR components are chain-agnostic, enabling you to create decentralized frontends tailored for any Ethereum dApps. Throughout this article, we'll navigate prevalent use-cases with code snippets. Youβll also find links to exemplary NEAR components for reference.
-
----
-
-## Interact with Ethereum using Ethers.js
-
-The NEAR VM has imported the [Ethers.js](https://docs.ethers.org/) library, allowing for seamless interaction with Ethereum nodes using JavaScript in a NEAR component.
-
-The `Ethers` object exposes the provider connection:
-- `Ethers.provider()` is a read-only connection to the blockchain, which allows querying the blockchain state (e.g., account, block or transaction details), querying event logs or evaluating read-only code using call.
- - `Ethers.provider().getSigner()` abstracts the class that interacts with an account
- - `Ethers.provider().getSigner().getBalance()` returns a Promise that resolves to the account address.
- - `Ethers.provider().getBlockNumber()` looks up the current block number (i.e. height)
- - `Ethers.provider().getFeeData()` gets the best guess at the recommended FeeData
-
-You can see various ways of using `Ethers` objects on the [Ethers documentation portal](https://docs.ethers.org/)).
-
----
-
-Furthermore, numerous [basic tools](https://docs.ethers.org/v6/api/utils/) can be found in the ethers.utils object (be aware of the lowercase 'e').
-- `ethers.utils.parseUnits(value, unit)` converts the decimal string value to a BigInt, assuming unit decimal places. The unit may the number of decimal places or the name of a unit (e.g. "gwei" for 9 decimal places).
-- `ethers.utils.formatEther(wei)` converts value into a decimal string using 18 decimal places.
-
-#### Example showing the difference between `Ethers.provider()` and `ethers.utils`:
-```ts
- Ethers.provider()
- .getSigner()
- .getBalance()
- .then((balance) => {
- console.log("Your ETH balance: ", ethers.utils.formatEther(balance))
- });
-```
-
-## FAQ
-
-### How to get a user account?
-
-```ts
-const receiver = Ethers.provider().send("eth_requestAccounts", [])[0];
-```
-
-### How to get the current chain ID?
-
-```ts
-Ethers.provider().getNetwork().then((chainIdData) => {
- console.log(chainIdData.chainId);
-});
-```
-
-### How to show a Web3Login button?
-
-```ts
-
-```
-
-### How to load a contract ABI?
-
-```ts
-const abi = fetch(`https://eth.blockscout.com/api?module=contract&action=getabi&address=0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2`);
-
-if (!abi.ok) {
- return "Loading";
-}
-
-console.log(abi.body.result);
-```
-
-### How to load data from EVM nodes?
-
-```ts
-// create a contract interface
-const iface = new ethers.utils.Interface(abi.body.result);
-
-// encode the balanceOf get request
-const encodedBalanceData = iface.encodeFunctionData("balanceOf", [receiver]);
-
-// perform a call
-Ethers.provider().call({
- to: "0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2",
- data: encodedBalanceData,
-})
-.then((rawBalance) => {
- // decode the result
- const receiverBalanceHex = iface.decodeFunctionResult(
- "balanceOf",
- rawBalance
- );
- console.log(Big(receiverBalanceHex).toFixed());
-});
-```
-
-### How to send a transaction to Ethereum nodes?
-
-```ts
-// create a contract instance
-const wEthContract = new ethers.Contract(
- "0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2",
- abi.body.result,
- Ethers.provider().getSigner()
-);
-
-// perform a given method (withdraw in this case)
-wEthContract
- .withdraw(balance, {
- value: 0
- })
- .then((transactionHash) => {
- console.log(transactionHash);
- });
-```
-
-### How to convert HEX values to human readable numbers?
-
-```ts
-// use Big().toFixed method
-
-Big(balanceHex).toFixed()
-```
-
-### How to locate the ABI of a Smart Contract?
-
-Utilize platforms like etherscan.com and blockscout.com, or delve into the project's GitHub repositories and documentation.
-
-### Is there an example of applications with a description of how they were created?
-
-Yes, there is an article that describes [best practices for creating applications for Ethereum developers on NEAR](bos-ethersjs-best-practices.md), with a breakdown of individual steps.
-
-## Examples
-
-Below is a curated list of NEAR components, developed by the community, that epitomize the best practices for creating NEAR components:
-
-- [Unwrap ETH](https://near.org/near/widget/ComponentDetailsPage?src=zavodil.near/widget/unwrap-weth&tab=source)
-- [ERC-20 Token sender](https://near.org/near/widget/ComponentDetailsPage?src=zavodil.near/widget/erc20-sender&tab=source)
-- [Lido Component](https://near.org/near/widget/ComponentDetailsPage?src=zavodil.near/widget/Lido&tab=source)
-- [Swap component](https://near.org/near/widget/ComponentDetailsPage?src=zavodil.near/widget/swap&tab=source) (a set of swap dApps for Ethereum Mainnet, Polygon Mainnet, Polygon zkevm, Aurora, NEAR, etc)
-- [1inch](https://near.org#/near/widget/ComponentDetailsPage?src=chanon.near/widget/1inch)
-- [Liquity](https://near.org/near/widget/ComponentDetailsPage?src=garlicfaucet.near/widget/liquityWidget)
diff --git a/docs/3.tutorials/near-components/bos-loader.md b/docs/3.tutorials/near-components/bos-loader.md
deleted file mode 100644
index f323865ee00..00000000000
--- a/docs/3.tutorials/near-components/bos-loader.md
+++ /dev/null
@@ -1,68 +0,0 @@
----
-id: bos-loader
-title: BOS Loader
----
-
-# BOS Loader
-
-In this article you'll learn how to develop, test, and deploy BOS components using CLI tools. You can use this workflow to tap into the collaboration, pull-request, and other GitHub benefits while still deploying components to the BOS.
-
-[BOS Component Loader](https://github.com/near/bos-loader) serves a local directory of component files as a JSON payload properly formatted to be plugged into a BOS `redirectMap`. When paired with a viewer configured to call out to this loader, it enables local component development.
-
-## Development flow
-
-1. _(Optional)_ Download and install [`bos` CLI](https://bos.cli.rs).
-
- :::info
- You need `bos` CLI if you have component code on the BOS already that you want to use or if you want to manage component deploys locally instead of the GitHub actions CI/CD.
- :::
-
-2. To get component code saved on the BOS, use `bos` to download the source code. Otherwise, create a `src` folder.
-
-3. Create a component within that src folder like `src/.jsx`.
-
- :::tip
- It's common practice to use `.` delimited component names for namespacing. You can handle this with folders for better files organization.
-
- For example, `AppName.Component` β `AppName/Component.jsx`.
- :::
-
-5. Download and install [BOS Component Loader](https://github.com/near/bos-loader/releases) (`bos-loader`).
-
-6. Run `bos-loader --path src` (or run from `src` folder)
-
-7. Open https://dev.near.org/flags, and set the loader URL to `http://127.0.0.1:3030`.
-
-8. Open `https://dev.near.org//widget/` (case sensitive)
-
- :::info
- If you're testing on `testnet`, use your testnet account and open https://test.near.org instead.
-
- Run `bos-loader --path src` locally, set loader URL in https://test.near.org/flags and open `https://test.near.org//widget/` to view your component locally.
- :::
-
- :::tip
- You can work on multiple components at once by embedding them in a wrapper component.
- :::
-
-9. Make changes to the component's code.
-
- :::info
- You must refresh the browser's web page to see the changes.
- :::
-
-10. When you're done, use the X on the banner to stop loading locally.
-
-## Component deployment
-
-At this point, your new component is ready to be deployed. To deploy, you can use either of the following two paths:
-
- - Use `bos` CLI to deploy from command line:
-
- ```
- bos deploy
- ```
-
- - Set up a [GitHub actions](https://github.com/FroVolod/bos-cli-rs/blob/master/README.md#reusable-workflow) deployment workflow. Check [this document](https://github.com/FroVolod/bos-cli-rs/blob/master/README.md#github-actions) for instructions.
-
-You should now be able to see your component in discovery. Happy Hacking!
diff --git a/docs/3.tutorials/near-components/design-system.md b/docs/3.tutorials/near-components/design-system.md
deleted file mode 100644
index 3b9ef87c941..00000000000
--- a/docs/3.tutorials/near-components/design-system.md
+++ /dev/null
@@ -1,799 +0,0 @@
----
-id: ds-components
-title: Design Components
----
-import {WidgetEditor} from "@site/src/components/widget-editor";
-
-# Design System Components
-
-When building components, the NEAR VM provides a complete set of [Radix primitives](https://www.radix-ui.com/docs/primitives/overview/introduction) to simplify UI development.
-
-## Radix UI
-
-Using embedded Radix primitives on the NEAR VM is simple and straight-forward. You don't need to import any files:
-
-```js
-return (
-
- Hello World!
-
-);
-```
-
-:::caution Limitations
-
-Currently, NEAR VM impose some limitations on the Radix UI framework:
-
-- `Form` component is not available.
-- You can't use `.Portal` definitions.
-- Using CSS is different. You'll have to use a `styled.div` wrapper.
-
-:::
-
-### Using CSS
-
-Here is an example on how to use CSS through the `styled.div` wrapper:
-
-```js
-const Wrapper = styled.div`
- .SwitchRoot {
- ...
- }
- .SwitchThumb {
- ...
- }
-`;
-
-return (
-
-
-
-
-
-);
-```
-
-:::tip Using Wrapper
-
-[Example widget using Wrapper](https://dev.near.org/#/near/widget/ComponentDetailsPage?src=near/widget/RadixTooltipTest)
-
-:::
-
-### Using `styled-components`
-
-You can use [`styled-components`](../../2.build/3.near-components/anatomy/builtin-components.md) in combination with Radix UI primitives. Here's an example:
-
-```js
-const SwitchRoot = styled("Switch.Root")`
- all: unset;
- display: block;
- width: 42px;
- height: 25px;
- background-color: var(--blackA9);
- border-radius: 9999px;
- position: relative;
- box-shadow: 0 2px 10px var(--blackA7);
-
- &[data-state="checked"] {
- background-color: black;
- }
-`;
-
-const SwitchThumb = styled("Switch.Thumb")`
- all: unset;
- display: block;
- width: 21px;
- height: 21px;
- background-color: white;
- border-radius: 9999px;
- box-shadow: 0 2px 2px var(--blackA7);
- transition: transform 100ms;
- transform: translateX(2px);
- will-change: transform;
-
- &[data-state="checked"] {
- transform: translateX(19px);
- }
-`;
-
-return (
-
-
-
-);
-```
-
-:::tip Using styled components
-
-[Example widget using styled components to style Radix UI](https://dev.near.org/#/near/widget/ComponentDetailsPage?src=near/widget/RadixSwitchTest).
-
-:::
-
-### Forward references
-
-The NEAR VM re-implements [React's forwardRef](https://react.dev/reference/react/forwardRef#reference) as `ref="forwardedRef"`.
-
-You can use `ref="forwardedRef"` to forward references through `` to support Radix's `asChild` property:
-
-```js title='Dialog.jsx'
-
-
-
-```
-
-```js title='TestButton.jsx'
-const Button = styled.button`
- background: #f00;
-`;
-
-return (
-
-);
-```
-
-## UI is Near
-
-[UI is Near](https://www.uiisnear.xyz/) is community-built library offering a comprehensive collection of UI components providing a solid foundation for creating intuitive and visually appealing user interfaces for dApps, wallets or other Web3 solutions.
-
-:::tip
-
-You can find the documentation, available components, and code examples following this [this link](https://www.uiisnear.xyz/).
-
-:::
-
-## DIG components
-
-These are the Decentralized Interface Guidelines (DIG) components available on the NEAR VM:
-
-- [DIG.Accordion](https://dev.near.org/#/near/widget/ComponentDetailsPage?src=near/widget/DIG.Accordion)
-- [DIG.Avatar](https://dev.near.org/#/near/widget/ComponentDetailsPage?src=near/widget/DIG.Avatar)
-- [DIG.Badge](https://dev.near.org/#/near/widget/ComponentDetailsPage?src=near/widget/DIG.Badge)
-- [DIG.Button](https://dev.near.org/#/near/widget/ComponentDetailsPage?src=near/widget/DIG.Button)
-- [DIG.Checkbox](https://dev.near.org/#/near/widget/ComponentDetailsPage?src=near/widget/DIG.Checkbox)
-- [DIG.Chip](https://dev.near.org/#/near/widget/ComponentDetailsPage?src=near/widget/DIG.Chip)
-- [DIG.Dialog](https://dev.near.org/#/near/widget/ComponentDetailsPage?src=near/widget/DIG.Dialog)
-- [DIG.DropdownMenu](https://dev.near.org/#/near/widget/ComponentDetailsPage?src=near/widget/DIG.DropdownMenu)
-- [DIG.Input](https://dev.near.org/#/near/widget/ComponentDetailsPage?src=near/widget/DIG.Input)
-- [DIG.InputSearch](https://dev.near.org/#/near/widget/ComponentDetailsPage?src=near/widget/DIG.InputSearch)
-- [DIG.InputSelect](https://dev.near.org/#/near/widget/ComponentDetailsPage?src=near/widget/DIG.InputSelect)
-- [DIG.InputTags](https://dev.near.org/#/near/widget/ComponentDetailsPage?src=near/widget/DIG.InputTags)
-- [DIG.InputTextarea](https://dev.near.org/#/near/widget/ComponentDetailsPage?src=near/widget/DIG.InputTextarea)
-- [DIG.Tabs](https://dev.near.org/#/near/widget/ComponentDetailsPage?src=near/widget/DIG.Tabs)
-- [DIG.Theme](https://dev.near.org/#/near/widget/ComponentDetailsPage?src=near/widget/DIG.Theme)
-- [DIG.Toast](https://dev.near.org/#/near/widget/ComponentDetailsPage?src=near/widget/DIG.Toast)
-- [DIG.Tooltip](https://dev.near.org/#/near/widget/ComponentDetailsPage?src=near/widget/DIG.Tooltip)
-
-
-:::tip
-
-If you want to see working demos of these components, check the [DIG Overview page](https://dev.near.org/near/widget/DIG.OverviewPage).
-
-:::
-
----
-
-### `DIG.Accordion`
-
-An accordion built with the [Radix primitive](https://www.radix-ui.com/docs/primitives/components/accordion).
-
-
-
-```jsx
-// Rendering the component with props
-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) => (
-