Alpend Staking UI

Next.js frontend for self-custody staking on Canton Network.

Setup

1. Install Dependencies

npm install

2. Configure Environment

Copy .env.local.example to .env.local and update:

cp .env.local.example .env.local

Required variables:

AUTH0_SECRET='[run: openssl rand -hex 32]'
AUTH0_BASE_URL='http://localhost:3000'
AUTH0_ISSUER_BASE_URL='https://dev-jc5zxsh00ctpvauz.us.auth0.com'
AUTH0_CLIENT_ID='your-spa-client-id'
AUTH0_CLIENT_SECRET='your-spa-client-secret'

NEXT_PUBLIC_API_URL='https://api.alpend.market'
NEXT_PUBLIC_POOL_CONTRACT_ID='your-pool-contract-id'
NEXT_PUBLIC_CANTON_NAMESPACE='12206d5dbed87522889b28486cea3dd6b6c1fc4b3ca156d2c4f31318710fcba57be3'

3. Auth0 Setup

In Auth0 Dashboard, create a Single Page Application:

• Allowed Callback URLs: http://localhost:3000/api/auth/callback
• Allowed Logout URLs: http://localhost:3000
• Allowed Web Origins: http://localhost:3000

4. Run Development Server

npm run dev

Open http://localhost:3000

Pages

Dashboard (/)

• View holdings and stakes
• Deposit tokens (if authorized)
• Withdraw stakes

Admin (/admin)

• View pool information
• Add stakers to pool
• View all pools

User Flow

1. User logs in via Auth0
2. Party ID derived from Auth0 ID: auth0_xxx::namespace
3. User sees their holdings and stakes
4. If authorized (in stakers list), can deposit
5. Can withdraw anytime (self-custody)

Important Notes

Pool Contract ID Changes

When you add a staker, a NEW pool contract is created. Update NEXT_PUBLIC_POOL_CONTRACT_ID with the new ID.

Party ID Format

Auth0 ID: auth0|007c68cbf15928b131ec7437b95d
Canton Party: auth0_007c68cbf15928b131ec7437b95d::12206d5dbed...

Adding Stakers

1. User logs in and sees their Party ID at bottom of dashboard
2. Admin goes to /admin
3. Admin pastes user's Party ID and clicks "Add Staker"
4. Admin updates POOL_CONTRACT_ID with new pool ID
5. User can now deposit

API Endpoints Used

Endpoint	Method	Description
/staking/holdings	GET	Get user's token holdings
/staking/stakes	GET	Get user's active stakes
/staking/pools	GET	List all pools
/staking/pool/:id	GET	Get pool details
/staking/pool/add-staker	POST	Add staker (admin)
/staking/pool/deposit	POST	Deposit tokens
/staking/stake/withdraw	POST	Withdraw stake

Production Deployment

npm run build
npm start

Update Auth0 URLs for production domain.

Alpend-UI-Demo