新消息:Helius 收购 Light Protocol
使用 Helius 和 Dynamic SDK 的 Solana 嵌入式钱包教程
博客/开发

Solana 应用用户引导:为何应选择嵌入式钱包

Dynamic.xyz 开发者体验X 上的 Matthew FoyleLinkedIn 上的 Matthew Foyle
阅读需 7 分钟

你有一个突破性的移动端或 Web 应用创意。

你知道 Solana 是构建这款应用的理想区块链,也希望尽快发布功能丰富的体验,从第一天起就吸引用户。

那么,你的开发者工具箱里需要哪些工具才能实现这一目标?

Cursor 和 v0 等工具很可能位居你的清单前列,而 Next.js 也是前端框架的有力选择。

但在满足应用对 Solana 的特定需求时,哪些解决方案能帮助你顺利发布并高效扩展?

在 Solana 上构建和扩展应用需要两个关键组件:

  1. 用于身份验证和钱包管理的无缝用户引导解决方案
  2. 用于处理高性能交易的强大 RPC 服务

这些基础组件不仅能简化开发,还能提供无缝的用户体验。

下面深入了解这两个组件。

Solana Wallet Adapter

最简单的用户引导方式,是让用户连接 Phantom 或 Solflare 等现有钱包。这种方法非常适合熟悉 Solana 且已设置好钱包的用户。

Solana Wallet Adapter 是一个不错的起点,它提供:

  • 用于直接集成的标准化 API
  • 钱包连接和交易签名所需的基础功能
  • 可根据应用需求定制的开源灵活性

Solana Wallet Adapter 实现起来快速又简单,是已有钱包用户的可靠选择。

除了支持多种钱包外,它还提供标准化集成,确保钱包功能一致,并提供钱包连接按钮等开箱即用的 UI 组件。最后,与 window.solana 等原始 API 相比,它优化了性能,可以更快地签名和发送交易。

Solana Wallet Adapter 的开源设计让开发者能够根据应用的具体需求进行定制。社区实现还将其兼容性扩展到了 Vue、Angular、Svelte 和 TypeScript 等框架与语言。

不过,使用该适配器会为项目引入额外依赖,增加开发者的负担。

虽然该适配器开箱即用地提供了许多功能,但要进行深度定制,可能需要研究其代码库或创建变通方案。根据具体用例,这可能会耗费大量时间。

与任何第三方库一样,开发者可能遇到无法控制的错误或问题,进而影响应用稳定性,或需要外部支持才能解决。

虽然钱包适配器对加密原生用户很实用,但如果你的目标是吸引更广泛的受众,尤其是不熟悉区块链或尚未拥有钱包的用户,它就显得力不从心。

使用嵌入式钱包引导新用户

嵌入式钱包可以显著改善 Solana 用户引导体验,帮助开发者获取更多用户。新用户可以注册,并自动在应用内获得一个钱包。

这让用户可以:

  • 无需设置第三方钱包即可开始使用
  • 无缝接收资产
  • 进行链上交易

这种方式可以最大限度减少阻力,对以主流普及为目标的消费级应用尤其有价值。

根据 Dynamic 的数据,超过 50% 的用户会选择嵌入式钱包,而不是连接现有钱包。

不过,采用率会因用户引导方式和目标用户群而异。

加密原生用户可能更倾向于连接现有钱包,而更广泛的主流用户则可能更喜欢嵌入式解决方案的便利性。

找到合适的平衡点至关重要。

散户流动性目前仍主要集中在热钱包中。这意味着,尽管嵌入式钱包可以简化用户引导,但它不一定始终是最佳起点。开发者应考虑初始目标受众,并设计符合用户需求的引导体验。

用于用户引导和钱包基础设施的综合 SDK

如果开发者希望启用 Solana Wallet Adapter 之外的功能,Dynamic 的 SDK 等解决方案可以提供更全面的方法。

使用 Dynamic,你可以:

1. 支持多种钱包选项

允许用户连接 Phantom 等现有 Solana 钱包,并为新用户创建嵌入式钱包。

2. 启用社交账号和电子邮件登录

通过 X 和 Telegram 等用户熟悉的登录方式简化钱包设置。

3. 定制用户体验

使用预构建 UI 组件快速集成,或选择完全无头的方案来设计自己的流程。

4. 让应用面向未来

添加多钱包支持、欺诈防护工具和分析功能,以扩展并优化你的应用。

5. 获取其他链上的用户

准备就绪后,将应用功能从 Solana 扩展到其他链。

借助 Dynamic 等解决方案,你可以简化开发,同时为用户提供无缝的引导体验。

它是 Solana Wallet Adapter 的有力补充,为开发者提供更多用户引导功能、可扩展性和定制能力。

Solana Wallet Adapter 与嵌入式钱包对比

以下对比可帮助你了解两者的区别:

功能Solana Wallet AdapterDynamic
钱包连接✅✅
嵌入式钱包❌✅
社交账号登录❌✅
多链支持❌✅
可定制 UI❌✅
欺诈防护❌✅
访问列表❌✅
用户管理❌✅
Webhooks❌✅

无论功能如何,实现时间始终是决定性因素。你可能会认为,既然 Dynamic 提供如此多的功能,它会比 Solana Wallet Adapter 更难实现,但事实并非如此。

以下是默认 React 实现的对比:

Solana Wallet Adapter:默认实现

