ออกแบบ Wireframe Collab world

[BenzRawinporn]

ออกแบบ Wireframe เพื่อ Support กับทาง Tripster โดยจะแบ่ง Wireframe ของทาง Hyper NFT (เป็นหน้าที่สามารุ Reuse ได้) และทาง Collab World ซึ่งมี Comment กับทางทีม JDN เมื่อ 23/6/2023

https://app.diagrams.net/#G1jYYRSaSUqzUQtU9bsmzf9_IP6Iry31Ea#%7B%22pageId%22%3A%22t7Pa9XAKNuGGSkWniBQE%22%7D

หน้า My Wallet

• เดิม : การ Transfer จะต้องเป็นกระเป๋าที่ Holder Connect เท่านั้น ใหม่: การ Transfer สามารถใส่เลขกระเป๋าได้เลย (ไม่จำเป็นต้อง Connect)

• เดิม : tag ที่แสดงบน NFT ถ้าเป็น Virtual NFT ให้แสดง ส่วนเป็น NFT แท้ไม่แสดง
  ใหม่ : tag ที่แสดงจะแสดงแค่ NFT แท้ (อาจะเป็น icon Blockchain) จะไม่แสดง tag Virtual NFT (เนื่องจาก NFT ส่วนใหญ่ที่แสดงจะเป็น Virtual NFT ซะส่วนใหญ่)

• เดิม : เมื่อทำการ Connect Wallet สามารถนำกระเป๋าที่เคย Connect ออกได้ ใหม่ : ตอนนี้เมื่อทำการ Connect Wallet จะไม่สามารถเอาออกได้

• เดิม : การ Connect Wallet จะมีการ เปลี่ยนกระเป๋าเพื่อแสดง NFT ในกระเป๋านั้นๆ ใหม่ : ตอนนี้ยังไม่ Support การเปลี่ยนกระเป๋า เมื่อลูกค้าทำการ Connect Wallet แล้วหน้า My Wallet จะแสดง NFT ของทุกๆกระเป๋า (น่าจะ สามารถทำการแยกผ่าน Front-end ได้)

• เดิม : สามารถมีการ Connect ผ่าน Web3 และ JOIN ได้ ใหม่ : เนื่องจากลูกค้าของ Tripster มี Web3 Wallet ทั้งหมด ตอนนี้เลยจะ Support การ Connect Wallet ผ่าน Metamask เท่านั้น

หน้า NFT Detail

• เดิม : เมื่อทำการกด Use เพื่อใช้ Privilege จะมี Pop up เพื่อทำการเลือก NFT และ Confirm ใหม่ : เมื่อทำการกด USe เพื่อใช้ Privilege จะ Link ไปยังหน้า Privilege Detail

• เดิม : Privilege จำนวน Amount ที่เหลือ จะแสดงเป็น Amount : 5/5 ใหม่ : ทำเป็น icon เพื่อให้ดูง่ายขึ้น เช่น เป็นกล่องของขวัญ

หน้าหลัก Collab world

• ทำเพิ่มเติม ในกรณีที่กดในส่วนต่างๆแล้วจะแสดงหน้าเป็นลักษณะไหน

  หน้า Campaign Detail

• เดิม : How to join จะสามารถมีเงื่อนไขในการเข้าร่วม Discord หรือการ Follow ทาง Social ใหม่ : ตอนนี้จะ Support แค่มี NFT ตามเงื่อนไข เพื่อที่จะเข้าร่วม Campaign

หน้า Privilege Detail

• เพิ่ม How to get NFT ในกรณีที่ลูกค้ามี NFT ให้ครบ
• ทำการ Check ว่ามีการ Login หรือยัง (Hyper NFT) แต่จะ Auto Login ถ้าใช้บน APP JOIN
• เดิม : หน้าโชว์ Code Privilege จะแสดงแค่ Short description , Code , ปุ่ม Confirm ใหม่ : เพิ่ม Wallet Address ที่จะใช้ Privilege นี้ และสามารถ Change Address ได้

[BenzRawinporn]

comment Internal (29/06/2023) https://app.diagrams.net/#G1jYYRSaSUqzUQtU9bsmzf9_IP6Iry31Ea#%7B%22pageId%22%3A%22NrXRBHD_JOYEJQgNuGji%22%7D

หน้า My Wallet

• ทำการจำแนกว่า NFT ว่า เป็น NFT แท้ หรือ Virtual NFT (ทำการจำแนกโดยการมี ICON ของ Chain ที่ NFT นั้นอยู่ เช่น NFT ของ Tripster อยู่บน Ethereum Chain ก็จะเป็น Icon ของ Ethereum บนมุมขวา)
• ไม่สามารถ Switch Wallet บน Hyper ได้ แต่จะทำการ Switch Account บน MetaMask

