ซีรีย์ Web3 สำหรับผู้เริ่มต้น: การนำ NFT DEX มาใช้ตั้งแต่ต้น

ผู้ใช้ที่อ่านบทความก่อนหน้าควรทราบว่าสำหรับโทเค็นโปรโตคอล ERC-20 เราสามารถซื้อขายผ่าน DEX ที่แสดงโดย Uniswap เพื่อให้เกิดการกระจายอำนาจ แล้วสำหรับโปรโตคอล ERC-721 หรือ NFT จะทำธุรกรรมแบบกระจายอำนาจได้อย่างไร

ตลาดแลกเปลี่ยน NFT กระแสหลักบางแห่งในปัจจุบันใช้การวางคำสั่งซื้อเพื่อทำธุรกรรม เช่นเดียวกับการลงรายการสินค้าบนชั้นวางในซูเปอร์มาร์เก็ต หากผู้ซื้อคิดว่าราคาเหมาะสมก็สามารถนำสินค้ากลับบ้านได้

บทความนี้จะนำไปใช้ในการซื้อขาย NFT แบบกระจายอำนาจโดยการเขียนสัญญาอัจฉริยะและหน้าเพจแบบเรียบง่าย โปรดทราบว่าบทความนี้มีไว้เพื่อวัตถุประสงค์การเรียนรู้เท่านั้นและไม่สามารถใช้ในสภาพแวดล้อมการผลิตจริงได้

NFT (โทเค็นที่ไม่สามารถทดแทนได้)

NFT เป็นโทเค็นที่ไม่สามารถทดแทนได้ ซึ่งหมายความว่าโทเค็นแต่ละตัวไม่สามารถทดแทนได้และแตกต่างกัน และปฏิบัติตามโปรโตคอล ERC-721 โดยทั่วไปแล้ว NFT แต่ละรายการจะแสดงภาพที่แตกต่างกันในกระเป๋าเงิน และ NFT แต่ละชุดจะมี ID เฉพาะตัวเพื่อแยกแยะแต่ละชุด

เนื่องจากลักษณะเฉพาะของ NFT จึงไม่สามารถกำหนดราคาผ่านเส้นราคาเช่น ERC-20 ได้ เนื่องจากโทเค็นแต่ละตัวมีความแตกต่างกัน ดังนั้นวิธีการซื้อขายที่พบเห็นได้ทั่วไปในปัจจุบัน คือ การซื้อขายผ่านสมุดคำสั่งซื้อขาย

การซื้อขายหนังสือคำสั่ง

หากอธิบายแบบง่ายๆ ก็คือ รูปแบบคำสั่งซื้อหมายถึงการกำหนดราคาสินค้าด้วยมือ ซึ่งแตกต่างจากวิธีการคำนวณราคาผ่านเส้นโค้งราคาของ Uniswap โดยทั่วไปคำสั่งซื้อขายจะแบ่งออกเป็น 2 โหมดการซื้อขาย อันหนึ่งคือลำดับราคา นั่นคือ ผู้ขายตั้งราคาขายไว้ในใจ ถ้ามีผู้ซื้อที่คิดว่าราคาเหมาะสม ผู้ซื้อก็สามารถซื้อได้ อีกอย่างหนึ่งคือใบสั่งซื้อ นั่นคือ ผู้ซื้อออกใบสั่งซื้อตามความต้องการของตนเอง และเมื่อผู้ขายคิดว่าราคาเหมาะสม ผู้ขายก็สามารถขายได้

โดยทั่วไปแล้ว ราคาของคำสั่งซื้อจะต่ำกว่าราคาคำสั่งซื้อขาย บทความนี้จะแนะนำเพียงวิธีการกำหนดราคาแบบแรกเท่านั้น

ฟังก์ชันการทำงานของ NFT DEX

ฟังก์ชันพื้นฐานของ NFT DEX ควรประกอบด้วยสิ่งต่อไปนี้:

1. การลงรายการสินค้า: ลงรายการ NFT ในราคาที่กำหนด

2. ซื้อสินค้า : ซื้อตามราคา NFT

