lockdrop

Lockdrop is a decentralized web application that enables users to create, manage, and share time-locked vaults and capsules on Ethereum. The front end is built with React and Vite for a responsive UX, while the core logic is enforced by on-chain smart contracts (see Vault.sol and VaultFactory.sol). Users can create a vault, upload or reference encrypted content stored on IPFS, and associate access tokens—NFTs that grant entitlement to unwrap or claim the vault contents once the lock period expires.

The app provides wallet integration, onboarding, and transaction helpers so users can deploy vaults, mint NFTs, and claim assets with minimal friction. Each vault has metadata and access controls surfaced in a dashboard and individual VaultCard/VaultDetails pages; QR codes and shareable links simplify sharing vault information. Developer utilities and hooks (for contracts, IPFS, and wallet helpers) streamline interactions and make the codebase modular and testable.

Lockdrop emphasizes time-based custody: creators define lock durations and beneficiaries, and the smart contracts guarantee that assets become claimable only after the configured time. The project bundles UI components, contract ABIs (e.g., vaultABI.js, vaultFactoryABI.js), and helper scripts for block explorers and IPFS access to provide a full-stack, production-ready pattern for time-locked digital inheritance, sealed bids, or staged releases of digital content.

I built this project as a full-stack dApp with a React + Vite frontend, Solidity smart contracts for time-locked vaults, and IPFS for decentralized content storage. The main components and how they fit together:

Frontend and tooling

Built with React and Vite for a fast dev server and modern build pipeline. UI components live under src/components and pages under src/pages. Styles use CSS files alongside component-specific styles like CreateVaultForm.css and VaultDetails.css. Wallet integration and UX helpers are implemented via custom hooks in src/hooks (notably useMiniKit.js, useContracts.js, and useIPFS.js) and utilities like rainbowKit.js for streamlined connection flows and transaction handling. Small utilities such as time.js handle lock duration formatting and on-client calculations used by the UI. Smart contracts and on-chain logic

Solidity contracts Vault.sol and VaultFactory.sol encode the time-lock custody semantics. VaultFactory creates and registers Vault instances; each Vault enforces when assets can be claimed (lock/unlock) and holds metadata/ownership logic on-chain. Contract ABIs are exported as vaultABI.js and vaultFactoryABI.js so the frontend can call the contract methods directly. Storage and metadata

Content (files/capsules) is stored on IPFS. The frontend uses useIPFS.js, ipfs.js, and ipfsReader.js to upload, read, and display CIDs. Common pattern: encrypt content client‑side, upload encrypted payload to IPFS, then record the CID and metadata on-chain or in NFT metadata so the vault points to the immutable content. NFT access tokens and metadata are surfaced in components like NFTCard.jsx and VaultCard.jsx. The project encodes IPFS CIDs into NFT metadata to provide a verifiable link between a minted token and the stored content. Data flow and how pieces are pieced together

User creates a vault in the UI -> frontend constructs metadata and (optionally) encrypts files -> uploads to IPFS -> calls VaultFactory contract to deploy a Vault and register the CID/metadata and lock parameters -> optionally mints NFTs that reference the vault/CID -> beneficiaries claim after lock time via the Vault contract; frontend watches events and queries ABIs to update dashboard state. Hooks (useContracts.js) centralize contract setup (provider, signer, and contract instances), while vaultABI.js and vaultFactoryABI.js keep the interface stable and testable. Notable hacks and pragmatic shortcuts

Client-side encryption before IPFS upload: implemented to avoid needing a separate secure backend; the UI derives symmetric keys and encrypts payloads in-browser so only NFT holders or key recipients can decrypt after claiming. Lightweight off-chain indexing: instead of running a full subgraph, the app uses a simple combination of event queries + a small cache (and blockscout.js links) to populate dashboards fast without complex infra. QR + metadata embedding: to enable instant sharing, the app encodes compact vault references (CID + contract address + unlock timestamp) into QR payloads. That was a pragmatic shortcut to avoid building a dedicated sharing service. ABI-in-JS files (vaultABI.js) bundled in the client avoids runtime ABI resolution issues and simplifies deployment scripts for demos. Assumptions and trade-offs

I assumed a public IPFS gateway and client-side crypto for confidentiality; this keeps things serverless but moves key management to the client. That’s simpler for demos but requires careful UX for key export/import in production. The project favors minimal backend infrastructure—most logic is on-chain or client-side. This reduces operational overhead but places more responsibility on the contracts and frontend correctness.