组件功能介绍

1 参数组件

将 Dapp 的链接中的参数传递给其他组件使用。

点击 VARIABLES 分类下的 Global 按钮可添加一个参数(全局变量)组件。设置好参数名称后，后续的其他组件即可引用该变量值。

默认值是否设置是可选项。如果不设置默认值的话，将来在使用这个 Dapp 时，则必须通过链接的方式传入该变量。见黄色矩形处。

该组件只能输出字符串类型。

编号 3 处组件为展示组件，并且引入名称为 name 的参数值。

Example

直接访问 Dapp https://easydapp.ai/run/inXPeoQWuBT8CtijGtKz4TJoKkLB ，该 Dapp 有一个参数组，并且设置了默认值是 Bob。

使用带参数的方式访问 Dapp https://easydapp.ai/run/inXPeoQWuBT8CtijGtKz4TJoKkLB?name=Alice。同一个 Dapp，传入参数 Alice 后的表现效果。

2 常量组件

总是输出一个常量数据。另外一个功能是开启模版配置，一旦开启，则可在快速配置功能中配置该常量的值。

点击 VARIABLES 分类下的 Constant 按钮可添加一个常量组件。先确认想设置的数据类型，见 2 处。再输入对应的值。

该组件输出的数据类型为指定的数据类型。不像参数组件那样只能输出字符串。

Template 选项为可选配置，用于快速配置功能，后续介绍。

Example

https://easydapp.ai/run/inXPeoQWuBT8CtijGtKz4TJoKkLB ，该 Dapp 使用了常量组件，并且设置了一个 Object 对象，其中有一个项名称为 name，值为 Anubis，在后续的组件中就有使用到这个常量。

3 代码组件

引用其他组件的输出值，进行代码计算并输出。

点击 CODE 按钮可添加一个代码组件。从想使用其数据的组件连线到代码组件。编辑输入变量名称和引用。编写代码计算输出。

该组件输出的数据类型为指定的数据类型。数据由代码计算得出。

Output 选项可编辑输出类型。

Example

https://easydapp.ai/run/inXPeoQWuBT8CtijGtKz4TJoKkLB ，该 Dapp 使用了代码组件，引入的 3 个变量：第一个变量为常量值 hello；第 2 个变量为参数组的输出；第 3 个变量为常量组件输出中的 name 值，组合计算输出一个字符串。

4 展示组件

展示数据。目前支持展示 字符串、布尔值、图片、表格数据。

点击 UI 分类下的 Display 按钮可添加一个展示组件。先选择想展示的数据类型，再修改或引用对应的数据。

该组件无输出。右边的引出点是为了方便其他组件穿透引用设置，穿透引用，即一条线上后面的组件可以引入前面任意一个组件的输出数据，而不用直接连接线。

字符串和图片类型可选 Link 功能，一旦使用，会为对应的组件加上点击跳转对应网址的效果。

图片输入的类型应该是网址字符串。

表格输入的类型应该是：

type TableData = {
  headers: string[];
  rows: string[][];
};

Example

https://easydapp.ai/run/inXPeoQWuBT8CtijGtKz4TJoKkLB ，该 Dapp 展示了代码组件输出的字符串。

5 表单组件

允许用户直接输入数据。

点击 UI 分类下的 Form 按钮可添加一个表单组件。选择想让用户输入的数据类型。

该组件的输出类型为选择的类型。

默认值可选，一旦开启则表单会有默认值。

字符串和数字类型会有后缀选项，一旦启用，可以让输入框在输入时显示后缀。

验证功能表示通过代码判断用户输入的值是否有效，有效返回空串，无效返回具体的原因。

Example

https://easydapp.ai/run/inXPeoQWuBT8Cw2eXvyySarSHEbm ，该 Dapp 展示了 3 种类型的表单组件，分别是字符串、数字和布尔值。

6 Http 请求调用组件

进行 http 调用，用于从网络接口获取数据。

点击 HTTP 按钮可添加一个 http 请求调用组件。

