0

我实际上被困在连接幻像钱包的第一步。我正在尝试执行以下步骤。

  1. 连接到幻影钱包
  2. 获取公钥
  3. 获取所有代币的余额
  4. 执行买/卖

我可以使用以下代码连接到虚拟钱包。我不确定该过程的下一步是否是获取公钥，以便我可以找到所有代币的余额作为帐户的一部分。

const balance = connection.getBalance(publicKey); 上述方法是我从文档中找到的，但我不确定如何获取将钱包连接到网站的最终用户的 publicKey。

const connection = new solanaWeb3.Connection(solanaWeb3.clusterApiUrl("mainnet-beta")) console.log(connection);

4

1 回答 1

1

假设您有用于与 solana 钱包集成的 react 应用程序，首先安装这些软件包：

yarn add @solana/wallet-adapter-base \
     @solana/wallet-adapter-react \
     @solana/wallet-adapter-react-ui \
     @solana/wallet-adapter-wallets \
     @solana/web3.js \
     react

你也可以使用 next、vue、angular、svelte 和 material ui

接下来我们有这个设置：

import React, { FC, useMemo } from 'react';
import { ConnectionProvider, WalletProvider } from '@solana/wallet-adapter-react';
import { WalletAdapterNetwork } from '@solana/wallet-adapter-base';
import {
    //LedgerWalletAdapter,
    PhantomWalletAdapter,
    SolflareWalletAdapter,
    //SlopeWalletAdapter,
    //SolletExtensionWalletAdapter,
    //SolletWalletAdapter,
    //TorusWalletAdapter,
} 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]);

    // @solana/wallet-adapter-wallets includes all the adapters but supports tree shaking and lazy loading --
    // Only the wallets you configure here will be compiled into your application, and only the dependencies
    // of wallets that your users connect to will be loaded.
    const wallets = useMemo(
        () => [
            new PhantomWalletAdapter(),
            new SlopeWalletAdapter(),
            new SolflareWalletAdapter(),
            new TorusWalletAdapter(),
            new LedgerWalletAdapter(),
            new SolletWalletAdapter({ network }),
            new SolletExtensionWalletAdapter({ network }),
        ],
        [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>
    );
};
  • 导入模块后，我评论了一些钱包适配器，除了 phantom 和 solfare

这个代码块也很重要：

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

带有功能按钮的模态框

  • ConnectionProvider：为钱包准备端点以连接和查询钱包令牌
  • WalletProvider：准备哪些钱包应该以模式加载并准备好连接

最后用法：

import { WalletNotConnectedError } from '@solana/wallet-adapter-base';
import { useConnection, useWallet } from '@solana/wallet-adapter-react';
import { Keypair, SystemProgram, Transaction } from '@solana/web3.js';
import React, { FC, useCallback } from 'react';

export const SendOneLamportToRandomAddress: FC = () => {
    const { connection } = useConnection();
    const { publicKey, sendTransaction } = useWallet();

    const onClick = useCallback(async () => {
        if (!publicKey) throw new WalletNotConnectedError();

        const transaction = new Transaction().add(
            SystemProgram.transfer({
                fromPubkey: publicKey,
                toPubkey: Keypair.generate().publicKey,
                lamports: 1,
            })
        );

        const signature = await sendTransaction(transaction, connection);

        await connection.confirmTransaction(signature, 'processed');
    }, [publicKey, sendTransaction, connection]);

    return (
        <button onClick={onClick} disabled={!publicKey}>
            Send 1 lamport to a random address!
        </button>
    );
};

所以你可以在这部分上面看到

const { connection } = useConnection();
const { publicKey, sendTransaction } = useWallet();

准备建立连接，给你连接的钱包公钥，还利用连接钱包的sendTransaction功能，听起来不错！

我认为代码的其他部分很明显。

那么，像 phantom 这样的钱包适配器有多少功能呢？以及什么功能？我们可以得到公钥、connecting(boolean)、connected(boolean)、readyState。

我们还有其他一些主要功能，例如：

  • 连接
  • 断开
  • 发送交易
  • 签署交易
  • 签署所有交易
  • 签到消息

你可以在这个github repo 链接中看到所有这些

另一点是，如果您使用 Anchor 框架，您应该知道 Anchor 使用自己的“钱包”对象与连接的钱包进行交互并代表其签署交易。所以为了得到一个与 Anchor 的钱包定义兼容的对象，我们可以使用另一个名为 useAnchorWallet 的可组合对象。这将返回一个可以签署交易的钱包对象。

const wallet = useAnchorWallet()

玩得开心

于 2022-01-16T08:26:52.310 回答