Summary
Allow circle creators to choose which token to use for deposits when creating a new savings circle. Currently the token is not exposed in the creation UI — the underlying contract supports it but the frontend doesn't surface it.
Background
The SavingCircles contract stores a token address in each Circle struct and validates it against the allowedTokens allowlist at creation time. The frontend currently passes a hardcoded token (BREAD) without letting the creator choose. With EUR support coming, creators need to be able to choose between at least BREAD (USD) and EURe (EUR).
Desired UX
- Circle creation form gains a "Deposit token" field — a dropdown/selector showing all allowed tokens (with icon, symbol, approximate fiat value).
- Balance check: warn the creator if they don't hold the selected token before proceeding.
- Circle detail page: displays the token being used (symbol + icon) next to deposit amounts, rather than assuming BREAD everywhere.
- Member deposit flow: uses the circle's stored token when prompting for approval and deposit.
Tasks
- Fetch the list of allowed tokens from the contract (via
isTokenAllowed() or an allowlist subgraph/multicall) rather than hardcoding
- Build a
TokenSelector component (dropdown with icon + symbol + balance)
- Wire
TokenSelector into the circle creation form; pass chosen token to createCircle()
- Update circle detail page to read
circle.token and display the correct symbol/icon
- Update deposit approval flow to use the circle's actual token address
- Update amount formatting to respect token decimals (important for USDC's 6 decimals vs. EURe's 18)
Notes
- The
useStackSupabase / Supabase metadata layer may need a token field added to the circle metadata if not already present.
- Consider showing the fiat equivalent (e.g., "50 EURe ≈ €50") using a simple price feed or hardcoded 1:1 for pegged stables.
Related
Summary
Allow circle creators to choose which token to use for deposits when creating a new savings circle. Currently the token is not exposed in the creation UI — the underlying contract supports it but the frontend doesn't surface it.
Background
The
SavingCirclescontract stores atokenaddress in eachCirclestruct and validates it against theallowedTokensallowlist at creation time. The frontend currently passes a hardcoded token (BREAD) without letting the creator choose. With EUR support coming, creators need to be able to choose between at least BREAD (USD) and EURe (EUR).Desired UX
Tasks
isTokenAllowed()or an allowlist subgraph/multicall) rather than hardcodingTokenSelectorcomponent (dropdown with icon + symbol + balance)TokenSelectorinto the circle creation form; pass chosen token tocreateCircle()circle.tokenand display the correct symbol/iconNotes
useStackSupabase/ Supabase metadata layer may need atokenfield added to the circle metadata if not already present.Related