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.tsx 스니펫
useEffect(() => {
  if (!wallet.publicKey) return
  // wallet.publicKey가 변경되면 umiStore의 서명자를 새로운 wallet adapter로 업데이트합니다.
  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 인스턴스나 wallet adapter를 인수로 전달할 필요가 없습니다.
  const res = await sendAndConfirmWalletAdapter(tx)
}

export default transferSolToDestination