SwingHook

SwingHook is a React and Vite frontend for exploring and operating the Swing protocol. The application includes wallet connection through Reown AppKit, protocol dashboards, swaps, staking, pool views, and multilingual UI.

Requirements

• Node.js ^20.19.0 or >=22.12.0, with npm
• A Reown Cloud project ID for your deployment
• A browser-side API key for The Graph

Setup

npm ci
npm run check
cp .env.example .env.local
npm run config:check
npm run build

npm run check is the source and test gate and intentionally works without .env.local. After copying the example file, fill in .env.local, then run npm run config:check to validate the actual production-mode deployer environment before building. If either required value is missing, the application renders a configuration-required screen before wallet and protocol providers mount.

This repository is the self-hostable frontend for the official SwingHook deployment on Ethereum mainnet. The chain ID, deployment block, pool ID, contract addresses, protocol lifecycle fallbacks, and Subgraph endpoint are public project facts locked in src/web3/contracts/deployments.ts; deployers do not need to copy or redefine them.

Environment variables

Copy .env.example to .env.local, then supply these two deployer-owned values:

• VITE_REOWN_PROJECT_ID: create and use your own Reown Cloud project ID.
• VITE_SWING_SUBGRAPH_API_KEY: create a key for The Graph gateway used by the fixed SwingHook Subgraph endpoint.

All VITE_* variables are embedded in the browser bundle and are visible to users. Do not put secrets in them. In particular, treat the Graph API key as a browser-side deployer setting and scope or restrict it accordingly.

Wallet support

The frontend uses Reown AppKit with wagmi and viem. Users can connect through supported injected wallets, WalletConnect QR sessions, and compatible mobile-wallet flows. Each deployer must use its own Reown Project ID and comply with the applicable third-party service and license terms.

Deployment

npm run build creates the deployable static site in dist/. Upload the contents of dist/ to the root of your static host or web server. Environment variables are embedded at build time, so rebuild the application whenever deployment values change.

The application uses browser-side routing. The host must serve /index.html for every request that does not match a real file. The included public/_redirects provides this fallback on hosts that support the _redirects format. For Nginx, the equivalent rule is:

location / {
  try_files $uri $uri/ /index.html;
}

The current build uses root-relative URLs and is intended to run at the origin root, such as https://example.com/. Deployment under a subdirectory such as https://example.com/swinghook/ is not supported without changing the Vite base path and router configuration.

Commands

• npm run dev starts the development server.
• npm run check runs source/test gates without validating .env.local.
• npm run config:check validates the actual production-mode deployer environment without printing configured values.
• npm run build runs config:check first, then creates the production bundle in dist/.
• npm run preview serves a previously built bundle for local inspection.

Mainnet risk warning

Mainnet transactions use real assets and are irreversible once confirmed. Verify the selected network, official deployment manifest, amounts, approvals, slippage, fees, and wallet prompts before signing. Start with small amounts and use the application at your own risk.

License

The project code is licensed under the MIT License. Third-party components remain subject to their own terms; see Third-Party Notices, including the bundled Reown AppKit and WalletKit license agreements. The same legal files are copied into every production build under /legal/.