1. 添加组件
2. 选择触发方式，有 Loading(直接加载)、Clock(定时触发)和 Click(点击按钮) 三种方式。
3. 选择请求方式 GET、POST、PUT 和 DELETE。
4. 选择请求的处理方式，就是响应体应该是什么类型的数据，有 JSON、TEXT 和 BLOB。
5. 修改或引用 http 请求地址。
6. 处理响应结果以符合组件输出类型要求。
7. 设置组件输出类型。

Headers 选项可通过配置键值对设置请求的 headers。

解析方式选择 TEXT，请求结果就是字符串。

解析方式选择 BLOB，请求结果就是二进制数据。

定时触发方式可设置触发间隔。

点击触发方式可设置点击按钮的显示文本。

Example

上面截图显示的是请求 https://jsonplaceholder.typicode.com/posts 获得的结果，经过代码转换成了表格展示组件需要的数据类型。

7 钱包组件

链接钱包，可得到一个去中心化的身份，配合对应的调用模块，可调用合约接口。

点击 WALLET 下面的按钮可增加一个对应区块链的钱包组件。

1. 添加组件。
2. 选择希望用户使用的钱包。以太坊目前仅支持 MetaMask；ICP 支持 II 和 Plug。
3. 如果要显示连接钱包的按钮，可以配置按钮的显示文本。

如果取消链接按钮，那么在后续没有触发按钮的情况下，会直接在加载时就弹出链接钱包的界面。（如果该身份组件后面有链接对应的合约调用组件，并且该合约调用组件的触发方式选择的是 Click，那么本钱包组件的触发按钮即使忽略也不会主动弹出链接钱包界面。）

简单来说，我们希望必须在用户主动触发的情况下才能链接钱包，所以在身份组件和合约调用组件都可以配置触发按钮，如果两个组件都显示触发按钮，又显得很呆，所以可以省略一个。

右上角可以区别每种区块链。后续只有同链的调用组件可以使用该身份进行调用。（比如，一个 ICP 合约调用组件，即使链接了 ETH 的钱包组件，那么，也不能够使用该 ETH 身份来调用 ICP 合约的。）

每个钱包组件可以输出对应的身份的必要信息。

type IcpWallet = {
  wallet: "ii" | "plug";
  owner: string; // principal example: 'd7rvs-77kib-2rtpa-5kgur-2ywtm-cj7n5-zfhcp-q57s5-eo46p-xasta-oae'
  account_id: string; // account example: 'f2b5aef2823e4d5d3c348d8190fee1852ca2b19bbf9818b5d60d279d2addf1a8'
};
 
type EvmWallet = {
  chain: "ethereum" | "ethereum-test-sepolia" | "bsc" | "bsc-test";
  chain_id: 1 | 11155111 | 137 | 80002; // 对应链 id
  wallet: "metamask";
  account: string; // account address example: '0xF3b3d77B205ED4955989c7767bd10575e0C0C3Ab'
};

如果启用登录按钮，如果该身份已经登录，那么按钮就会消失不见。截图里面第 2 个按钮已经消失了。

同一个 Dapp 目前每个链支持一个钱包组件，即使引入多个，那么在运行时也会使用同一个身份。（有必要在同一个 Dapp 里面需要多个身份吗？🐶）

Example

上面截图显示了 5 种钱包组件。

8 IC 合约调用组件

调用 IC 罐子（合约）接口。

点击 CONTRACT 分类下的 IC 按钮可添加一个 IC 调用组件。

1. 添加组件。
2. 确定合约调用触发方式。和 http 请求调用组件一样的 3 种：Loading、Clock、Clock。
3. 确定合约调用使用的钱包身份。默认匿名调用。注意：必须链接上对应链的钱包组件才会有选择选项。
4. 输入被调用的合约地址。会自动尝试获取接口文件 Candid。支持上传本地 Candid 文件。
5. 通过接口文件解析出来接口列表，选择想调用的接口。
6. 处理接口的请求数据。特别简单的接口参数可以省略，大部分都需要用代码方式处理。（TODO：将来会支持直接点选数据方式配置参数）
7. 处理接口的返回数据。
8. 设置组件输出类型。

和 Http 请求调用组件类似，处理返回数据要注意输出类型和 Output 指定的类型一致。

