diff --git a/projects/orakle-nft-marketplace-app-frontend/src/methods.ts b/projects/orakle-nft-marketplace-app-frontend/src/methods.ts index 14c0c8e..6362559 100644 --- a/projects/orakle-nft-marketplace-app-frontend/src/methods.ts +++ b/projects/orakle-nft-marketplace-app-frontend/src/methods.ts @@ -8,19 +8,12 @@ import { marketplaceListAppId } from './utils/marketplaceListAppId' === 먼저 읽고 진행해주세요!! === methods.ts 파일은 디지털 마켓플레이스 앱을 생성하고 호출하는 여러 메서드들을 정의하는 파일입니다. 이 파일에는 3개의 함수가 정의되어 있습니다. -1. create -2. buy -3. deleteApp +1. create: src/components/Sell.tsx에서 NFT 판매 리스팅을 할때 사용. +2. buy: src/components/Buy.tsx에서 NFT 구매를 할때 사용. +3. deleteApp: src/components/Withdraw.tsx에서 수익금을 인출 및 스마트계약 삭제할때 사용. -Home.tsx 파일을 보면 상황에 따라 각 메서드들을 MethodCall.tsx 컴포넌트에 전달해 호출하고 있습니다. -또한 Home.tsx에서 여러분들이 만든 dmClient가 디지털 마켓플레이스의 앱 클라이언트고 이 파일에 있는 3개의 -함수들의 전달값으로 사용되고 있습니다. - -시작하기 전 Home.tsx 라인 16을 보시면 아래 코드가 있습니다. -- AlgokitConfig.configure({ populateAppCallResources: true }) - -이 코드 하나로 모든 앱 호출시 필요한 레퍼런스들을 자동으로 기입해주는 기능을 활성화 할 수 있습니다. -즉, 수동적으로 populateAppResources를 설정할 필요가 없습니다! (이거 직접 하게 만들려다가 참았어요 ^^) +기억하세요! +nftmClient로 nft marketplace 스마트계약을 배포 및 호출할때는 항상 await을 사용해야합니다. 이 파일에는 문제 6부터 9까지 총 4문제가 있습니다. 아래 설명들을 자세히 읽고 문제를 풀어주세요! */ @@ -36,48 +29,57 @@ export function create( ) { return async () => { console.log('creating app') - console.log('nftmClient', nftmClient) /* 문제 6 - 문제1에서 생성한 dmClient를 사용하여 앱을 배포하세요. + 문제5에서 생성한 nftmClient를 사용하여 앱을 배포하세요. + + 사용해야할 인수: + - nftmClient: 문제 5에서 정의한 nft marketplace app client - 이때 `deploy`가 아닌 `create` 메서드를 사용해서 배포하세요. + 스마트계약 배포시 `deploy`가 아닌 `create` 메서드를 사용해서 배포하세요. `deploy`는 스마트계약이 이미 배포 되있는지 확인하고 배포 되어 있다면 다시 배포하지 않습니다. 과제를 풀때 항상 새로 배포하는게 편하기 때문에 스크립트가 실행될때마다 배포하는 `create` 메서드를 사용해주세요. - 또한 디지털 마켓플레이스에 create 메서드를 따로 구현하지 않았기 때문에 기본적으로 제공되늗 bare create 메서드를 사용합니다. + 또한 디지털 마켓플레이스에 create 메서드를 따로 구현하지 않았기 때문에 기본적으로 제공되늗 bare create 메서드를 사용하세요. 힌트: https://github.com/algorandfoundation/algokit-client-generator-ts/blob/main/docs/usage.md#create-calls */ - const createResult = await nftmClient.create.bare() + // 문제 6 시작 + const createResult = '여기에 코드 작성' + // 문제 6 끝 /* 문제 7 - 부트스트랩 메서드는 앱이 필요한 미니멈 밸런스를 지급하고 앱이 판매할 NFT 에셋에 옵트인하는 메서드입니다. 앱이 판매할 준비가 되도록 Bootstrap 메서드를 호출하세요. + bootstrap 메서드는 앱이 필요한 미니멈 밸런스를 지급하고 앱이 판매할 NFT 에셋에 옵트인하는 메서드입니다. + + 사용해야할 create함수의 인수: + - assetBeingSold: 판매할 NFT 에셋의 ID + - unitaryPrice: NFT 하나의 가격 + 부트스트랩 메서드는 호출 시 판매할 NFT에 옵트인하는 inner transaction이 있습니다. - 따라서 부트스트랩 메서드 호출자가 inner transaction의 트랜잭션 비용을 내야합니다. - 이 부분은 mbrTxn안에 extraFee를 통해서 설정을 해주면 됩니다. 이때 extraFee는 AlgoAmount 데이터타입을 받습니다!! + 따라서 부트스트랩 메서드 호출자가 inner transaction의 트랜잭션 비용을 대신 내야합니다. + 이 추가 비용은 mbrTxn안에 extraFee를 통해서 설정할 수 있습니다. 이때 extraFee는 AlgoAmount 데이터타입을 받습니다!! (그냥 숫자 넣으면 에러뜸) 알고랜드의 트랜잭션 비용은 0.001 Algos입니다. + 팁! + Nft Markeplace 코드를 보고 bootstrap 메서드가 어떤 인수를 받는지 확인하고 진행하세요. + 힌트1: AlgoAmount 설정하는 방법: https://github.com/algorandfoundation/algokit-utils-ts/blob/e9682db133fab42627648ac2f779cd91f3e6cd21/docs/capabilities/amount.md#creating-an-algoamount - 힌트2: 앱 클라이언트 메서드 호출때 메서드 전달값 넣는법: https://github.com/algorandfoundation/algokit-client-generator-ts/blob/main/docs/usage.md#abi-arguments + 힌트2: 앱 클라이언트로 특정 메서드 호출 방법: https://github.com/algorandfoundation/algokit-client-generator-ts/blob/main/docs/usage.md#no-ops */ + + // 문제 7 시작 const mbrTxn = await algorand.transactions.payment({ sender, receiver: createResult.appAddress, amount: algokit.algos(0.1 + 0.1), - extraFee: algokit.algos(0.001), + extraFee: '여기에 코드 작성', }) - // 문제 7 시작 - await nftmClient.bootstrap({ - asset: assetBeingSold, - unitaryPrice, - mbrPay: mbrTxn, - }) + ;('여기에 코드 작성') // 문제 7 끝 const sendAssetToSell = { @@ -112,15 +114,26 @@ export function buy( return async () => { /* 문제 8 - 밑에 `buyerTxn` 결제 트랜잭션를 buy 메서드의 전달값으로 넣어 어토믹 트랜잭션으로 동시에 호출하세요. + 구매자가 구매할 NFT에 optin하는 트랜잭션과 buy 메서드를 어토믹 그룹으로 묶어 동시다발적으로 실행하는 코드를 작성하세요. - buy 메서드는 호출 시 스마트 계약에 있는 NFT를 구매자 지갑으로 보내주는 inner transaction이 있습니다. - 따라서 buy 메서드 호출자가 inner transaction의 트랜잭션 비용을 내야합니다. - 이 부분은 buyerTxn안에 extraFee를 통해서 설정을 해주면 됩니다. 이때 extraFee는 AlgoAmount 데이터타입을 받습니다!! - 알고랜드의 트랜잭션 비용은 0.001 Algos입니다. + 알고랜드에서는 계정이 특정 ASA에 optin을 해야지만 그 ASA를 받고 보유할 수 있습니다. 따라서 이 파일의 buy 함수는 먼저 + 구매자가 구매할 NFT에 optin을 했는지 체크하고 했다면 바로 스마트계약의 buy 메서드를 호출하고, optin을 안했다면 + 먼저 optin을 하고 buy 메서드를 호출합니다. - 힌트1: AlgoAmount 설정하는 방법: https://github.com/algorandfoundation/algokit-utils-ts/blob/e9682db133fab42627648ac2f779cd91f3e6cd21/docs/capabilities/amount.md#creating-an-algoamount - 힌트2: 앱 클라이언트 메서드 호출때 메서드 전달값 넣는법: https://github.com/algorandfoundation/algokit-client-generator-ts/blob/main/docs/usage.md#abi-arguments + 여러분은 optin을 하고 buy 메서드를 어토믹으로 동시에 호출하는 코드를 작성하셔야 합니다. + + 사용해야할 인수: + - nftmClient: 문제 5에서 정의한 nft marketplace app client + - quantity: 구매할 NFT의 수량 + + 밑에 buyerTxn과 assetOptInTxn이라는 두개의 트래잭션 객체가 정의되어있습니다. 이 두 트랜잭션을 스마트계약의 buy 메서드와 어토믹 그룹으로 묶어서 실행하셔야합니다. + - buyerTxn: 구매자가 구매할 NFT에 대한 지불을 하는 트랜잭션입니다. + - assetOptInTxn: 구매자가 구매할 NFT에 optin을 하는 트랜잭션입니다. + + 여기서 buyerTxn은 buy 메서드의 인수로 들어가기 때문에 자동으로 어토믹 그룹에 포함됩니다. 따라서 assetOptInTxn만 어토믹 그룹에 추가해주시면 됩니다. + 어토믹그룹을 형성하고 execute하는것을 까먹지 마세요! + + 힌트1: app client로 어토믹 그룹을 형성, 트랜잭션 추가, 제출하는법: https://github.com/algorandfoundation/algokit-client-generator-ts/blob/main/docs/usage.md#using-the-fluent-composer */ const buyerTxn = await algorand.transactions.payment({ @@ -141,10 +154,10 @@ export function buy( assetId, }) // 문제 8 시작 - await nftmClient.compose().addTransaction(assetOptInTxn).buy({ buyerTxn: buyerTxn, quantity }).execute() + ;('여기에 코드 작성') // 문제 8 끝 - console.log(`${sender}가 에셋에 옵트인 완료했어요!`) + console.log(`${sender}가 에셋에 옵트인하고 구매했어요!`) return } @@ -162,10 +175,10 @@ export function deleteApp(nftmClient: NftMarketplaceClient, listClient: NftMarke /* 문제 9 - 앱을 삭제하고 수익금을 회수하는 withdrawAndDelete 메서드를 호출하세요. + 앱을 삭제하고 수익금과 잔여 NFT를 회수하는 withdrawAndDelete 메서드를 호출하세요. withdrawAndDelete 메서드는 OnComplete Actions가 DeleteApplication으로 설정된 특별한 메서드입니다. - 앱 클라이언트에는 delete라는 property가 있습니다. 이 delete property에 withdrawAndDelete 메서드가 있으니 이 메서드를 호출하시면 됩니다. + nftmClient에는 delete라는 property가 있습니다. 이 delete property에 withdrawAndDelete 메서드가 있으니 이 메서드를 호출하시면 됩니다. 앱 클라이언트로 withdrawAndDelete 같은 메서드를 호출할때 전달값을 두개 넣을 수 있습니다. 1. ABI Arguments: 스마트계약 메서드 호출시 전달값을 넣는 곳입니다. @@ -179,17 +192,17 @@ export function deleteApp(nftmClient: NftMarketplaceClient, listClient: NftMarke 1. 수익금 판매자에게 송금 2. 잔여 nft 송금 따라서 호출시 sendParams 안에 추가 fee 설정을 해야합니다. - - fee: sendParams 객체 안에 fee를 0.003 Algos로 설정해야합니다. + - fee: sendParams 객체 안에 fee를 algokit.algos(0.003)fh 설정해야합니다. 힌트1: 앱클라이언트로 앱을 delete 하는법 - https://github.com/algorandfoundation/algokit-client-generator-ts/blob/main/docs/usage.md#update-and-delete-calls 힌트2: 앱 클라이언트 메서드 호출때 메서드 전달값 넣는법: https://github.com/algorandfoundation/algokit-client-generator-ts/blob/main/docs/usage.md#abi-arguments 힌트3: additional parameters에 extra fee 설정하는 방법: https://github.com/algorandfoundation/algokit-client-generator-ts/blob/main/docs/usage.md#additional-parameters 힌트4: AlgoAmount 설정하는 방법: https://github.com/algorandfoundation/algokit-utils-ts/blob/e9682db133fab42627648ac2f779cd91f3e6cd21/docs/capabilities/amount.md#creating-an-algoamount - 힌트5: 다 시도해보고 모르겠을때 보세요!: https://github.com/algorand-devrel/blockchain-valley-session-2/blob/df789308e76a5a6cb3c815b256779fb197add8fd/projects/coding-assignment/smart_contracts/digital_marketplace/deploy-config.ts#L70C1-L74C4 + 힌트5: 다 시도해보고 모르겠을때 보세요!: https://github.com/algorand-devrel/blockchain-valley-session-2/blob/df789308e76a5a6cb3c815b256779fb197add8fd/projects/coding-assignment/smart_contracts/digital_marketplace/deploy-config.ts#L392 */ // 문제 9 시작 - await nftmClient.delete.withdrawAndDelete({}, { sendParams: { fee: algokit.algos(0.003) } }) + ;('여기에 코드 작성') // 문제 9 끝 await listClient.removeMarketplaceFromList({ appId: BigInt(appId) }) diff --git a/projects/orakle-nft-marketplace-app-frontend/src/utils/getCurrentNftmClient.ts b/projects/orakle-nft-marketplace-app-frontend/src/utils/getCurrentNftmClient.ts index 4b472b0..12aeec0 100644 --- a/projects/orakle-nft-marketplace-app-frontend/src/utils/getCurrentNftmClient.ts +++ b/projects/orakle-nft-marketplace-app-frontend/src/utils/getCurrentNftmClient.ts @@ -2,6 +2,18 @@ import { AlgorandClient } from '@algorandfoundation/algokit-utils' import { TransactionSigner } from 'algosdk' import { NftMarketplaceClient } from '../contracts/NftMarketplace' +/* +=== 먼저 읽고 진행해주세요!! === + +getCurrentNftmClient 함수는 NFT 마켓플레이스 앱 클라이언트 인스턴스를 생성하는 함수입니다. +이 클라이언트 인스턴스로 저희 풀스택 앱에서 NFT 마켓플레이스 앱을 배포하고 호출할 수 있습니다. + +이 클라이언트는 아래 3군데에서 사용되고 있습니다. +1. src/components/Sell.tsx에서 NFT 판매 리스팅을 할때 사용. src/methods.ts의 create 메서드에서 사용. +2. src/components/Buy.tsx에서 NFT 구매를 할때 사용. src/methods.ts의 buy 메서드에서 사용. +3. src/components/Withdraw.tsx에서 수익금을 인출 및 스마트계약 삭제할때 사용. src/methods.ts의 deleteApp 메서드에서 사용. +*/ + export function getCurrentNftmClient( algorandClient: AlgorandClient, currentAppId: bigint | number, @@ -10,39 +22,27 @@ export function getCurrentNftmClient( ): NftMarketplaceClient { /* 문제 5 - 디지털 마켓플레이스 앱 클라이언트 인스턴스를 생성하세요. + NFT 마켓플레이스 앱 클라이언트 인스턴스를 생성하세요. 앱 클라이언트는 쉽고 간편하게 스마트계약을 배포 및 호출할 수 있도록 해주는 클라이언트입니다. 앱 클라이언트 인스턴스를 만드는 방법은 두가지가 있습니다. 1. resolve by creator and name: 배포자와 앱 이름으로 앱 클라이언트를 찾아서 생성 2. resolve by id: 앱 ID로 앱 클라이언트를 찾아서 생성 - 둘 다 사용 가능하지만 각각 장단점이 있어요. - creator and name - - 장점: 앱 이름과 배포자만 알면 앱 아이디를 하드코드할 필요가 없고 개발 중 여러 네트워크에서 자동적으로 앱 아이디를 찾아주기 때문에 편리합니다. - - 단점: indexer가 필요하기 때문에 indexer API 설정을 해야합니다. - - id - - 장점: indexer가 필요없어서 가볍게 앱 클라이언트를 생성할 수 있습니다. - - 단점: 앱 아이디를 알아야하기 때문에 네트워크가 바뀔때 코드를 바꿔줘야할 수 있습니다. + 이 문제에서는 resolveBy: 'id'를 사용해주세요. 주목!!! - - 이 파일 맨 위에 이 코드를 복붙해 마켓플레이스 앱 클라이언트 class를 import하세요: import { DigitalMarketplaceClient } from './contracts/DigitalMarketplace' - - 여기서는 resolve by id를 사용해주세요! - - sender값에는 { addr: activeAddress!, signer }를 복붙해주세요. useWallet를 통해 현재 연결된 지갑 주소와 서명자를 사용하는 코드입니다. + - 3번째 줄에서 import { NftMarketplaceClient } from '../contracts/NftMarketplace'로 import한 클래스는 + Nft 마켓플레이스 앱을 빌드할때 자동 생성된 클라이언트 클래스입니다. + - id값에는 currentAppId를 넣어주세요. + - sender값에는 { addr: activeAddress!, signer }를 복붙해주세요. useWallet를 통해 현재 연결된 지갑 주소와 서명자를 포함한 객체를 설정해주는 코드입니다. + - NftMarketplaceClient 생성자의 두번째 인자인 algod는 algorandClient.client 안에 있습니다. 힌트: https://github.com/algorandfoundation/algokit-client-generator-ts/blob/main/docs/usage.md#creating-an-application-client-instance */ // 문제 5 시작 - const nftmClient = new NftMarketplaceClient( - { - resolveBy: 'id', - id: currentAppId, - sender: { addr: activeAddress, signer }, - }, - algorandClient.client.algod, - ) + const nftmClient = '여기에 코드 작성' // 문제 5 끝 return nftmClient