Skip to content

FIL-Builders/fs-upload-dapp

 
 

Repository files navigation

Filecoin Synapse dApp Tutorial

This repo will serve with tutorial to demonstrate how to build a decentralized application (dApp) that interacts with Filecoin Synapse - a smart-contract based marketplace for storage and other services in the Filecoin ecosystem.

Overview

This dApp showcases:

  • Connecting to Filecoin networks (Mainnet/Calibration)
  • Installing synapse-sdk to your project.
  • Depositing funds to Synapse contracts using USDFC token.
  • Uploading files to Filecoin through Synapse

Prerequisites

  • Node.js 18+ and npm
  • A web3 wallet (like MetaMask)
  • Basic understanding of React and TypeScript
  • Get some tFIL tokens on Filecoin Calibration testnet link to faucet
  • Get some USDFC tokens on Filecoin Calibration testnet link to faucet

Getting Started

  1. Clone this repository:
git clone https://github.com/yourusername/fs-upload-app
cd fs-upload-app
  1. Install dependencies:
npm install
  1. Run the development server:
npm run dev

Open http://localhost:3000 to view the dApp.

Key Components

Wallet Connection

The dApp uses RainbowKit for seamless wallet connection, configured specifically for Filecoin networks:

  • Filecoin Mainnet
  • Filecoin Calibration (testnet)

Query token and storage usage Balances

Shows how to:

  • Get user FIL-USDFC-SynapseStorageUsage balances
  • hook used to query user balances link

Pay For Storage with USDFC

Demonstrates how to:

  • Pay for storage by depositing funds to Synapse contracts using USDFC token
  • Handles one time payment for 10GB usage that persists 30days
  • Notifies repayment if less than 10days remain for paying synapse based on current usage
  • hook used to conduct a payment link

File Upload

Shows how to:

  • Create a user-friendly file upload interface
  • Upload file to Filecoin using synapse-sdk
  • Monitor upload status
  • Download filecoin from Filecoin using synapse-sdk
  • hook used to upload a file link

Learn More

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License - see the LICENSE file for details.

About

For the tutorial of building dapp using synapse-sdk.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 98.5%
  • CSS 1.4%
  • JavaScript 0.1%