How aruku-interactive/ifm-poc works
This starter dApp’s user workflow begins in the React app, which configures Algorand wallet/network access and presents wallet connection, payment, ASA creation, NFT minting, and Hello World contract demos. The NFT flow additionally uploads media through a backend to Pinata/IPFS before creating an on-chain asset. Source excerpts establish the frontend composition and several calls; README documents capabilities not otherwise detailed. The NFT server and network endpoints are shown as integrations, but their internal request behavior is not fully evidenced here.
Main entry points: Home.tsx Feature dashboard · getAlgoClientConfigs.ts Network configuration · App.tsx App shell · AppCalls.tsx Contract interaction
Components 18
Frontend experience
- React bootstrap
QuickStartTemplate/projects/QuickStartTemplate-frontend/src/main.tsx - App shell
QuickStartTemplate/projects/QuickStartTemplate-frontend/src/App.tsx - Feature dashboard
QuickStartTemplate/projects/QuickStartTemplate-frontend/src/Home.tsx
Wallet and network
- Wallet connection
QuickStartTemplate/projects/QuickStartTemplate-frontend/src/components/ConnectWallet.tsx - Account display
QuickStartTemplate/projects/QuickStartTemplate-frontend/src/components/Account.tsx - Network configuration
QuickStartTemplate/projects/QuickStartTemplate-frontend/src/utils/network/getAlgoClientConfigs.ts - Network config types
QuickStartTemplate/projects/QuickStartTemplate-frontend/src/interfaces/network.ts
Asset operations
- ALGO/USDC payments
QuickStartTemplate/projects/QuickStartTemplate-frontend/src/components/Transact.tsx - ASA creation
QuickStartTemplate/projects/QuickStartTemplate-frontend/src/components/Tokenmint.tsx - NFT minting
QuickStartTemplate/projects/QuickStartTemplate-frontend/src/components/NFTmint.tsx
Contract demo
- Contract interaction
QuickStartTemplate/projects/QuickStartTemplate-frontend/src/components/AppCalls.tsx - Hello World client
QuickStartTemplate/projects/QuickStartTemplate-frontend/src/contracts/HelloWorld.ts - Hello World contract
QuickStartTemplate/projects/QuickStartTemplate-contracts/smart_contracts/hello_world/contract.algo.ts - Generated app client
QuickStartTemplate/projects/QuickStartTemplate-contracts/smart_contracts/artifacts/hello_world/HelloWorldClient.ts
NFT metadata service
- NFT upload server
QuickStartTemplate/projects/QuickStartTemplate-contracts/nft_mint_server/server.js
Other components
- dApp user
- Algorand network
- Pinata/IPFS
Connections 25
- dApp user → React bootstrap: opens app
QuickStartTemplate/projects/QuickStartTemplate-frontend/src/main.tsx - React bootstrap → App shell: renders
QuickStartTemplate/projects/QuickStartTemplate-frontend/src/main.tsx - App shell → Feature dashboard: renders
QuickStartTemplate/projects/QuickStartTemplate-frontend/src/App.tsx - App shell → Network configuration: loads settings
QuickStartTemplate/projects/QuickStartTemplate-frontend/src/App.tsx - App shell → Algorand network: configures wallet access
- Feature dashboard → Wallet connection: presents
QuickStartTemplate/projects/QuickStartTemplate-frontend/src/Home.tsx - Feature dashboard → ALGO/USDC payments: opens
QuickStartTemplate/projects/QuickStartTemplate-frontend/src/Home.tsx - Feature dashboard → ASA creation: opens
QuickStartTemplate/projects/QuickStartTemplate-frontend/src/Home.tsx - Feature dashboard → NFT minting: opens
QuickStartTemplate/projects/QuickStartTemplate-frontend/src/Home.tsx - Feature dashboard → Contract interaction: opens
QuickStartTemplate/projects/QuickStartTemplate-frontend/src/Home.tsx - Wallet connection → Account display: renders
QuickStartTemplate/projects/QuickStartTemplate-frontend/src/components/ConnectWallet.tsx - Account display → Network configuration: reads settings
QuickStartTemplate/projects/QuickStartTemplate-frontend/src/components/Account.tsx - Network configuration → Network config types: uses types
QuickStartTemplate/projects/QuickStartTemplate-frontend/src/utils/network/getAlgoClientConfigs.ts - ALGO/USDC payments → Network configuration: loads endpoint config
QuickStartTemplate/projects/QuickStartTemplate-frontend/src/components/Transact.tsx - ALGO/USDC payments → Algorand network: sends payment
- ASA creation → Network configuration: loads endpoint config
QuickStartTemplate/projects/QuickStartTemplate-frontend/src/components/Tokenmint.tsx - ASA creation → Algorand network: creates asset
- NFT minting → NFT upload server: uploads media
QuickStartTemplate/projects/QuickStartTemplate-frontend/src/components/NFTmint.tsx - NFT upload server → Pinata/IPFS: stores metadata
- NFT minting → Algorand network: creates asset
- Contract interaction → Network configuration: loads clients
QuickStartTemplate/projects/QuickStartTemplate-frontend/src/components/AppCalls.tsx - Contract interaction → Hello World client: instantiates factory
QuickStartTemplate/projects/QuickStartTemplate-frontend/src/components/AppCalls.tsx - Hello World client → Generated app client: delegates app calls
- Contract interaction → Algorand network: deploys and calls
QuickStartTemplate/projects/QuickStartTemplate-frontend/src/components/AppCalls.tsx - Generated app client → Hello World contract: targets contract