แยกการเชื่อมกระเป๋า

• ไม่เคย Connect wallet
  1. ขึ้น Popup ให้ Connect MetaMask
  2. เลือก Account ที่ต้องการ Connect (เมื่อทำการ Connect Account แล้วระบบจะจำ Account ที่เคย Connect เสมอ เช่น รอบแรกทำการ connect Account 1 แล้วเมื่้อทำการ Connect Account2 ระบบจะจำการ Connect Account 1 และ 2 )
  3. สามารถ Connect Wallet เพิ่มได้ limit สูงสุดแค่ 5 Address
     • เคย Connect wallet
  4. จะแสดง Account ที่เคยทำการ Connect
  5. สามารถ Connect เพิ่มได้ สูงสุด 5

• แสดงจำนวนครั้งที่สามารถใช้ได้โดยการแสดงเป็น icon รูปของขวัญ และจำนวน NFT ที่ใช้เป็น Progress Bar (จะแสดงให้ดูเฉยๆ จะไม่สามารถเลือก NFT เพื่อใช้งานในหน้านี้ได้ ถ้าต้องการใช้ให้กด Detail เพื่อไปหน้า Privilege Detail)

NFT แท้

• จะแสดง Address ที่ทำการ Connect (ถ้าต้องการเปลี่ยน Address ให้กดออกจาก Pop up และทำการ Switch Account ผ่าน Metamask)
• แสดง Address ของผู้ที่ได้รับการ Transfer (สามารถ Custom Address ได้ตามต้องการ)
• เมื่อทำการ Confirm จะแสดง NFT ที่ทำการ Transfer สำเร็จ

Virtual NFT

• จะแสดงแค่ Address ของผู้ที่ได้รับการ transfer เนื่องจาก Virtual NFT อยู่บน Hyper NFT
• เมื่อทำการ Confirm จะแสดง NFT ที่ทำการ Transfer สำเร็จ

หน้าหลัก Collab World

• เมื่อทำการกดหมวดหมู่ จะ Link ไปยังหน้ารวม Campaign และ Privilege
• เมื่อทำการกด แบรนด์ x collab หรือ แบรนด์ จะ link ไปยังหน้า Campaign List หรือ Privilege List (Default เป็น Campaign List )

-สามารถเลือกหมวดหมู่ได้จากการกด Dropdown ข้างบน

• สามารถเลือก Brand ที่ต้องการดู Campaign และ Privilege ได้
• แสดง List Campaign และ Privilege

Select NFT to use Privilege

• เมื่อทำการกด + เพื่อเลือก NFT (บนหน้า Privilege Detail)
  • แสดง NFT ที่สามารถใช้ Privilege ได้
  • เมื่อทำการกด NFT ที่สามารถใช้ได้ (ในกรณีไม่มี NFT นั้นๆ เมื่อทำการกด จะแสดงรายละเอียด NFT และวิธีการได้ NFT นั้นๆมา ) (ในกรณีที่มี NFT นั้นๆแล้ว ก็สามารถกดดูรายละเอียดของ NFT นั้นๆได้ และแล้วแต่เงื่อนไขของ Brand ว่ามีการกำหนดให้ 1คน/1NFT ไหม ถ้ากำหนดจะไม่แสดงวิธีการได้รับ NFT นั้นๆมา แต่ถ้าไม่กำหนด 1 คนจะมี NFT นั้นกี่ใบก็ได้ ให้แสดงวิธีการได้รับ NFT นั้นๆมา)
• เมื่อทำการกด + เพื่อเลือก NFT (บน Popup)
  • สามารถเลือก NFT ที่ต้องการใช้งานได้โดยจะสามารถเลือกได้ครั้งละ 1 NFT หมายถึง นาย A มี NFT 2 ใบที่ต้องการใช้งานได้ แต่ในการกด + ขะเลือก NFT ได้แค่ 1 อัน และทำการกด Select เพื่อเลือกใช้งาน)

[BenzRawinporn]

Comment พี่พล Tripster (5/07/2023) หน้า NFT Detail

• เมื่อลูกค้าได้รับ Virtual NFT (เปรียบเสมือนคูปอง) ควรที่จะสามารถแลก Privilege ได้เลยภายในหน้า NFT Detail
  • จะทำการเอา Detail ที่ลูกค้าควรจะรู้ที่อยู่ภายในหน้า Privilege Detail (Expand ออกมาเพื่อแสดงรายละเอียด) รอออกแบบ
• Version แรกจะให้เงื่อนไขในการแลก Privilege คือ สะสมแค่ 1 NFT ก็สามารถแลก Privilege ได้

หน้า Campaign Detail

