:window: FileStorage UI

SKALE Chain File Storage DApp — Browse, navigate, upload and manage files.

UI Preview

Build requirements: Node v16, Git

git clone git@github.com:skalenetwork/filestorage-ui.git

Dev Guide

cp .env.staging .env.local
yarn
yarn dev

Start from: pages/app.tsx and context/index.tsx.

Build Guide

Configure default chain

Default chain can be configured before static build. Copy the existing environment and update variables.

cp .env.staging .env.production

Create static build

Static build is by default output in /dist directory.

# output in /dist
yarn && yarn build

Ongoing customization

UI can be customized through global presets in public/presets.js. Following is its type definition and properties description.

Note: Chains can be set in presets. Default is set in env before build. It can be overridden by preset chain with default flag.

export type ConfigType = {
  optimize: {
    prefetchEvent: string; // placeholder (ignore)
    prefetchDepth: number; // (0, Infinity) directory depth to prefetch during navigation
  };
  branding: {
    logoUrl: string; // URL to logo image
    logoText: string; // Optional text placed next to logo
  };
  navigator: {
    pageLimit: number; // max items per navigator page
  };
  uploader: {
    batchThreshold: number; // max items where upload is marked as batch
    maxFileDirNameLength: number; // max characters count of directory name
  };
  chains: {
    default?: boolean; // option to set as default
    protocol: string; // http or https
    nodeDomain: string; // node host FQDN
    version: string; // chain version
    sChainName: string; // chain name
    chainId: string; // chain ID
  }[]
}

Deploy on-chain

yarn deploy -a <address> -k <pvtKey> -s <sourcePath> -d <destinationPath> -m <mode>

export SKL_DEPLOYER_ADDRESS=<address>
export SKL_DEPLOYER_PRIVATE_KEY=<pvtKey>
yarn deploy -s <path>

OR interactively

yarn deploy -s <sourcePath> -i

Check help for options and defaults.

yarn deploy --help

Features

UI Components

[x] Wallet picker
[x] Multi-file uploader
[x] Space reservation
[x] Role allocation
[x] Total usage metrics
[x] File Navigator: paginated + sortable + actionable
[x] Navigation breadcrumb
[x] Address switch
[x] Search

Contribution

DApp Architecture

FileStorage UI builds on top of filestorage.js, extending it with filemanager.tx and react hooks.

Read further @ DeFileManager Package Documentation.

Styling

Project uses tailwind class-based styling.

For those not familiar but seasoned with CSS, you can pick pace in ~3h, after that it's intuitive with occasional doc-check.
For backend devs doing minor template updates, come with a temporary counter-DRY mindset, and you'll find less friction.

Authorization UX

Implicit Flow

Currently, a shortcut prompts for private key, prior to deployments, this must be restricted to session-only.

Within the UI, a hotkey lets a prompt take in private key and use it against connected wallet. Not very friendly by design.

Wallet Flow

Certain custodial wallets may naturally allow batching, but need to be identified and evaluated against contract functionality for integration.

Following is an EIP that opens better UX across all EVM ecosystems, it should be lobbied for at community level.

EIP-2255

projection by metamask

Improvement

wagmi + rainbowkit is a neat choice but rainbowkit doesn't yet support many wallets.
wagmi doesn't easily interoperate with web3modal.

Codebase: Structure

src/context

App contexts mainly using Context API, includes File Manager context hook that can isolated away later.

src/pages

Contains pages, initially single app.tsx is central and sufficient

src/components

Components either re-used across the application, or small enough to be re-used.

src/partials

HOCs on groups of components, could be later merged into src/components

src/packages

Modules prepared or being prepared to be published standalone.

src/styles

Contains global styling files, and tailwind imports, initially limited use for overrides.

src/config.ts

Global configuration file is loaded into app context, allowing use of static defaults declared client-side and types for extendability.

scripts/*

Automation scripts, CLIs incl. deployment

main.tsx

Main entry point that mounts the app with context.

polyfill.ts

Polyfills to non-browser-native libraries, vite does not automatically bundle these.

utils.ts

Utility functions usable across the app

skalenetwork / filestorage-ui

readme