代码
import React, { FC, useMemo } from 'react';
import { ConnectionProvider, WalletProvider } from '@solana/wallet-adapter-react';
import { WalletAdapterNetwork } from '@solana/wallet-adapter-base';
import { UnsafeBurnerWalletAdapter } from '@solana/wallet-adapter-wallets';
import {
WalletModalProvider,
WalletDisconnectButton,
WalletMultiButton
} from '@solana/wallet-adapter-react-ui';
import { clusterApiUrl } from '@solana/web3.js';

// Default styles that can be overridden by your app
require('@solana/wallet-adapter-react-ui/styles.css');

export const Wallet: FC = () => {
// The network can be set to 'devnet', 'testnet', or 'mainnet-beta'.
const network = WalletAdapterNetwork.Devnet;

// You can also provide a custom RPC endpoint.
const endpoint = useMemo(() => clusterApiUrl(network), [network]);

const wallets = useMemo(
() => [
new UnsafeBurnerWalletAdapter(),
],
// eslint-disable-next-line react-hooks/exhaustive-deps
[network]
);

return (
<ConnectionProvider endpoint={endpoint}>
<WalletProvider wallets={wallets} autoConnect>
<WalletModalProvider>
<WalletMultiButton />
<WalletDisconnectButton />
{ /* Your app's components go here, nested within the context providers. */ }
</WalletModalProvider>
</WalletProvider>
</ConnectionProvider>
);
};

Dynamic:默认实现

代码
import React from 'react'
import { DynamicContextProvider, DynamicWidget } from '@dynamic-labs/sdk-react-core'
import { SolanaWalletConnectors } from '@dynamic-labs/solana'

export const App = () => {
return (
<div className="App">
<DynamicContextProvider
settings={{
environmentId: process.env.REACT_APP_DYNAMIC_ENVIRONMENT_ID,
walletConnectors: [SolanaWalletConnectors],
}}
>
{ /* Your app's components go here, nested within the context providers. */ }
<DynamicWidget />
</DynamicContextProvider>
</div>
)
}

至此,用户引导已全部设置完毕。我们使用了 DynamicWidget,这是一款一体化 UI 组件,可处理登录/注册按钮、完整的身份验证流程、用户资料等功能。

启动应用后,你会看到以下界面:

如果你希望构建自己的 UI 或定制特定元素,一切都可以精确配置到像素级。查看设计文档或无头集成选项,获取详细指导。

要在 Solana 上启用嵌入式钱包注册,只需前往控制面板并按照以下步骤操作:

就这么简单!

任何使用电子邮件、电话号码或社交媒体账号注册的用户都会获得一个 Solana 钱包,并可立即使用你的应用。

只需几行代码,你就能获得一流的用户引导体验,包括现在和未来所需的全部功能。

添加 RPC 提供商并设置优先费

虽然用户引导仍是当今用户面临的最大阻力之一,但交易处理也紧随其后。应对 Solana 网络拥堵并不容易。缺少专用 RPC 服务时,用户可能会遇到交易丢失,进而感到沮丧。同样,优先费设置错误也会破坏用户体验,并削弱应用的可靠性。

你可以使用 Helius 同时提供 RPC 端点,并通过其 Priority Fee API 动态设置费用,从而轻松避免这些问题。只需在 Dynamic 控制面板中设置 RPC URL,即可完成接入。

创建交易时,使用 Priority Fee API 获取费用。

代码
async function getPriorityFeeEstimate(priorityLevel, transaction) {
    const response = await fetch(HeliusURL, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
            jsonrpc: "2.0",
            id: "1",
            method: "getPriorityFeeEstimate",
            params: [
                {
                    transaction: bs58.encode(transaction.serialize()), // Pass serialized transaction in Base58
                    options: { priorityLevel: priorityLevel },
                },
            ],
        }),
    });

    const data = await response.json();
    console.log(
        "Fee in function for",
        priorityLevel,
        "",
        data.result.priorityFeeEstimate
    );
    return data.result;
}

Magic Eden 案例研究

强大的钱包基础设施对于开发高性能、可扩展的 Solana 应用至关重要。

领先的 NFT 市场 Magic Eden 通过添加新链快速扩展。为了支持这一策略,并在 NFT 铸造等高流量时期保持出色表现,他们需要灵活的钱包解决方案。

通过集成 Dynamic 的 SDK,Magic Eden 可以提供多链钱包支持、社交账号关联和多钱包管理功能。管理多个钱包并跨网络收藏资产也变得十分简单。

Magic Eden 还依靠 Helius 管理 RPC 节点并优化交易吞吐量。借助 Helius 的 Priority Fee API,即使在流量高峰期,Magic Eden 也能保持可靠性和速度。

Dynamic 与 Helius 的组合让 Magic Eden 得以高效扩展,同时为数百万月活跃用户提供卓越体验。

Magic Eden 将可扩展性、速度和用户体验放在首位,为 NFT 市场树立了新的标杆。

对于希望构建同时吸引加密原生用户和主流受众的应用开发者而言,投资可靠的钱包解决方案可以简化开发、覆盖更广泛的用户群,并为长期增长奠定基础。

其他资源

衷心感谢 @__lostin__ 和 Brady Werkheiser 审阅本文的早期版本。

订阅 Helius

及时了解 Solana 开发的最新动态,并在我们发布新内容时收到更新

放大图片