Sui dApp Frontend Scaffold

Your super kit to build dApp on Sui

This project provides a frontend scaffold for a decentralized application (dApp) on the Sui blockchain. It uses next.js page router, shadcn/ui for UI library, @mysten/dapp-kit for interacting with Sui contracts, and bucket-protocol-SDK for additional blockchain interactions.

Powered by Bucket Protocol.

Packages

• next.js: Utilized for the foundational framework, supporting SSR and optimized page routing.
• tailwind: Rapidly build modern websites without ever leaving your HTML.
• shadcn/ui: Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
• @mysten/dapp-kit: Provides hooks and components for querying data from the Sui blockchain, and connecting to Sui wallets.
• bucket-protocol-sdk: Enhances capabilities with Sui blockchain features.

Features

• Headless, fully customizable UI component
• Save 80% of the initial setting time. You can build your project/product way faster

Components

• Basic series

  • BasicDataField

    import BasicDataField from "@/components/fields/basicDataField";
    
    <BasicDataField
      label="Your Wallet Balance"
      value={userBalance ?? "0.0000"}
      spaceWithUnit
      unit="SUI"
      minFractionDigits={0}
    />

    

  • BasicInputField

    import BasicInputField from "@/components/fields/basicInputField";
    
    <BasicInputField
      label="Input"
      inputValue={value}
      setInputValue={setInputValue}
      tokenInfo={["SUI", "BUCK", "USDC", "USDT"]}
      canSelectToken={true}
      selectedToken={selectedToken}
      setSelectedToken={setSelectedToken}
      maxValue={0.0}
    />

    

• ConnectMenu

  import ConnectMenu from "@/components/ui/connectMenu";
  
  <ConnectMenu walletAddress={walletAddress} suiName={suiName} />

  

• MetaTagsContainer

  • Open graph metadata is a key point for a web app. Most common settings are gathered in this component.