feat: integrate proposal contract into frontend - #99
Conversation
…h wallet integration
|
@Bran18 pr ready for review |
Bran18
left a comment
Bran18
left a comment
There was a problem hiding this comment.
Great job, mate! Once again, you've delivered an impressive performance.
Let's merge this one.
There was a problem hiding this comment.
Pull Request Overview
This PR integrates the ProposalContract smart contract deployed on Stellar testnet with the frontend, enabling full governance functionality including proposal creation, voting, and real-time data fetching from the blockchain. Key changes include wallet integration using Freighter, TypeScript contract bindings, and a complete UI overhaul with new components for proposal management.
- Complete integration between frontend and Soroban smart contract on Stellar testnet
- New wallet connection system with Freighter support and transaction signing
- Updated UI components with pagination, filtering, and real-time proposal data
Reviewed Changes
Copilot reviewed 59 out of 64 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| apps/webapp/package.json | Added Stellar SDK, wallet dependencies, and replaced toast system with Sonner |
| apps/webapp/lib/contracts/proposal-contract/ | Generated TypeScript bindings and wrapper for ProposalContract |
| apps/webapp/hooks/ | New wallet integration hooks and contract interaction utilities |
| apps/webapp/components/proposals/ | Redesigned proposal components with blockchain integration |
| apps/webapp/app/proposals/ | Updated pages to use contract data instead of mock data |
| if (typeof window !== 'undefined') { | ||
| //@ts-ignore Buffer exists |
There was a problem hiding this comment.
Replace @ts-ignore with proper type declaration. Use 'window.Buffer = window.Buffer || Buffer' without the comment, or add proper type declarations for Buffer on the Window interface.
| if (typeof window !== 'undefined') { | |
| //@ts-ignore Buffer exists | |
| declare global { | |
| interface Window { | |
| Buffer: typeof Buffer | |
| } | |
| } | |
| if (typeof window !== 'undefined') { |
| // biome-ignore lint/suspicious/noExplicitAny: using `any` here to support dynamically generated contract instances | ||
| (contractInstance: any): boolean => { |
There was a problem hiding this comment.
Consider creating a proper interface for contract instances instead of using 'any'. Define a base contract interface with the expected 'client' property and signing methods to improve type safety.
| // biome-ignore lint/suspicious/noExplicitAny: using `any` here to support dynamically generated contract instances | |
| (contractInstance: any): boolean => { | |
| (contractInstance: ContractInstance): boolean => { |
| } | ||
| } | ||
|
|
||
| console.log(proposal.status.tag) |
There was a problem hiding this comment.
Remove console.log statement from production code. This appears to be debugging code that should be cleaned up.
| console.log(proposal.status.tag) | |
| // Removed unnecessary console.log statement |
| @@ -0,0 +1,276 @@ | |||
| /* eslint-disable */ | |||
There was a problem hiding this comment.
[nitpick] Instead of disabling all ESLint rules, consider using more specific disable comments for the particular rules that need to be bypassed in auto-generated code, or configure ESLint to ignore this generated file.
| /* eslint-disable */ | |
| // This file contains both auto-generated and manually written code. | |
| // eslint-disable-next-line no-undef |
| } | ||
|
|
||
| export function createProposalContract(): ProposalContract { | ||
| const contractId = process.env.NEXT_PUBLIC_CONTRACT_ID_PROPOSAL |
There was a problem hiding this comment.
Consider validating the contract ID format to ensure it's a valid Stellar contract address before using it. Invalid contract IDs could cause runtime errors or security issues.
🛠️ Issue
📖 Description
This PR introduces full integration between the Proposal page UI and the on-chain
ProposalContractdeployed on the Stellar testnet via Soroban. It enables users to create, list, view details, and vote on proposals by connecting with their wallet.A dedicated detail page was also created for individual proposals, which fetches and displays data directly from the blockchain. The user experience has been enhanced with loading skeletons and pagination support on the main proposals page.
✅ Changes Made
🔐 Contract Changes
ProposalContractto align categories/types with the frontend🔌 Contract Integration with Frontend
ProposalContractProposalContractwrapper to interact with the Soroban clientuseSorobanContracthook to manage contract execution with the walletuseProposalhook to interact with theProposalContract🧱 Proposal Page Changes
📄 Proposal Detail Page Changes
ProposalDetailSkeletonfor the loading state⚙️ General Changes
toastnotifications withsonnerpackage-lock.json)test_snapshotsfiles that were still tracked despite being ignoredapps/webapp/.env.sample🖼️ Media (screenshots/videos)
https://www.loom.com/share/e88921b7d98045e6a887ba2fa767930b?sid=a9e59d08-44f3-49f8-baa7-9c022e446f2e
📝 Additional Notes
"@stellar/stellar-sdk": "14.0.0-rc.3"because version13.3.0has bugs when interacting with contracts on the Stellar testnet.More info: stellar/js-stellar-sdk#1185