[SOLANA] Web3 연동

//app.js
import React from 'react';
import ReactDOM from 'react-dom';
import Wallet from './wallet';

ReactDOM.render(
  <React.StrictMode>
    <Wallet />
  </React.StrictMode>,
  document.getElementById('app')
);

app.js이지만 index.js로 봐도 된다.

import React, { useMemo } from 'react';
import {
    ConnectionProvider,
    WalletProvider,
    useConnection,
    useWallet
} from '@solana/wallet-adapter-react';
import { WalletAdapterNetwork } from '@solana/wallet-adapter-base';
import {
  // LedgerWalletAdapter,
  PhantomWalletAdapter,
  SlopeWalletAdapter,
  SolflareWalletAdapter,
  SolletExtensionWalletAdapter,
  SolletWalletAdapter,
  TorusWalletAdapter,
} from '@solana/wallet-adapter-wallets';
import {
    WalletModalProvider,
    WalletMultiButton
} from '@solana/wallet-adapter-react-ui';
import { clusterApiUrl } from '@solana/web3.js';

export default function Wallet() {
    // 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
() => [
          new PhantomWalletAdapter(),
          new SlopeWalletAdapter(),
          new SolflareWalletAdapter(),
          new TorusWalletAdapter(),
          // new LedgerWalletAdapter(), // <- 쓰지말것 오류남
          new SolletWalletAdapter({ network }),
          new SolletExtensionWalletAdapter({ network }),
        ],
        [network]

const { connection } = useConnection();
const wallet = useWallet();
console.log(connection, wallet)
return (
    <ConnectionProvider endpoint={endpoint}>
        <WalletProvider wallets={wallets} autoConnect>
            <WalletModalProvider>
                <WalletMultiButton />
            </WalletModalProvider>
        </WalletProvider>
    </ConnectionProvider>
);
};

작동 되는 것을 확인하였다.

 

코드 참고.

하단의 게시자가 동일인인가 했는데, 아닌 것 같더라. 그냥 참고만 한 듯...

velog의 경우 lib import를 빼먹거나 이상한 것을 호출해서 코드가 작동이 안됨.

 

그래도 한글 설명이라 보면 참고가 될 듯.

1. 솔라나 docs

https://github.com/solana-labs/wallet-adapter

GitHub - solana-labs/wallet-adapter: Modular TypeScript wallet adapters and components for Solana applications.

2. 핵심 코드

https://github.com/solana-labs/wallet-adapter/issues/157

How to use `useWallet()` hook? · Issue #157 · solana-labs/wallet-adapter

 

3. 그냥 참고용 코드

https://velog.io/@leedc0101/%EC%86%94%EB%9D%BC%EB%82%98-web3-%EC%A0%95%EB%A6%AC

솔라나 web3 정리

이상 끝.

 

막 작동이 안된다?

여러가지 원인인데,

1. 노드버전이 너무 구형.

2. stream 모듈의 버그

npm i stream 또는 아래방법 사용

https://github.com/crypto-browserify/cipher-base/issues/10

patch-package helped me: npm i patch-package

in the package.json add this line:

"scripts": {
  "postinstall": "patch-package",
}
opend the problem file and correct it. In my case: node_modules/cipher-base/index.js

var Buffer = require('safe-buffer').Buffer
var Transform = require('readable-stream').Transform // replacing instead of "stream"
var StringDecoder = require('string_decoder').StringDecoder
var inherits = require('inherits')

function CipherBase (hashMode) {
...
run the command from a root dir of your probject: npx patch-package cipher-base

it'll create a new folder patches in the root dir and add there this fix. That's all. Commit changes. It'll automaticaly replace code in the node_modules after reinstalling packages

3. assert 모듈의 버그

npm i assert

4. ts가 없어서 그러할수도? 근데, 이건 없어도 되더라.

 npm i typescript @types/node @types/react @types/react-dom @types/jest