# Network ⛓️

The Network feature allows you to connect and get information from the current Ethereum network. You can read information from the currently connected network, allow a user to enable the connection to the current network, and give the User the ability to send ETH. 

{% hint style="info" %}
Want to get started quick with no-code? Check out our no-code template in Webflow!
{% endhint %}

{% embed url="<https://webflow.com/website/DappHero-network>" %}
Click "clone" to make it yours!
{% endembed %}

{% hint style="info" %}
Prefer to dig in and get your hands dirty with HTML? Remix our Demo on Glitch!
{% endhint %}

{% embed url="<https://glitch.com/~dapphero-network>" %}
Click "remix" to start your own project!
{% endembed %}

### Network Enable

{% hint style="info" %}
It is **required** that you implement a **Network Enable** element in your webpage. This should ideally be a **`button`**&#x74;ype element that a user clicks to connect to ethereum. Without it, DappHero won't load!
{% endhint %}

| Tag                       | Property  | Required? | Output |
| ------------------------- | --------- | --------- | ------ |
| `data-dh-feature`         | "network" | Yes       | none   |
| `data-dh-property-enable` | "true"    | Yes       | none   |

We recommend that you feature this button prominently, where users will see it immediately. As a matter of privacy and security, DappHero will only be able to process transactions and access your users information once the connection has been approved.&#x20;

An example of what an Enable button might look like. When a user clicks on it, they will be requested by MetaMask to give their permission to be connected to your website.&#x20;

```markup
<button
    data-dh-feature="network"
    data-dh-property-enable="true">
    *Button Text*
</button>
```

### Network Data

| Tag                         | Property  | Required? | Output           |
| --------------------------- | --------- | --------- | ---------------- |
| **To Display Data**         |           |           |                  |
| `data-dh-feature`           | "network" | Yes       | none             |
| `data-dh-property-id`       | "true"    | optional  | Network Id       |
| `data-dh-property-name`     | "true"    | optional  | Network Name     |
| `data-dh-property-provider` | "true"    | optional  | Network Provider |

There are many different kinds of Ethereum networks, each have their own ID. To get the value of the current network ID, use:&#x20;

```markup
<div
    data-dh-feature="network"
    data-dh-property-id="true">
    *placeholder text*
</div>
```

When your webpage loads, the word "placeholder text" will be replaced with the value of the currently connected Network ID.&#x20;

#### Network Name

Along with a Network ID, most public Ethereum networks also have a network name, which can be more intuitive to users than Network ID. Note, if you are connected to a private network or special purpose network, your network may not have a known network name.&#x20;

```markup
<div
    data-dh-feature="network"
    data-dh-property-name="true">
    *placeholder text*
</div>
```

#### Network Provider

Currently, users will be bringing their own connection to the Ethereum Blockchain in the form of an in browser wallet such as [MetaMask](http://www.metamask.io). To get the name of the current provider, use:&#x20;

```markup
<div
    data-dh-feature="network"
    data-dh-property-provider="true">
    *placeholder text*
</div>
```

{% hint style="info" %}
Currently DappHero supports only MetaMask for users, but will be expanding the number of providers it supports in the near future.&#x20;
{% endhint %}

## Transferring ETH

The DappHero Network feature also allows you to let a user transfer ETH. To do this you would add input `elements` to your webpage that you tag for `amount` and recipient `address` respectively.&#x20;

{% hint style="info" %}
Current there can be only one instance of ETH transfer per page. This will be changed in a future release of DappHero to allow for multiple transfers per page.
{% endhint %}

| Tag                              | Property         | Required? | Output         |
| -------------------------------- | ---------------- | --------- | -------------- |
| **FOR SENDING ETH**              |                  |           |                |
| `data-dh-feature`                | "network"        | Yes       | none           |
| `data-dh-property-transfer`      | "input"          | Yes       | none           |
| **Input Elements**               |                  |           |                |
| `data-dh-property-input-name`    | "amount"         | Yes       | none           |
| `data-dh-property-input-name`    | "address"        | Yes       | none           |
| **Invoke Button**                |                  |           |                |
| `data-dh-property-transfer`      | "invoke"         | Yes       | none           |
| **Units Modifier**               |                  |           |                |
| `data-dh-modifier-display-units` | "ether" \| "wei" | optional  | Input Modifier |

```markup
<!-- An input field for the amount of ETH to send, with the units set to ETH -->
<input 
            data-dh-feature="network"
            data-dh-property-transfer="input" 
            data-dh-property-input-name="amount" 
            data-dh-modifier-display-units="ether">
</input>
      
<!-- An input field for the address to receive the ETH -->
<input
            data-dh-feature="network" 
            data-dh-property-transfer="input"
            data-dh-property-input-name="address">
</input>
    
<!-- A button to invoke the action of sending ETH and request user signature -->
<button 
            data-dh-feature="network" 
            data-dh-property-transfer="invoke">
            Click to transfer!
</button>
```

To require users to send a specific amount of ETH or to a predefined address, you would set the value of the inputs manually and set their style to `display: none` to effectively hide them from the user.&#x20;

```markup
<!-- An input field for the amount of ETH to send, with the units set to ETH -->
<input 
            data-dh-feature="network"
            data-dh-property-transfer="input" 
            data-dh-property-input-name="amount" 
            data-dh-modifier-display-units="ether"
            style="display:none;"
            value="<<predefined amount of ETH>>">
</input>
      
<!-- An input field for the address to receive the ETH -->
<input
            data-dh-feature="network" 
            data-dh-property-transfer="input"
            data-dh-property-input-name="address"
            style="display:none;"
            value="<<predefined address>>">
</input>
    
<!-- A button to invoke the action of sending ETH and request user signature -->
<button 
            data-dh-feature="network" 
            data-dh-property-transfer="invoke">
            Click to transfer!
</button>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.dapphero.io/features/network.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.