3. ค่าธรรมเนียม DEX: ค่าธรรมเนียมจะถูกเรียกเก็บตามสัดส่วนของราคาธุรกรรม

รายการสินค้า

หากต้องการแสดงรายการผลิตภัณฑ์ คุณต้องดำเนินการดังต่อไปนี้:

1. ส่วนหน้า: ผู้ใช้เลือก NFT ของตัวเอง ตั้งราคา และคลิกเพื่อแสดงรายการ

2. สัญญา: ผู้ใช้จำเป็นต้องกำหนดสิทธิ์สำหรับสัญญาในการจัดการ NFT ของผู้ใช้

ด้วยวิธีนี้ผลิตภัณฑ์ก็เสร็จสมบูรณ์แล้ว ในสัญญา จำเป็นต้องมีการคงแผนภูมิราคาสินค้าที่ผู้ใช้ลงไว้ โดยทั่วไปข้อมูลนี้สามารถรวมศูนย์ไว้ในบริการเพื่อลดภาระของสัญญา แต่ในบทความนี้ ข้อมูลส่วนนี้ของแผนที่จะได้รับการดูแลรักษาในสัญญา

สั่งซื้อสินค้า

เมื่อคุณซื้ออะไรบางอย่าง จะมีสิ่งบางอย่างเกิดขึ้น:

1. ส่วนหน้า: ผู้ใช้เลือก NFT ที่ต้องการซื้อและคลิกซื้อ

2. สัญญา: เรียกสัญญาเพื่อโอนเงินของผู้ใช้ไปยังผู้ขาย NFT และโอน NFT ไปยังผู้ซื้อ

การนำ NFT DEX มาใช้

ในส่วนนี้เราจะนำ NFT DEX มาใช้ตั้งแต่เริ่มต้น นี่คือที่อยู่ DEX nft-dex-frontend.vercel.app ที่ผู้เขียนได้ปรับใช้

1. สร้าง NFT

เพื่อวัตถุประสงค์ในการทดสอบ คงจะดีที่สุดหากเรามี NFT ของเราเอง เราสามารถสร้างโปรโตคอล ERC-721 NFT ได้อย่างรวดเร็วผ่าน Remix ซึ่งมีเทมเพลตที่สอดคล้องกัน

เราสามารถใช้งาน NFT ตามเทมเพลตได้อย่างง่ายดาย แน่นอนว่าคุณสามารถข้ามขั้นตอนนี้และใช้ NFT ที่เราเตรียมไว้ได้โดยตรง

2. การเขียนสัญญา

วิธีการสัญญาของเราควรมีวิธีการดังต่อไปนี้:

2.1. รายชื่อผู้ขาย NFT

ผู้ขายจะต้องระบุ NFT ที่ต้องการขายและราคาที่สอดคล้องกัน เมื่อมีการลงรายการ NFT ผู้ใช้จะต้องลงนามในวิธีการอนุญาต NFT เพื่อให้สัญญาอัจฉริยะของเรามีอำนาจในการดำเนินการ NFT ดังนั้นเมื่อผู้ซื้อซื้อ NFT ธุรกรรมก็จะสามารถดำเนินการให้เสร็จสมบูรณ์โดยอัตโนมัติ

ดังนั้นกระบวนการควรเป็นเช่นนี้: 1. ผู้ใช้เลือก NFT ของตัวเอง 2. กำหนดราคาซึ่งสามารถเป็นสกุลเงินเสถียร USDT, USDC หรือ ETH 3. อนุญาตให้ NFT เข้าทำสัญญา

หลังจากนั้นคุณสามารถเรียกใช้วิธีการลงรายการสัญญา ซึ่งจะต้องดำเนินการสิ่งต่อไปนี้:

1. ตรวจสอบความเป็นเจ้าของ NFT

2. เพิ่มรายการบันทึก

3. เหตุการณ์ที่ทำให้เกิดรายการ

2.2. ผู้ซื้อซื้อ NFT

