Im really liking this package, you take away a lot of the work but I've noticed a small bug / "growing pain" where the walletState is outputing the following:

{
  ...,
  connecting: false,
  connected: true,
  ready: true,
  publicKey: null
}

I would expect the publicKey to be set before the connecting flag is set to false after actually connecting. If you agree, I'd be happy to open a PR for this.

I am able to retrieve the public Key as specified in Readme.MD but getting an error with the connection.
Unhandled Rejection (WalletSendTransactionError): connection is undefined

Should be svg instead of png!

diff --git a/node_modules/@solana/wallet-adapter-wallets/lib/wallets.js b/node_modules/@solana/wallet-adapter-wallets/lib/wallets.js
index 8d06e22..0ff2a06 100644
--- a/node_modules/@solana/wallet-adapter-wallets/lib/wallets.js
+++ b/node_modules/@solana/wallet-adapter-wallets/lib/wallets.js
@@ -32,7 +32,7 @@ export const getMathWallet = (config) => ({
 export const getPhantomWallet = (config) => ({
     name: WalletName.Phantom,
     url: 'https://www.phantom.app',
-    icon: `${ICONS_URL}/phantom.png`,
+    icon: `${ICONS_URL}/phantom.svg`,
     adapter: () => new PhantomWalletAdapter(config),
 });
 export const getSolflareWallet = (config) => ({

This issue body was partially generated by patch-package.

I'm using the @solana/wallet-adapter-ant-design components for the application that I'm writing but the WalletListItem component seems to be rendering incorrectly compared to the what the documentation shows.

My app is using craco to do the less bundling and importing the antd/dist/antd.dark.less styles exactly how the example demo does, but the image below shows how its being rendered.

It's really strange being when I clone this repository and run the demo, it does render according to the images in the docs, but for some reason mine doesn't even though i'm doing everything (that I can think of) the same.

// ConnectWallet.tsx
import { FunctionComponent, useMemo } from 'react'
import { clusterApiUrl } from '@solana/web3.js'
import {
  getLedgerWallet,
  getPhantomWallet,
  getSolletWallet,
  getSolongWallet
} from '@solana/wallet-adapter-wallets'
import { ConnectionProvider, WalletProvider } from '@solana/wallet-adapter-react'
import { WalletModalProvider, WalletMultiButton } from '@solana/wallet-adapter-ant-design'

interface ConnectWalletProps {}

const ConnectWallet: FunctionComponent<ConnectWalletProps> = _props => {
  const endpoint = useMemo(() => clusterApiUrl('devnet'), [])
  const supportedWallets = useMemo(
    () => [getLedgerWallet(), getPhantomWallet(), getSolletWallet(), getSolongWallet()],
    []
  )

  return (
    <ConnectionProvider endpoint={endpoint}>
      <WalletProvider wallets={supportedWallets}>
        <WalletModalProvider featuredWalletsNumber={supportedWallets.length}>
          <WalletMultiButton />
        </WalletModalProvider>
      </WalletProvider>
    </ConnectionProvider>
  )
}

export default ConnectWallet

My craco.config.js is also identical to the demo. Any suggestions at this point would be much appreciated.

Hey, I tried to use sollet web extension with SolletWalletAdapter. I found an issue with .connect which the Promise is immediately resolved whether the user click connect or not.

Not sure whether it's the Sollet web extension or the library, just wanna bring this up

[4/5] Linking dependencies...
warning " > @solana/[email protected]" has unmet peer dependency "@angular/core@^12.2.0".
warning " > @solana/[email protected]" has unmet peer dependency "@ngrx/component-store@^12.4.0".
warning " > @solana/[email protected]" has unmet peer dependency "@solana/web3.js@^1.20.0".
warning " > @solana/[email protected]" has unmet peer dependency "rxjs@^6.6.0".
warning " > @solana/[email protected]" has unmet peer dependency "@solana/web3.js@^1.20.0".
warning " > @solana/[email protected]" has unmet peer dependency "@solana/web3.js@^1.20.0".
warning " > @solana/[email protected]" has unmet peer dependency "react@^17.0.2".
warning " > @solana/[email protected]" has unmet peer dependency "@ant-design/icons@^4.6.3".
warning " > @solana/[email protected]" has unmet peer dependency "@solana/web3.js@^1.20.0".
warning " > @solana/[email protected]" has unmet peer dependency "antd@^4.16.11".
warning " > @solana/[email protected]" has unmet peer dependency "react@^17.0.2".
warning " > @solana/[email protected]" has unmet peer dependency "react-dom@^17.0.2".
warning " > @solana/[email protected]" has unmet peer dependency "@material-ui/core@^4.12.1".
warning " > @solana/[email protected]" has unmet peer dependency "@material-ui/icons@^4.11.2".
warning " > @solana/[email protected]" has unmet peer dependency "@solana/web3.js@^1.20.0".
warning " > @solana/[email protected]" has unmet peer dependency "react@^17.0.2".
warning " > @solana/[email protected]" has unmet peer dependency "react-dom@^17.0.2".
warning " > @solana/[email protected]" has unmet peer dependency "@solana/web3.js@^1.20.0".
warning " > @solana/[email protected]" has unmet peer dependency "react@^17.0.2".
warning " > @solana/[email protected]" has unmet peer dependency "react-dom@^17.0.2".
warning " > @solana/[email protected]" has unmet peer dependency "@solana/web3.js@^1.20.0".
warning " > @solana/[email protected]" has unmet peer dependency "@solana/web3.js@^1.20.0".
warning " > @solana/[email protected]" has unmet peer dependency "@solana/web3.js@^1.20.0".
warning " > @solana/[email protected]" has unmet peer dependency "@solana/web3.js@^1.20.0".
warning " > @solana/[email protected]" has unmet peer dependency "@solana/web3.js@^1.20.0".
warning " > @solana/[email protected]" has unmet peer dependency "@solana/web3.js@^1.20.0".
warning " > @solana/[email protected]" has unmet peer dependency "@solana/web3.js@^1.20.0".
warning " > @solana/[email protected]" has unmet peer dependency "@solana/web3.js@^1.20.0".
warning " > @solana/[email protected]" has unmet peer dependency "@solana/web3.js@^1.20.0".
warning " > @solana/[email protected]" has unmet peer dependency "@solana/web3.js@^1.20.0".
warning " > @solana/[email protected]" has unmet peer dependency "@solana/web3.js@^1.20.0".
warning " > @solana/[email protected]" has unmet peer dependency "@solana/web3.js@^1.20.0".
warning " > @solana/[email protected]" has unmet peer dependency "@solana/web3.js@^1.20.0".
warning " > @solana/[email protected]" has unmet peer dependency "@solana/web3.js@^1.20.0".
warning " > @solana/[email protected]" has unmet peer dependency "@solana/web3.js@^1.20.0".
warning "workspace-aggregator-18bb6364-646f-437a-9f14-53bf3557b80c > @solana/wallet-adapter-angular > @angular/[email protected]" has unmet peer dependency "zone.js@~0.11.4".
warning "workspace-aggregator-18bb6364-646f-437a-9f14-53bf3557b80c > @solana/wallet-adapter-material-ui-starter > @testing-library/[email protected]" has unmet peer dependency "@testing-library/dom@>=7.21.4".
warning "workspace-aggregator-18bb6364-646f-437a-9f14-53bf3557b80c > @solana/wallet-adapter-torus > @toruslabs/[email protected]" has unmet peer dependency "@babel/[email protected]".
warning "workspace-aggregator-18bb6364-646f-437a-9f14-53bf3557b80c > @solana/wallet-adapter-torus > @toruslabs/[email protected]" has unmet peer dependency "@babel/[email protected]".
warning "workspace-aggregator-18bb6364-646f-437a-9f14-53bf3557b80c > @solana/wallet-adapter-example > next-plugin-antd-less > [email protected]" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
warning "workspace-aggregator-18bb6364-646f-437a-9f14-53bf3557b80c > @solana/wallet-adapter-example > next-plugin-antd-less > [email protected]" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
warning "workspace-aggregator-18bb6364-646f-437a-9f14-53bf3557b80c > @solana/wallet-adapter-react-ui-starter > react-hot-toast > [email protected]" has unmet peer dependency "csstype@^2.6.2".
warning "workspace-aggregator-18bb6364-646f-437a-9f14-53bf3557b80c > @solana/wallet-adapter-torus > @toruslabs/openlogin > @toruslabs/[email protected]" has unmet peer dependency "@babel/[email protected]".
warning "workspace-aggregator-18bb6364-646f-437a-9f14-53bf3557b80c > @solana/wallet-adapter-torus > @toruslabs/openlogin > @toruslabs/[email protected]" has unmet peer dependency "@babel/[email protected]".
warning "workspace-aggregator-18bb6364-646f-437a-9f14-53bf3557b80c > @solana/wallet-adapter-torus > @toruslabs/openlogin > @toruslabs/[email protected]" has unmet peer dependency "@babel/[email protected]".
warning "workspace-aggregator-18bb6364-646f-437a-9f14-53bf3557b80c > @solana/wallet-adapter-example > next > styled-jsx > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".

Should we implement a new event to make it easier for users to switch wallet?

About React components, would be nice if we could change network and change wallet on UI same as Serum.
Thanks for the nice work guys.

I'm not a user of Vue, but if anyone wants to PR vue and vue-ui packages based on the react and react-ui packages, I'd be happy to accept them.

hello, i dont know if it's the right place to ask.
I would like to know when the wallet connect part will be published to npm?
https://github.com/solana-labs/wallet-adapter/tree/master/packages/wallets/walletconnect
Additionnally is the code safe to use ? Why it is not published?
Thanks

I guess a lot of websites were broken:

Problem-
Currently, there seems to be no way to connect Solana wallet in flutter cross-platform apps.

Solution-
A flutter pub package to integrate solana wallet in flutter web,android,ios apps.

I tried Dart JS interop, but had no luck in integrating it.

Hi, is there any way to run the wallet-adapter in windows?

It's not working for me :(

Describe the bug
The popup occurs twice on a single attempt to connect

To Reproduce
Steps to reproduce the behavior:

1. Go to https://solana-labs.github.io/wallet-adapter/example/
2. Enable AutoConnect
3. Ensure phantom extension is installed
4. Click on Dialog/Modal Button's "Select wallet" button
5. Select phantom option in dialog
6. Phantom popup show appear, close it
7. (Unexpected behaviour) Another Phantom popup appears

Expected behavior
Expected step 7 to not occur

Screenshots
https://user-images.githubusercontent.com/85321734/134789994-90d02862-cae8-4bbc-8e09-d9a5515142fd.mov

Desktop (please complete the following information):

• OS: macOS big sur version 11.5
• Browser: Brave
• Version: Version 1.29.80 Chromium: 93.0.4577.63 (Official Build) (x86_64)

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

lerna version doesn't correctly update peer dependencies before pushing git tags. This breaks tags and forces us to manually update versions before releases. Since Lerna appears to be unmaintained, I'm not expecting this to be fixed, so I think we need to move away from using it.

Hi,

I recently created a react application that showcases the usage of wallet-adapter and solana/web3 for viewing transactions and making transactions from your wallet. I'm wondering if I can bring this project somewhere under this repository(e.g. packages/example/transaction-tool) so that it helps devs to develop front-end tools. What do you think?

Here's the link to my project
https://github.com/tomoima525/solana-transaction-tool

I'm happy to create a PR if that idea sounds good to wallet-adapter project owner :)

Describe the bug
When using useWallet, it appears the wallet object returned never has the correct adapter associated with.

To Reproduce
Steps to reproduce the behavior:

const { connected, wallet, adapter } = useWallet()

console.log('Wallet connected', connected)
console.log('Wallet', wallet?.adapter()?.publicKey)
console.log('Adapter', adapter?.publicKey)

If you connect a wallet with autoConnect: true in the WalletProvider, you will see that console.log('Adapter', adapter?.publicKey) will correctly log the public key at some point but console.log('Wallet', wallet?.adapter()?.publicKey) will never show the correct one.

Expected behavior
There is a mismatch between the wallet.adapter and the direct adapter. This caused a confusion when I use it because I thought wallet.adapter would work.

This is probably related to the fact the setState properly adjust the adapter state but the wallet should be updated at the same time.

It could be seen as a documentation problem also.

Overview

I'm trying to replicate the react library in Angular, I'm getting to a point where things start to make sense. I was wondering if this is something you'd like to include in the library set.

I think the pain point of doing this would be the UI part, from the top of my head I can think of two alternatives:

• Make UI libs framework agnostic (hard to code IMO)
• Create different sets of UI libs per framework (easier to code, harder to maintain)

Given the React-ish approach of everything Solana-related, I'm thinking of doing this on my own in a different monorepo. Not having Angular-support held me back for a while, would love to make it easy for other Angular fellas like me.

I'm trying to use this in a react project created with create-react-app and I'm getting this error

./node_modules/@solana/wallet-adapter-base/lib/errors.js 2:7
Module parse failed: Unexpected token (2:7)
File was processed with these loaders:
 * ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| export class WalletError extends Error {
>   error;
|
|   constructor(message, error) {

Is there a specific babel plugin that I need to parse the syntax?

I've been working on the SvelteKit implementation for the wallet adapter. Since Vue is very similar to Svelte, I could extrapolate a lot of the code done in #107 by @lorisleiva. I think the adapter is working but I am very newbie with Solana and every time I tried to test a smart contract, this fails. Even I am having issues testing Phantom on localhost.

I am wondering two things:

1. If it is possible to open a PR with a code that basically is an extrapolation of #107
2. If it is possible to get some support for the community to test this.

Looking forward to hear from the team.

Describe the bug
Currently clicking on the select wallet modal button returns setVisible is not a function in a nextjs app.

To Reproduce
Steps to reproduce the behavior:

1. Download the repo at https://github.com/solana-labs/wallet-adapter/tree/master/packages/starter/nextjs-starter
2. Add these two lines to index.tsx

import { useWallet } from "@solana/wallet-adapter-react";
import { WalletMultiButton } from "@solana/wallet-adapter-react-ui";

3. Add a simple modal button to the page:

const wallet = useWallet();
  if (!wallet.connected) {
    /* If the user's wallet is not connected, display connect wallet button. */
    return (
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          marginTop: "100px",
        }}
      >
        <WalletMultiButton />
      </div>
    );
  }

4. Click it

Expected behavior
Should allow me to select a wallet of my choice

Screenshots

Is your feature request related to a problem? Please describe.
Ledger Wallet adapter doesn't allow you to select wallet address / derivation path. When you connect your ledger it auto selects the first address, which might not be the one the users want to use or where they have their funds.

Describe the solution you'd like
When selecting the ledger wallet, open a dropdown menu (see how phantom wallet does it in the image) to let the user choose its address.

Describe alternatives you've considered
Users usually need to link their ledger to phantom or other wallet that allows them to select their address, instead of using ledger itself in the dapp. This is not ideal.

Additional context

I want to integrate my Gatsby project with solana wallet adapter. I've already installed solana related packages according to the documentation.

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

But when I start the project, the following error raised

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
- install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "crypto": false }

You can see detail about error in the following picture

Describe the bug
Trying to start the https://github.com/solana-labs/wallet-adapter/tree/master/packages/starter/example project fails.

To Reproduce
Steps to reproduce the behavior:

cd packages/starter/example
yarn
yarn start

And I get:

Failed to compile.

./src/Demo.tsx
Module not found: Can't resolve '@solana/wallet-adapter-base' in '/Users/oboxodo/repos/study/wallet-adapter/packages/starter/example/src'

Expected behavior
The example app works.

Screenshots

Desktop (please complete the following information):

• OS: OS X
• Browser Chrome
• Version 93

This issue qualifies more as a question.
The sub-package states in its readme that it is coming soon but since many other things say coming soon I don't know if Coin98 wallet provider implementation is done.

I have cloned the example app and added getCoin98Wallet() to the list of wallets to initialize and it indeed appears on the list but clicking in the Coin98 wallet option it takes me to their website even when I already installed the extension and I am connected. The wallet provider seems to not detect the extension.

If someone knows the status of Coin98 it would be great to know to make it available in my dApp.
Sorry if this doesn't have issue format, it is more a question.

I connected to phantom wallet.

And then I try to get wallet by below code

const wallet = useWallet();

but wallet.publicKey is null.

I am not sure if this is a bug or I use this in a wrong way.

Overview

As an end-user, if you connect to Sollet web and close the window, you're not capable of connecting again to Sollet web by selecting it again.

Reproduction steps

• Go to /packages/example
• Run yarn start
• Select Sollet web with any of the UI options
• Connect to the wallet
• Close the window
• Select Sollet web again

Expected behavior

As a user I would expect to be able to select Sollet web again and get prompted again. Even after closing the window.

Behavior found

The only way to get prompted again after closing the window is to select another wallet and then select Sollet web again.

Proposed solution

While working on #42 I noticed that if you close the window, an adapter disconnect event is fired leading to a "reset" of the state using initialState. When this happens, the state gets set to its initial value but the "selected wallet name" remains unchanged. I'm not sure if this is happening for the React package as well, but maybe all it takes is to call setName(null) on adapter disconnect.

Describe the bug
Today suddenly WalletDialogButton starts to give setOpen is not a function error on react.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'material-ui/src/'
2. Click on 'WalletDialogButton.tsx'
3. Scroll down to 'line 17'
4. See error { setOpen } = useWallet(); gives setOpen is not a function error in

Screenshots

Next.js throws errors when libraries try to import global styling. See the following issue:

vercel/next.js#19936

Looks like there might be a patch on the way in Next but is there any way we can pull this out and have users manually add css file? Open to other suggestions

Hello,

So, in code while doing this import, it should only import these three wallets. But yarn analysing final build is showing blocto wallet, torus wallet and all others and increasing the app size a lot. Is there any way to reduct the final build size of apps using this wallet adapter?

import {
  getPhantomWallet,
  getSolflareWallet,
  getSolletWallet,
} from "@solana/wallet-adapter-wallets";

Similar issue to #52

Tho looking at the package inside node_modules it seems like the entry point mentioned in package.json as
"main": "lib/index.js", is missing inside wallet-adapter-react

version : 0.9.0

Reproduce:

1. connect using Sollet adapter
2. close the Sollet child window

Expected:

• disconnect callback is invoked

Actual:

• disconnect callback is not invoked

Serum Sollet adapter is handling this using window beforeunload event

Describe the bug

According to the docs I should be able to change the button text by using

<WalletMultiButton> 
Connect 
</WalletMultiButton>

To Reproduce
Steps to reproduce the behavior:

Use

<WalletMultiButton> 
Connect 
</WalletMultiButton>

to change the text of the buttons

Expected behavior
The button text should change

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

I am trying to sign a message and it worked once I am not sure why but most of the time it return error saying sendMessage is not a function

I have an issue when following the example, the button is created and showing phatomRPCJSON with the pubkey when its connected, but I can't use the button in Usage example and it's throwing not connected error, did I missed anything?

So, I am new and trying to get this right. I followed the steps on building from source. So I cloned the repo, yarn install and on running the react-ui-starter I get the error

Failed to compile.

./src/Wallet.tsx
Module not found: Can't resolve '@solana/wallet-adapter-base' in '/Users/abcxyz/workspace/crypto_projects/wallet-adapter/packages/react-ui-starter/src'

Any directions are highly appreciated. Thanks

When using the latest version of NextJS (with TS), I am unable to use the @solana/wallet-adapter packages.

***/node_modules/@solana/wallet-adapter-react/lib/index.js:1
export * from './ConnectionProvider';
^^^^^^

SyntaxError: Unexpected token 'export'

I'm quite positive it has to do with how the packages are transpiled, and wouldve hoped adding them to the list of transpiled code in my nextjs project (using next-transpile-modules) would work, but unfortunately I was not able to get them working (edit: see update bellow). Any tips? If I get it working I'd be happy to submit a PR for either a readme update or change.

tsconfig:

{
  "compilerOptions": {
    "target": "es6",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": false,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

nextjs config:

module.exports = {
  webpack5: true
}

Update:

I was finally able to get it working taking quite a detour, I've had to change my nextjs config to the following:

/* eslint-disable @typescript-eslint/no-var-requires */
const withTM = require('next-transpile-modules')([
  '@solana/wallet-adapter-base',
  '@solana/wallet-adapter-bitpie',
  '@solana/wallet-adapter-coin98',
  '@solana/wallet-adapter-ledger',
  '@solana/wallet-adapter-mathwallet',
  '@solana/wallet-adapter-phantom',
  '@solana/wallet-adapter-react',
  '@solana/wallet-adapter-solflare',
  '@solana/wallet-adapter-sollet',
  '@solana/wallet-adapter-solong',
  '@solana/wallet-adapter-torus',
  '@solana/wallet-adapter-wallets',
  '@project-serum/sol-wallet-adapter',
])

module.exports = withTM({
  webpack5: true
})

That allowed me to use the dependencies, but then the next error popped up:

window is not defined

which means of the packages has a dependency on window (not possible on the server) so I had to dynamically load the wallet provider like so:

ClientWalletProvider.tsx:

import type { WalletProviderProps } from '@solana/wallet-adapter-react'
import { WalletProvider } from '@solana/wallet-adapter-react'
import {
  getLedgerWallet,
  getMathWallet,
  getPhantomWallet,
  getSolflareWallet,
  getSolletWallet,
  getSolongWallet,
} from '@solana/wallet-adapter-wallets'
import type { ReactNode } from 'react'
import { useMemo } from 'react'

export function ClientWalletProvider(
  props: Omit<WalletProviderProps, 'wallets'> & { children: ReactNode }
): JSX.Element {
  const wallets = useMemo(
    () => [
      getPhantomWallet(),
      getSolflareWallet(),
      getLedgerWallet(),
      getSolongWallet(),
      getMathWallet(),
      getSolletWallet(),
    ],
    []
  )

  return <WalletProvider wallets={wallets} {...props} />
}

and in my _App.tsx:

import type { AppProps } from 'next/app'
import dynamic from 'next/dynamic'

const WalletProvider = dynamic(() => import('../ClientWalletProvider'), {
  ssr: false,
})

export default function App({ Component, pageProps }: AppProps): JSX.Element {
  return (
    <WalletProvider autoConnect>
      <Component {...pageProps} />
    </WalletProvider>
  )
}

This works for now, but it is quite the detour. Any other ideas?

I want you to build 2 buttons on my website, first button will be "Connect Wallet" to connect Phantom wallet or sollet.io wallet to the website, after connection, a button will appear at bottom of the page named "Send transaction" that will send 0.05 sol to our address after user's confirmation. but there is an issue with the code I found on your account it's not working.
please reply to me ASAP. I am looking forward to your positive response. Thankx

Describe the bug
A clear and concise description of what the bug is.
With the commit held in 6 hours ago WalletDialogButton.tsx break down.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'wallet-material-ui/src/walletdialogbutton.tsx'
2. Click on 'line 17'
3. See error setOpen is not a function

Expected behavior
A clear and concise description of what you expected to happen.
Hence useState function took one param at the leftend side react consider it as a var not a as a function.

Screenshots
If applicable, add screenshots to help explain your problem.

So I tried making this work with vitejs instead of the normal create-react-app but it seems to not work.

Fails with a Buffer not defined. Probably something to do with the vite config as it works well with the create-react-app.
Any pointers on how to go around debugging it?

because Buffer is a dependency listed in @solaan/web3.js. Is there handling these dependencies.

I have matched all the versions as given in this package and that doesnt seem to fix it.

API consumers shouldn't have access to this knowledge, this should be strictly on the wallet side.

Why? Today I was investigation a couple of phishing websites, and both of them check if the user has auto approved or not.
Both were acting differently, but both were abusing this information.

I successfully connect to the wallet:

Code is below, but publicKey is not getting updated after I am connected so useEffects is not triggered aka I am not getting anything from useWallet:

import {
  WalletError,
} from "@solana/wallet-adapter-base";
import {
  ConnectionProvider,
  useLocalStorage,
  useWallet,
  WalletProvider,
} from "@solana/wallet-adapter-react";
import {
  getBloctoWallet,
  getLedgerWallet,
  getPhantomWallet,
  getSlopeWallet,
  getSolflareWallet,
  getSolletExtensionWallet,
  getSolletWallet,
} from "@solana/wallet-adapter-wallets";
import { useSnackbar } from "notistack";
import { useCallback, useEffect, useMemo } from "react";
import { useRecoilState, useRecoilValue } from "recoil";
import {
  atomClusterApiUrl,
  atomIsWalletConnected,
  atomNetwork,
} from "../../recoil/atoms";

function WalletSolana() {
  const network = useRecoilValue(atomNetwork);
  const clusterUrl = useRecoilValue(atomClusterApiUrl);

  const { publicKey, connected } = useWallet();

  const [isWalletConnected, setWalletConnected] = useRecoilState(
    atomIsWalletConnected
  );

  const [autoConnect, setAutoConnect] = useLocalStorage("autoConnect", false);

  const wallets = useMemo(
    () => [
      getPhantomWallet(),
      getSolflareWallet(),
      getSlopeWallet(),
      getLedgerWallet(),
      getBloctoWallet(),
      getSolletWallet(),
      getSolletExtensionWallet(),
    ],
    [network]
  );

  const { enqueueSnackbar } = useSnackbar();

  const onError = useCallback(
    (error: WalletError) => {
      enqueueSnackbar(
        error.message ? `${error.name}: ${error.message}` : error.name,
        { variant: "error" }
      );
      console.error(error);
    },
    [enqueueSnackbar]
  );

  useEffect(() => {
    if (publicKey) {
      console.log("got public key " + publicKey);
    }
  }, [publicKey]);

  return (
    <div>
      <ConnectionProvider endpoint={clusterUrl}>
        <WalletProvider
          wallets={wallets}
          onError={onError}
          autoConnect={autoConnect}
        >
          <ReactUIWalletModalProvider>
            <ReactUIWalletMultiButton />
          </ReactUIWalletModalProvider>
        </WalletProvider>
      </ConnectionProvider>
    </div>
  );
}

export default WalletSolana;

If I set custom RPC and WSS in connection provider, shouldn't that reflect over all wallets?
Result when I try to use sollet:

Code where I set my own custom rpc in ConnectionProvider:

function EntryPoint() {
  let walletAdapterNetwork: WalletAdapterNetwork = WalletAdapterNetwork.Mainnet;
  const network = useRecoilValue(atomNetwork);
  const clusterUrl = useRecoilValue(atomClusterApiUrl);
  const clusterWssUrl = useRecoilValue(atomClusterWssApiUrl);

  if (network === NetworkEnum.devnet) {
    walletAdapterNetwork = WalletAdapterNetwork.Devnet;
  } else if (network === NetworkEnum.testnet) {
    walletAdapterNetwork = WalletAdapterNetwork.Testnet;
  }

  const wallets = useMemo(
    () => [
      getBitpieWallet(),
      getBloctoWallet({ network: walletAdapterNetwork }),
      getCoin98Wallet(),
      getLedgerWallet(),
      getMathWallet(),
      getPhantomWallet(),
      getSafePalWallet(),
      getSlopeWallet(),
      getSolletWallet({ network: walletAdapterNetwork }),
      getSolletExtensionWallet({ network: walletAdapterNetwork }),
      getSolflareWallet(),
      getSolflareWebWallet(),
      getSolongWallet(),
      getTorusWallet({
        options: {
          clientId:
            "xxx",
        },
      }),
    ],
    [walletAdapterNetwork]
  );

  const config: ConnectionConfig = {
    commitment: SolanaCommitmentEnum.processed,
    wsEndpoint: clusterWssUrl,
  };

  const { enqueueSnackbar } = useSnackbar();

  const onError = useCallback(
    (error: WalletError) => {
      enqueueSnackbar(
        error.message ? `${error.name}: ${error.message}` : error.name,
        { variant: "error" }
      );
      console.error(error);
    },
    [enqueueSnackbar]
  );

  return (
    <div>
      <ConnectionProvider endpoint={clusterUrl} config={config}>
        <WalletProvider wallets={wallets} onError={onError} autoConnect={false}>
          <Game />
          <Logo />
          <WalletConnect />
          <WalletInfo />
          <ReactUIWalletModalProvider>
            <div>
              <ReactUIWalletMultiButton />
            </div>
          </ReactUIWalletModalProvider>
        </WalletProvider>
      </ConnectionProvider>
    </div>
  );
}

export default EntryPoint;

When using the react ui starter or material ui starter - both use create react app, get an error

./src/Wallet.tsx Module not found: Can't resolve '@solana/wallet-adapter-base' in '/Users/aditig/Documents/git/jelly-beasts-nft/wallet-adapter/packages/react-ui-starter/src'

Hi ,

When i'm trying to use the code on githhub, the connection with wallets works , but the button to send 1 lamport is always disable because the publicKey is empty. When i'm trying to console.log(publicKey) it returns undefined. Why ?

`import React, { FC, useMemo, useCallback } from 'react';
import { ConnectionProvider, WalletProvider,useConnection, useWallet } from '@solana/wallet-adapter-react';
import { WalletAdapterNetwork,WalletNotConnectedError } from '@solana/wallet-adapter-base';
import {
getLedgerWallet,
getPhantomWallet,
getSlopeWallet,
getSolflareWallet,
getSolletExtensionWallet,
getSolletWallet,
} from '@solana/wallet-adapter-wallets';
import {
WalletModalProvider,
WalletDisconnectButton,
WalletMultiButton
} from '@solana/wallet-adapter-react-ui';
import { clusterApiUrl,Keypair, SystemProgram, Transaction } from '@solana/web3.js';

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

export const App: FC = () => {
// 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 --
// Only the wallets you configure here will be compiled into your application
const wallets = useMemo(() => [
    getPhantomWallet(),
    getSlopeWallet(),
    getSolflareWallet(),
    getLedgerWallet(),
    getSolletWallet({ network }),
    getSolletExtensionWallet({ network }),
], [network]);

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 (
   <div>
      <ConnectionProvider endpoint={endpoint}>
          <WalletProvider wallets={wallets} autoConnect>
              <WalletModalProvider>
                  <WalletMultiButton />
                  <WalletDisconnectButton />
              </WalletModalProvider>
          </WalletProvider>
      </ConnectionProvider>
      <button onClick={onClick} disabled={!publicKey}>
      Send 1 lamport to a random address!
      </button>
    </div>
);

};`

Error of Property 'connected' does not exist on type 'WalletContextState'. shows up when running the latest @solana/[email protected] for dapp-scafold project.

Overview

@solana/wallet-adapter-sollet throws WalletWindowClosedError right after calling connect method, the popup opens but the error shows in the console and the "connect" event is never fired. I made a repro repo.

I'm trying to figure out if it's related to @project-serum/sol-wallet-adapter