nexus-elements-overview

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Nexus Elements Overview

Nexus Elements 概述

Overview

概述

Select the right Nexus Elements sub-skill and ensure prerequisites (shadcn registry + NexusProvider + wallet connection) are in place.

选择合适的Nexus Elements子技能，并确保满足前提条件（shadcn注册表 + NexusProvider + 钱包连接）。

Prerequisites checklist

前提条件检查清单

Ensure shadcn/ui is initialized (a
```
components.json
```
exists) or be ready to manual copy files from
```
/r
```
JSON.
Ensure wallet connection is configured (wagmi or any EIP-1193 provider).
Install and wrap the app with
```
NexusProvider
```
; call
```
handleInit
```
on wallet connect.

确保shadcn/ui已初始化（存在
```
components.json
```
文件），或准备好从
```
/r
```
JSON文件中手动复制文件。
确保已配置钱包连接（使用wagmi或任何EIP-1193提供者）。
安装
```
NexusProvider
```
并将应用包裹其中；在钱包连接时调用
```
handleInit
```
方法。

Provider setup (minimal)

提供者设置（最简版）

tsx

"use client";
import NexusProvider from "@/components/nexus/NexusProvider";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return <NexusProvider>{children}</NexusProvider>;
}

tsx

"use client";
import { useEffect } from "react";
import { useAccount } from "wagmi";
import type { EthereumProvider } from "@avail-project/nexus-core";
import { useNexus } from "@/components/nexus/NexusProvider";

export function InitNexusOnConnect() {
  const { status, connector } = useAccount();
  const { handleInit } = useNexus();

  useEffect(() => {
    if (status === "connected") {
      connector?.getProvider().then((p) => handleInit(p as EthereumProvider));
    }
  }, [status, connector, handleInit]);

  return null;
}

tsx

"use client";
import NexusProvider from "@/components/nexus/NexusProvider";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return <NexusProvider>{children}</NexusProvider>;
}

tsx

"use client";
import { useEffect } from "react";
import { useAccount } from "wagmi";
import type { EthereumProvider } from "@avail-project/nexus-core";
import { useNexus } from "@/components/nexus/NexusProvider";

export function InitNexusOnConnect() {
  const { status, connector } = useAccount();
  const { handleInit } = useNexus();

  useEffect(() => {
    if (status === "connected") {
      connector?.getProvider().then((p) => handleInit(p as EthereumProvider));
    }
  }, [status, connector, handleInit]);

  return null;
}

Registry info

注册表信息

Base registry URL:

https://elements.nexus.availproject.org/r/{name}.json

If
```
components.json
```
exists, ensure this registry mapping exists:

json

"registries": {
  "@nexus-elements/": "https://elements.nexus.availproject.org/r/{name}.json"
}

基础注册表URL：

https://elements.nexus.availproject.org/r/{name}.json

如果存在
```
components.json
```
，请确保包含以下注册表映射：

json

"registries": {
  "@nexus-elements/": "https://elements.nexus.availproject.org/r/{name}.json"
}

Pick the right sub-skill

选择合适的子技能

Fast bridge UI:
```
nexus-elements-fast-bridge
```
Transfer UI:
```
nexus-elements-transfer
```
(registry name is
```
transfer
```
, docs sometimes say
```
fast-transfer
```
)
Deposit widget (swap + execute via
```
swapAndExecute
```
):
```
nexus-elements-deposit
```

Bridge deposit (bridge + execute via

bridgeAndExecute

nexus-elements-bridge-deposit

Swaps widget:
```
nexus-elements-swaps
```
Unified balance display:
```
nexus-elements-unified-balance
```
View history (intent history):
```
nexus-elements-view-history
```
(no
```
view-intent
```
component exists)
Provider setup:
```
nexus-elements-nexus-provider
```
Shared hooks/utils:
```
nexus-elements-common
```

快速桥接UI：
```
nexus-elements-fast-bridge
```
转账UI：
```
nexus-elements-transfer
```
（注册表名称为
```
transfer
```
，文档中有时会写
```
fast-transfer
```
）
存款小部件（通过
```
swapAndExecute
```
实现兑换+执行）：
```
nexus-elements-deposit
```
桥接存款（通过
```
bridgeAndExecute
```
实现桥接+执行）：
```
nexus-elements-bridge-deposit
```
兑换小部件：
```
nexus-elements-swaps
```
统一余额显示：
```
nexus-elements-unified-balance
```
查看历史记录（意图历史）：
```
nexus-elements-view-history
```
（不存在
```
view-intent
```
组件）
提供者设置：
```
nexus-elements-nexus-provider
```
共享钩子/工具：
```
nexus-elements-common
```

SDK flow mapping (for answering questions)

SDK流程映射（用于解答问题）

Fast bridge →

sdk.bridge

+ intent/allowance hooks +

NEXUS_EVENTS.STEPS_LIST

STEP_COMPLETE

Transfer →
```
sdk.bridgeAndTransfer
```
+ intent/allowance hooks.
Deposit →
```
sdk.swapAndExecute
```
+ swap intent hook (
```
swapIntent
```
).
Bridge deposit →
```
sdk.bridgeAndExecute
```
+ intent/allowance hooks.

Swaps →

sdk.swapWithExactIn

sdk.swapWithExactOut

+ swap intent hook +

NEXUS_EVENTS.SWAP_STEP_COMPLETE

Unified balance →

sdk.getBalancesForBridge

sdk.getBalancesForSwap

(via

NexusProvider

View history →
```
sdk.getMyIntents()
```
.

快速桥接 →

sdk.bridge

+ 意图/授权钩子 +

NEXUS_EVENTS.STEPS_LIST

STEP_COMPLETE

转账 →
```
sdk.bridgeAndTransfer
```
+ 意图/授权钩子
存款 →
```
sdk.swapAndExecute
```
+ 兑换意图钩子（
```
swapIntent
```
）
桥接存款 →
```
sdk.bridgeAndExecute
```
+ 意图/授权钩子

兑换 →

sdk.swapWithExactIn

sdk.swapWithExactOut

+ 兑换意图钩子 +

NEXUS_EVENTS.SWAP_STEP_COMPLETE

统一余额 →

sdk.getBalancesForBridge

sdk.getBalancesForSwap

（通过

NexusProvider

调用）

查看历史记录 →
```
sdk.getMyIntents()
```

Manual install fallback

手动安装备选方案

If shadcn is not initialized, use the

/r

JSON for a component and create each file in

files[].target

with

files[].content

. Repeat for all

registryDependencies

listed in that JSON and install the

dependencies

array.

如果未初始化shadcn，请使用组件对应的

/r

JSON文件，将

files[].target

中指定的每个文件创建出来并填入

files[].content

的内容。对该JSON中列出的所有

registryDependencies

重复此操作，并安装

dependencies

数组中的依赖。