Metaplex Solana NextJs Tailwind テンプレート

git clone https://github.com/metaplex-foundation/metaplex-nextjs-tailwind-template.git

git clone https://github.com/metaplex-foundation/metaplex-nextjs-tailwind-shadcn-template.git

const useUmiStore = create<UmiState>()((set) => ({
  // ここに独自のRPCを追加してください
  umi: createUmi("https://api.devnet.solana.com").use(
    signerIdentity(
      createNoopSigner(publicKey('11111111111111111111111111111111'))
    )
  ),
  ...
}))

// umiProvider.txtスニペット
useEffect(() => {
  if (!wallet.publicKey) return
  // wallet.publicKeyが変更されると、新しいウォレットアダプターでumiStoreの署名者を更新します
  umiStore.updateSigner(wallet as unknown as WalletAdapter)
}, [wallet, umiStore])

// フックを使用してumiStoreからumiステートを引き出します
const umi = useUmiStore().umi
const signer = useUmiStore().signer

umi.use(signerIdentity(signer))

// umiStoreからumiステートを引き出します
const umi = useUmiStore.getState().umi
const signer = useUmiStore.getState().signer

umi.use(signerIdentity(signer))

import useUmiStore from '@/store/useUmiStore'
import { setComputeUnitPrice } from '@metaplex-foundation/mpl-toolbox'
import { TransactionBuilder, signerIdentity } from '@metaplex-foundation/umi'
import { base58 } from '@metaplex-foundation/umi/serializers'


const sendAndConfirmWalletAdapter = async (
  tx: TransactionBuilder,
  settings?: {
    commitment?: 'processed' | 'confirmed' | 'finalized'
    skipPreflight?: boolean
      }
) => {
  const umi = useUmiStore.getState().umi
  const currentSigner = useUmiStore.getState().signer
  console.log('currentSigner', currentSigner)
  umi.use(signerIdentity(currentSigner!))

  const blockhash = await umi.rpc.getLatestBlockhash({
    commitment: settings?.commitment || 'confirmed',
  })

  const transactions = tx
    // トランザクションの優先手数料を設定します。不要な場合は削除できます。
    .add(setComputeUnitPrice(umi, { microLamports: BigInt(100000) }))
    .setBlockhash(blockhash)

  const signedTx = await transactions.buildAndSign(umi)

  const signature = await umi.rpc
    .sendTransaction(signedTx, {
      preflightCommitment: settings?.commitment || 'confirmed',
      commitment: settings?.commitment || 'confirmed',
      skipPreflight: settings?.skipPreflight || false,
    })
    .catch((err) => {
      throw new Error(`Transaction failed: ${err}`)
    })

  const confirmation = await umi.rpc.confirmTransaction(signature, {
    strategy: { type: 'blockhash', ...blockhash },
    commitment: settings?.commitment || 'confirmed',
  })
  return {
    signature: base58.deserialize(signature),
    confirmation,
  }
}

export default sendAndConfirmWalletAdapter

import useUmiStore from '@/store/useUmiStore'
import { signerIdentity } from '@metaplex-foundation/umi'

const umiWithCurrentWalletAdapter = () => {
  // ZustandがUmiインスタンスを保存するために使用されるため、Umiインスタンスは
  // フックと非フック形式の両方でストアからアクセスできます。これは、React
  // コンポーネントファイルではなくtsファイルで使用できる非フック形式の例です。

  const umi = useUmiStore.getState().umi
  const currentWallet = useUmiStore.getState().signer
  if (!currentWallet) throw new Error('ウォレットが選択されていません')
  return umi.use(signerIdentity(currentWallet))
}
export default umiWithCurrentWalletAdapter

import useUmiStore from '@/store/useUmiStore'
import { Signer, signerIdentity } from '@metaplex-foundation/umi'

const umiWithSigner = (signer: Signer) => {
  const umi = useUmiStore.getState().umi
  if (!signer) throw new Error('署名者が選択されていません')
  return umi.use(signerIdentity(signer))
}

export default umiWithSigner

// ReactコンポーネントではないtsファイルでuseUmiStoreから
// umiを引き出して、あるアカウントから別のアカウントにSOLを転送する関数の例

import { transferSol } from '@metaplex-foundation/mpl-toolbox'
import umiWithCurrentWalletAdapter from './umi/umiWithCurrentWalletAdapter'
import { publicKey, sol } from '@metaplex-foundation/umi'
import sendAndConfirmWalletAdapter from './umi/sendAndConfirmWithWalletAdapter'

// この関数は現在のウォレットから宛先アカウントにSOLを転送し、
// zustandグローバルストア設定のため、プロジェクト内の任意のtsx/tsまたは
// コンポーネントファイルから呼び出し可能です

const transferSolToDestination = async ({
  destination,
  amount,
}: {
  destination: string
  amount: number
}) => {
  // `umiWithCurrentWalletAdapter`からUmiをインポート
  const umi = umiWithCurrentWalletAdapter()

  // mpl-toolboxの`transferSol`関数を使用してtransactionBuilderを作成
  // Umiはデフォルトで現在の署名者（walletAdapter）を使用して`from`アカウントも設定します
  const tx = transferSol(umi, {
    destination: publicKey(destination),
    amount: sol(amount),
  })

  // sendAndConfirmWalletAdapterメソッドを使用してトランザクションを送信
  // `sendAndConfirmWalletAdapter`関数内でumiStoreから新しいインスタンスが取得されるため、
  // umiスタンスまたはウォレットアダプターを引数として渡す必要はありません
  const res = await sendAndConfirmWalletAdapter(tx)
}

export default transferSolToDestination