솔라나 web3 정리

const tx = new Transaction().add(buyScoinIx);

const siganture = await connection.sendTransaction(tx, [payer], {
  skipPreflight: false,
  preflightCommitment: "confirmed",
});

이런식으로 했었는데, solana-wallet-adapter 를 쓰면 좀 달라질 듯

원래는 phantom을 이용한다면, 위의 코드에서 payer가 빠지고 sendRawTransaction을 이용해야한다.

const signedTransaction = await window.solana.signTransaction(tx);
const signature = await connection.sendRawTransaction(signedTransaction.serialize());

이 부분을 빼면 달라질 건 크게 없다.

하지만, solana-wallet-adapter을 이용하면, 그냥 하던 그대로 써도 된다.
대신 인자로 [payer]를 빼고, transaction과 connection을 넣어주면 됨

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

setPending(true)
const tx = ...
const signature = await sendTransaction(tx, connection);
// 트랜잭션 완료까지 기다리기
await connection.confirmTransaction(signature, 'processed');
setPending(false)

useWallet()으로 가져온 sendTransaction에 위의 과정이 포함되어 있는 듯

---

solana-wallet-adapter 사용 방법

// App.js
// 하위 컴포넌트에게 Provider 제공하는 로직
import {
    ConnectionProvider,
    WalletProvider,
} from "@solana/wallet-adapter-react";

function App() {
    const network = WalletAdapterNetwork.Devnet;
    const endpoint = useMemo(() => clusterApiUrl(network), [network]);

    const wallets = useMemo(
        () => [
            getPhantomWallet(),
            getSlopeWallet(),
            getSolflareWallet(),
            getTorusWallet({
                options: {
                    clientId: "Get a client ID @ https://developer.tor.us",
                },
            }),
            getLedgerWallet(),
            getSolletWallet({ network }),
            getSolletExtensionWallet({ network }),
        ],
        [network]
    );
    return (
        <ConnectionProvider endpoint={endpoint}>
            <WalletProvider wallets={wallets} autoConnect>
                <WalletConnect/>
            </WalletProvider>
        </ConnectionProvider>
    );
}

// WalletConnect.js
// 지갑 버튼을 구현하는 곳
import {
    WalletModalProvider,
    WalletMultiButton,
} from "@solana/wallet-adapter-react-ui";

require("@solana/wallet-adapter-react-ui/styles.css");

export default function WalletConnect() {
    return (
        <WalletModalProvider>
            <WalletMultiButton />
        </WalletModalProvider>
    );
}