เมื่อผู้ซื้อซื้อ NFT ผู้ใช้เพียงแค่เลือก NFT ที่ต้องการและชำระเงินโทเค็นที่เกี่ยวข้อง ขั้นตอนต่อไปนี้จะดำเนินการที่ระดับสัญญา: 1. อ่านข้อมูล NFT ที่สอดคล้องกันจาก รายการ 2. คำนวณค่าธรรมเนียมการจัดการโดยอิงจากราคา NFT และหักออกจากราคาธุรกรรม 3. โอน NFT ให้กับผู้ซื้อ 4. กระตุ้นเหตุการณ์การซื้อ

2.3. การยกเลิกรายการ

แน่นอนว่าผู้ขายอาจรู้สึกว่าราคาไม่เหมาะสมและเลือกที่จะยกเลิกการลงรายการ คุณจะเห็นได้ว่าเราได้สำรองฟิลด์ isActive ไว้ซึ่งข้อมูลรายการจะถูกบันทึกไว้เพื่อระบุว่าผลิตภัณฑ์นั้นถูกต้องหรือไม่ ดังนั้นเมื่อยกเลิกการลงรายการ เราจะต้องตั้งค่าฟิลด์นี้เป็นเท็จเท่านั้น

2.4. ค่าธรรมเนียมการถอนเงิน

DEX สามารถเรียกเก็บค่าธรรมเนียมสำหรับแต่ละธุรกรรมได้ ค่าธรรมเนียมนี้สามารถนำไปฝากไว้ในสัญญาหรือโอนไปยังที่อยู่อื่นของคุณเองได้ บทความนี้ใช้หลักการฝากเข้าในสัญญา

จนถึงตอนนี้ฟังก์ชั่นพื้นฐานของสัญญาของเรามีครบถ้วนแล้ว

3. การพัฒนาฟรอนต์เอนด์ DEX

ก่อนที่จะเริ่มต้น เราต้องเตรียมเครื่องมือบางอย่าง ซึ่งรวมถึงสิ่งต่อไปนี้:

1. Ant Design Web3: ใช้สำหรับเชื่อมต่อกระเป๋าเงินและแสดงการ์ด NFT

2. วากมี่ : ใช้ในการโต้ตอบกับกระเป๋าเงิน

3. Nextjs + Vercel: ปรับใช้โครงการของเรา

แอปพลิเคชันส่วนหน้าของเราควรมีสามหน้า: Mint, Buy และ Portfolio Mint เป็นโปรแกรมที่ใช้สร้าง NFT ของเราและให้ผู้ใช้ได้ใช้เพื่อการสาธิตเท่านั้น Buy คือ DEX Mall ของเราซึ่งผู้ใช้สามารถซื้อ NFT ของเราได้ ในพอร์ตโฟลิโอ ผู้ใช้สามารถแสดงรายการและยกเลิกการแสดงรายการ NFT ได้

3.1. การเชื่อมต่อกับกระเป๋าสตางค์

เชื่อมต่อกระเป๋าเงินของผู้ใช้และใช้ Ant Design Web3 เพื่อใช้งาน

กระบวนการเชื่อมต่อกระเป๋าเงินของผู้ใช้เป็นเรื่องง่ายมาก เพียงใช้องค์ประกอบการเชื่อมต่อที่ Ant Design Web3 จัดทำไว้ให้

ขั้นแรก เราจะหุ้ม Provider ไว้ในเลเยอร์ภายนอกของโปรเจ็กต์ เพื่อให้เราสามารถใช้ความสามารถของ Ant Design Web3 ในโค้ดถัดไปได้ นอกจากนี้ เนื่องจากเราจำเป็นต้องเชื่อมต่อกับเชนการทดสอบเซโปเลีย เพื่อพิจารณาเรื่องความเร็ว จึงขอแนะนำให้ใช้บริการโหนดบางอย่างเพื่อเพิ่มความเร็วในการค้นหาข้อมูล ฉันใช้จุดสิ้นสุด ZAN ที่นี่ ซึ่งเหมาะสำหรับการใช้งานในสภาพแวดล้อมเอเชียแปซิฟิกมาก มีความเร็วสูงและคุ้มค่ามาก อีกทั้งยังรองรับเครือข่ายได้หลากหลาย