• ต้องการให้ลูกค้าใช้งานง่าย โดยการที่ถ้าลูกค้ามี NFT ที่สามารถเข้าเงื่อนไขได้เลย จะทำการ Auto เลือก NFT ให้
• ในอนาคต จะมี Usecase มีการสะสม NFT ของ Tripster ยิ่งมีเยอะ ยิ่งได้ Privilege เยอะ

https://app.diagrams.net/#G1tMuEoBd3Gusdu-AAPIajGbsSGHckC1eR

[BenzRawinporn]

https://drive.google.com/file/d/1tMuEoBd3Gusdu-AAPIajGbsSGHckC1eR/view?usp=sharing update ประชุม ออกแบบ MVP (17/7/2023)

หน้า My Wallet

• หน้า My Wallet จะใช้ 3rd party เพื่อทำการดึงข้อมูล NFT จาก Wallet ของผู้ใช้งาน (Support ETH และ JFINchain)

• ใน Menu จะเพิ่ม Connect Metamask เนื่องจากผู้ใช้งานของทาง Tripster มี Metamask ของตัวเอง และต้องการให้ผู้ใช้งานสามารถ Connect Metamask ได้สะดวกยิ่งขึ้น

• บัญชีของฉัน - เมื่อทำการกดแล้วจะไปยังหน้า Connect 3 แบบ คือ Connect JOIN , Line และ Metamask

• connect Wallet แล้วยังไม่สามารถนำออกหรือแก้ไขได้ Connect แล้ว Connect เลย (limit 5)

• หน้า My Wallet จะแสดง NFT 3 แบบ คือ

  1. Virtual NFT - มี icon รูปของขวัญเพื่อแสดงว่า Virtual NFT นี้มี Privilege
  2. NFT แท้ที่เกิดจากการ Mint - มี icon รูปของขวัญเพื่อแสดงว่า Virtual NFT นี้มี Privilege และ มี icon ของ Chain ที่ Mint หรือ เป็น NFT ที่อยู่บน Chain นั้นๆ
  3. NFT แท้ ของ Tripster - จะไม่มี icon ของขวัญ แต่จะมี Icon ของ Chain ที่ NFT นี้ๆอยู่

  NFT แท้ของ Tripster

  

• สามารถที่จะเข้าร่วม Campaign ผ่าน NFT Detail ของ Tripster

• แสดงรายละเอียดของ Campaign โดยการกดแท็บ Campaign และรายละเอียดจะขยายออกมา

• เมื่อทำการกดเข้าร่วม Campaign ระบบจะให้ 3rd party หาว่า Wallet ที่ทำการ Connect มี NFT ตามเงื่อนไขในการเข้าร่วม Campaign หรือไม่

• ในกรณีที่ผู้ใช้งานไม่เคย Connect Wallet จะบังคับให้ทำการ Connect Wallet

หน้า NFT Detail (การใช้ Privilege 1 NFT)

• สามารถแลก Privilege ผ่านหน้า Virtual NFT ได้เลย (เปรียบเสมือนคูปองที่ Drop มาจากที่เข้าร่วม Campaign)
• มีรายละเอียดของ Privilege
• เมื่อกด 'รับสิทธิพิเศษ' จะแสดง Popup เพื่อยืนยันการแลก Privilege
• มี icon รูปกล่องของขวัญ เพื่อบ่งบอกว่ามี Privilege

หน้า NFT Detail (การใช้ Privilege 1 NFT)

• สามารถแลก Privilege ผ่านหน้า NFT แท้นี้ ได้เลย
• มีรายละเอียดของ Privilege
• เมื่อกด 'รับสิทธิพิเศษ' จะแสดง Popup เพื่อยืนยันการแลก Privilege
• มี icon รูปกล่องของขวัญ เพื่อบ่งบอกว่ามี Privilege
• มี icon jfin chain เพื่อบ่งบอกว่า NFT นี้อยู่บน Chain ไหน
• เมื่อทำการแลก Privilege แล้ว จะมี History เพื่อดูประวัติการแลก Privilege หรือดู code ย้อนหลังได้ในกรณีเงื่อนไขในการได้โค้ดไม่มีกำหนดเวลาในการใช้

Privilege

• เมื่อทำการกดใช้งาน จาก Virtual NFT จะมีให้เลือก Wallet ที่ต้องการเก็บ NFT แท้ที่เกิดจากการ Mint โดยที่ Wallet ที่แสเงจะเป็น Wallet ที่เกิดจากการ Connect Wallet ในระบบ Hyper NFT
• เมื่อทำการกด Confirm จะแสดง Code ให้ลูกค้าไปใช้งานได้

[crafnoon]

VNFT ของ Tripster ต้องการใส่ CODE สำหรับใช้ Privilege จำพวก Shopee, lazada จึงสามารถใช้ Feature ที่เราสร้างไว้สำหรับ Birthday party ใน Teenoi ได้