Example

上面截图显示了查询 ICP 余额，调用的合约是 ryjl3-tyaaa-aaaaa-aaaba-cai，使用的接口是 account_balance_dfx，参数就是钱包组件输出的 account_id，返回的结果除以 8 位精度。

9 EVM 合约调用组件

调用 EVM 合约。EVM 系的四种组件（以太坊及其测试网，BSC 及其测试网）都是类似的，统一说明。

EVM 支持 5 中调用，分别是：

• Call 静态调用合约接口，不上链
• Sign 钱包签名，不上链
• Transaction 调用合约更新接口，上链
• Deploy 部署合约，上链
• Transfer 转移 ETH，上链

9.1 Call 静态调用合约接口

1. 添加组件
2. 确定合约调用触发方式。和 http 请求调用组件一样的 3 种：Loading、Clock、Clock。
3. 确定合约调用使用的钱包身份。默认匿名调用。注意：必须链接上对应链的钱包组件才会有选择选项。
4. ⚠️ 请求方式选择 Call。
5. 输入被调用的合约地址。会自动尝试获取接口文件 abi。支持上传本地 abi 文件。
6. 通过接口文件解析出来接口列表，选择想调用的接口。
7. 处理接口的请求数据。特别简单的接口参数可以省略，大部分都需要用代码方式处理。
8. 处理接口的返回数据。
9. 设置组件输出类型。

单位写错了，应该是 USDT。🐶

Example

上面截图显示了查询 USDC 余额，调用的合约是 0xdac17f958d2ee523a2206206994597c13d831ec7，使用的接口是 balanceOf，参数就是钱包组件输出的 account，返回的结果除以 6 位精度（该精度值是另一个 Call 匿名加载直接调用该合约的 decimals 得到的数据）。

9.2 Sign 签名

1. 添加组件
2. 确定合约调用触发方式。和 http 请求调用组件一样的 3 种：Loading、Clock、Clock。
3. 确定合约调用使用的钱包身份。默认匿名调用。注意：必须链接上对应链的钱包组件才会有选择选项。
4. ⚠️ 请求方式选择 Sign。
5. 修改或引入要签名的内容。
6. 输出类型无需设置，固定输出字符串形式 hex 签名数据。

第 5 处的签名内容，可以是字符串，或者 hex 形式的二进制字符串。

Example

上面截图显示了签字符串 “message 123123123” 的结果。

9.3 Transaction 交易调用合约接口

1. 添加组件
2. 确定合约调用触发方式。和 http 请求调用组件一样的 3 种：Loading、Clock、Clock。
3. 确定合约调用使用的钱包身份。默认匿名调用。注意：必须链接上对应链的钱包组件才会有选择选项。
4. ⚠️ 请求方式选择 Transaction。
5. 输入被调用的合约地址。会自动尝试获取接口文件 abi。支持上传本地 abi 文件。
6. 通过接口文件解析出来接口列表，选择想调用的接口。
7. 处理接口的请求数据。特别简单的接口参数可以省略，大部分都需要用代码方式处理。
8. 设置 Gas Limit，可选。
9. 设置 Gas Price，可选。
10. 设置 Nonce，可选。
11. 输出类型无需设置，固定输出字符串形式交易 id。

我的账户没有余额，gas limit 也是随便设置的，评估 gas 阶段就已经失败了。如果调用大概率会失败，就会阻止调用。

发起交易最多等待一个确认或最长 3 分钟时间超时。

第 7 步和第 8 步之间还有一个 Pay Value，用于调用带有 payable 的接口支付 eth。图示样例并不是 payable 的，因此未曾显示。

Example

上面截图显示了调用合约转账 ERC20 Token。

9.4 Deploy 部署合约

1. 添加组件
2. 确定合约调用触发方式。和 http 请求调用组件一样的 3 种：Loading、Clock、Clock。
3. 确定合约调用使用的钱包身份。默认匿名调用。注意：必须链接上对应链的钱包组件才会有选择选项。
4. ⚠️ 请求方式选择 Deploy。
5. 修改或引用部署合约的 Abi 文件。
6. 修改或引用部署合约的字节码文件。
7. 输入部署合约的初始化参数，可选，根据合约是否有构造函数。
8. 设置 Gas Limit，可选。
9. 设置 Gas Price，可选。
10. 设置 Nonce，可选。
11. 输出类型无需设置，固定输出交易 id 和部署合约地址。

