3

I create a new React JS (npx create-react-app) I install the dependencies to connect a Wallet to my application:

    "@project-serum/anchor": "^0.17.0",
    "@solana/spl-token": "^0.1.8",
    "@solana/wallet-adapter-base": "^0.7.0",
    "@solana/wallet-adapter-material-ui": "^0.13.1",
    "@solana/wallet-adapter-react": "^0.13.1",
    "@solana/wallet-adapter-react-ui": "^0.6.1",
    "@solana/wallet-adapter-wallets": "^0.11.3",
    "@solana/web3.js": "^1.33.0",

But I get errors when I import:

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

Error:

./node_modules/@ledgerhq/hw-transport-webhid/lib-es/TransportWebHID.js
Module not found: Can't resolve '@ledgerhq/devices/hid-framing' in 'C:\Users\Administrator\Documents\GitHub\saude-vapor-2-0\saudevapor\node_modules\@ledgerhq\hw-transport- webhid\lib-es'

Does anyone have any idea how to use "@solana/wallet-adapter-..." in ReactJS applications?

I use this doc: https://docs.metaplex.com/guides/candy-machine-ui

Improve this question
0

2 Answers 2

Reset to default
2

This is a webpack issue. You are using the old versions of the packages which aren't compatible with Ledger. Use this directory as a starter for your React app: https://github.com/solana-labs/wallet-adapter/tree/master/packages/starter/create-react-app-starter

Improve this answer
2
  • One thing, do you know if exists this starter in pure js? Im still learning typescript, and all my aplication is in js already.
    – Bruno Raphael Rocha
    Commented Sep 3, 2022 at 16:30
  • 1
    You can easily convert the starter to JS in three four steps. Do the following: 1. rename index.tsx and App.tsx to index.js and App.js 2. remove reportWebVitals import statement and declaration from index.js 3. change the Components style from TS to JS: (i) const App: FC = () => { becomes function App() { (ii) const Context: FC<{ children: ReactNode }> = ({ children }) => { becomes function Context() { (iii) const Content: FC = () => { becomes function Content() { This should do the job.
    – 0xShuk
    Commented Sep 3, 2022 at 16:51
1

You can also use this simple & easy-to-follow guide to follow the latest steps for integrating the wallet adapter in your dapp.

https://www.solanawalletadapter.xyz/

Hope it helps.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.