จากนั้นวางปุ่มเชื่อมต่อตรงจุดที่คุณต้องการเชื่อมต่อกับกระเป๋าสตางค์:

แค่นั้นเองมันก็ง่ายมาก

3.2. มิ้นต์

สร้าง NFT และรับโทเค็นทดสอบที่ https://zan.top/faucet/ethereum

ในหน้า Mint เราสามารถสร้าง NFT เพื่อการทดสอบได้ มิ้นท์ คือการดำเนินการเขียนสัญญา ที่นี่เราจำเป็นต้องใช้เมธอด useWriteContract ใน wagmi เราเพียงแค่ต้องระบุที่อยู่สัญญา, ABI ของสัญญา และพารามิเตอร์สัญญา

จากนั้นให้ยืนยันในกระเป๋าสตางค์แล้วการทำรายการก็จะสำเร็จ

3.3. แฟ้มสะสมผลงาน

การจัดการ NFT ของผู้ใช้

จำเป็นต้องแสดง NFT ของผู้ใช้ทั้งหมดที่นี่ เราสามารถใช้ NFT API บางส่วนเพื่อรับมันได้ เราใช้ Opensea API ที่นี่เนื่องจากไม่มี NFT API ที่รองรับเชนการทดสอบ Sepolia มากนัก

หลังจากได้รับรายการ NFT ของผู้ใช้แล้ว คุณต้องตรวจสอบว่ารายการนั้นได้รับการวางไว้บนชั้นวางหรือไม่ หากยังไม่ได้วางบนชั้นวาง คุณสามารถสนับสนุนการลงรายการได้ และหากได้รับการวางบนชั้นวางแล้ว คุณสามารถสนับสนุนการถอดรายการออกได้ วิธีการตัดสินคือการรับ NFT ที่ผู้ใช้ลงรายการไว้ผ่านเมธอด getSellerListings ในสัญญา DEX จากนั้นจึงกำหนดว่า NFT เหล่านั้นถูกลงรายการอยู่หรือไม่โดยอิงจากฟิลด์ isAlive ของ NFT เหล่านี้

เมื่อทำการรายการ คุณต้องเรียกใช้เมธอดสัญญา listNFT และเมื่อทำการยกเลิก คุณต้องเรียกใช้เมธอด cancelListing ก่อนที่จะลงรายการ คุณต้องเรียกใช้วิธีการอนุญาต NFT เพื่ออนุญาต NFT ให้เป็นไปตามสัญญา ดังนั้นหลังจากธุรกรรมถัดไปเสร็จสมบูรณ์แล้ว NFT จะถูกโอนไปยังผู้ซื้อโดยอัตโนมัติ

3.4. ซื้อ

คุณสามารถซื้อ NFT ได้ใน Buy

ก่อนอื่น เราต้องแสดง NFT ที่ถูกระบุไว้ คล้ายกับการแสดง NFT ที่มีอยู่ของผู้ใช้ในพอร์ตโฟลิโอ ความแตกต่างในที่นี้ก็คือ NFT หนึ่งรายการจะเป็นแบบทั่วโลกและไม่เฉพาะสำหรับผู้ใช้รายใดรายหนึ่งอีกต่อไป ส่วนอีกรายการหนึ่งจะต้องแสดง NFT ที่ยังใช้งานได้อยู่เท่านั้น

เมื่อซื้อให้ใช้วิธี purchaseNFT เมื่อเรียกใช้วิธีนี้ คุณต้องใช้ ETH เพื่อจ่ายราคาขาย

“มูลค่า” ที่นี่คือ ETH ที่ผู้ซื้อต้องจ่าย

ตอนนี้เพจ DEX front-end ที่มีความสามารถพื้นฐานทั้งหมดเสร็จสมบูรณ์แล้ว และเราสามารถนำไปใช้ใน Vercel ได้

บทความนี้เขียนโดย Yeezo (บัญชี X @GaoYeezo 75065 ) ของทีม ZAN (บัญชี X @zan_team )