图示 Abi 和代码不是真实的数据。

部署合约超时时间 3 分钟。

Example

上面截图显示了部署合约。

9.5 Transfer 转账调用接口

1. 添加组件
2. 确定合约调用触发方式。和 http 请求调用组件一样的 3 种：Loading、Clock、Clock。
3. 确定合约调用使用的钱包身份。默认匿名调用。注意：必须链接上对应链的钱包组件才会有选择选项。
4. ⚠️ 请求方式选择 Transfer。
5. 修改或引入转账的目标地址。
6. 支付金额，单位 ETH，或者对应链的代币。
7. 设置 Gas Price，可选。
8. 设置 Nonce，可选。
9. 输出类型无需设置，固定输出字符串形式交易 id。

我的账户没有余额，调用会失败

Example

上面截图显示了向指定地址转 ETH 的流程。

10 交互组件

能够引入依赖组件的数据，并且由用户交互后，产生新的数据的组件。

目前支持 4 种交互组件。

10.1 Choose 多个按钮，输出某个按钮对应的值

1. 添加组件
2. 选择组件类型，当前选择 Choose。
3. 修改按钮显示的文本。多个。
4. 修改该按钮对应的值。多个。
5. 输出类型固定为字符串。输出结果是用户点击某个按钮后对应的值。

图示产生 4 个按钮。第 3 步配置的是显示文本，如右图预览所示。第 4 步配置的是对应的值。如果用户点击了 1111 按钮，那么该组件输出值是 1111 。如果用户点击了 Option 2 按钮，那么该组件输出的值是 option2 。

10.2 Choose & Form 按钮和输入框

1. 添加组件
2. 选择组件类型，当前选择 Choose & Form。
3. 修改按钮显示的文本。多个。
4. 修改该按钮对应的值。多个。
5. 输入框默认值，可选。
6. 确定按钮的显示文本，可选。
7. 代码验证输入框内容是否有效，可选。和表单组件相同的功能。
8. 输出类型固定为字符串。输出结果是用户点击某个按钮后对应的值或者用户点击确定按钮后输入框里面的内容。

10.3 Choose & Dropdown 下拉框

1. 添加组件
2. 选择组件类型，当前选择 Choose & Dropdown。
3. 修改下拉左边的显示内容，类型是字符串数组。
4. 修改下拉右边的提示内容，类型是字符串数字，可选。长度应该和左边一致。
5. 输出类型固定为整数。输出结果是用户点击某个选项后对应的序号，从 0 开始计数。

如果用户选择了 1111，那么对应的输出为 0。

10.4 Choose & [Form] 按钮和可选输入框

1. 添加组件
2. 选择组件类型，当前选择 Choose & [Form]。
3. 修改或引入选项数据，对象数组，每个对象包含 option 和 value。
4. 输入框，可选。默认值、确认按钮文本和验证功能和 Choose & Form 一样的。
5. 输出类型固定为字符串。输出结果是用户点击某个按钮后对应的值或者用户点击确定按钮后输入框里面的内容。

和 Choose & Form 的区别是，选项按钮可以全面配置，可以通过引入显示不同的按钮文本。Choose 和 Choose & Form 组件的缺点是选项按钮的显示文本必须在开发阶段就确定。

11 条件组件

根据数据执行不同的流程。

1. 添加组件
2. 确定分支的条件判断，左边是引入的数据，再确定比较方式，再确定右边比较对象的值。
3. 根据需要添加更多的条件分支，可选。

条件分支判断，根据左边引入数据类型的不同，比较方式也是不同的。

Example

直接访问 Dapp https://easydapp.ai/run/inXPeoQWuBT8CtGPR1ecPzqv4giT ，即图示 Dapp，通过条件组件，用户可以选择 5 个不同的分支，然后显示各自分支的内容，未被选择的分支不会被执行。