Skip to content

Latest commit

 

History

History
154 lines (106 loc) · 7.74 KB

FAQ.md

File metadata and controls

154 lines (106 loc) · 7.74 KB
Raw

FAQ (Frequently Asked Questions)

Please search https://solana.stackexchange.com and the issues in the repo. Issues are only for bug reports and feature requests.

I am building an app, how do I use this?

See the guide Wallet Adapter for Solana Apps.

I am building a wallet, how do I use this?

See the guide Wallet Adapter for Solana Wallets.

How can I get support?

Please ask questions on the Solana Stack Exchange.

After reading this FAQ, if you've found a bug or if you'd like to request a feature, please open an issue.

Can I use this with ___?

React

Yes, see the react-ui-starter package.

Anchor

Yes, use the useAnchorWallet() hook in the React package to easily get an Anchor-compatible Wallet interface.

Next.js (with React)

Yes, see the nextjs-starter package for very basic configuration, or the example package for more complete configuration.

If you're using one of the react-ui, material-ui, or ant-design packages too, make sure to configure the WalletModalProvider or WalletDialogProvider context as shown here.

Material UI (with React)

Yes, see the material-ui-starter package.

Ant Design (with React)

Yes, see the ant-design package.

Vue

Yes, see the community-maintained Vue package.

Angular / RxJS

Yes, see the community-maintained Angular package.

Svelte

Yes, see the community-maintained Svelte package.

Webpack / Gatsby

Yes, but you may need to set up polyfills for certain imported modules.

For example, you may need to install buffer:

npm install --save buffer

And configure webpack.config.js:

const webpack = require('webpack');

module.exports = {
    plugins: [
        new webpack.ProvidePlugin({
            Buffer: ['buffer', 'Buffer']
        })
    ],
    resolve: {
        fallback: {
            crypto: false
        }
    }
};

Babel / Rollup / Vite / Snowpack / esbuild

Yes, but you may need to provide custom build configuration. Most of the packages are built using the TypeScript compiler, which outputs modular ES6 with import/export statements.

If you're using Create React App, craco, or one of the React-based starter projects using them, this should be handled automatically.

If you're using Next.js, this requires configuration, which is provided in the nextjs-starter package.

If you're using something else, you may have to configure your build tool to transpile the packages similarly to how it's done in the Next.js config. Please open an issue or pull request to document your solution!

What does this error mean?

Failed to compile. [...] Module not found: Can't resolve [...]

This can happen if you're cloning the project and building it from the source and you missed a step.

If this doesn't fix the problem, please open an issue.

[...] is not a function / [...] is undefined / Uncaught TypeError: Cannot destructure property / Uncaught (in promise) WalletNotConnectedError

This can happen if you don't wrap your app with the WalletContext and ConnectionContext provided by the react package. See issues #62, #73, and #85.

This shouldn't happen if you're using one of the starter projects, since they set up the contexts for you.

[...] is not a function

This can happen if you try to use signTransaction, signAllTransactions, or signMessage without checking if they are defined first.

sendTransaction is the primary method that all wallets support, and it signs transactions. The other methods are optional APIs, so you have to feature-detect them before using them.

Please see issue #72.

How can I sign and verify messages?

Some wallet adapters provide a signMessage method for signing arbitrary bytes.

The signature string returned by this method can be verified using tweetnacl-js using the public key from the adapter.

This can be used to sign offline — without sending a transaction — and prove a user controls a given private key.

import { useWallet } from '@solana/wallet-adapter-react';
import bs58 from 'bs58';
import React, { FC, useCallback } from 'react';
import { sign } from 'tweetnacl';

export const SignMessageButton: FC = () => {
    const { publicKey, signMessage } = useWallet();

    const onClick = useCallback(async () => {
        try {
            // `publicKey` will be null if the wallet isn't connected
            if (!publicKey) throw new Error('Wallet not connected!');
            // `signMessage` will be undefined if the wallet doesn't support it
            if (!signMessage) throw new Error('Wallet does not support message signing!');

            // Encode anything as bytes
            const message = new TextEncoder().encode('Hello, world!');
            // Sign the bytes using the wallet
            const signature = await signMessage(message);
            // Verify that the bytes were signed using the private key that matches the known public key
            if (!sign.detached.verify(message, signature, publicKey.toBytes())) throw new Error('Invalid signature!');

            alert(`Message signature: ${bs58.encode(signature)}`);
        } catch (error: any) {
            alert(`Signing failed: ${error?.message}`);
        }
    }, [publicKey, signMessage]);

    return signMessage ? (<button onClick={onClick} disabled={!publicKey}>Sign Message</button>) : null;
};