Skip to content

Conversation

@hernan-clich
Copy link
Member

@hernan-clich hernan-clich commented Oct 31, 2025

Todos

Summary

Added Sui Testnet integration to the Hello example frontend, enabling users to send cross-chain messages from Sui to ZetaChain using Dynamic Labs wallet connectivity.

Key Changes

Sui Chain Configuration

  • Added Sui Testnet (chainId 103) to supported chains
  • Added 'SUI' to supported chain types
  • Configured Suiscan explorer integration
  • Mapped Dynamic Labs network ID '502' to Sui Testnet

Transaction Handling

  • Implemented handleSuiCall() function using wallet-agnostic approach
  • Integrated @zetachain/toolkit/chains/sui for transaction building
  • Integrated @zetachain/wallet/sui for wallet client extraction

Code Cleanup

  • Removed unused chain logo SVG files (285 lines)
  • Removed icon property from chain configuration (no longer needed)

Implementation Details

Transaction Flow:

  1. Extract typed Sui wallet and client using getSuiWallet() and getSuiWalletClient()
  2. Build unsigned transaction using prepareSuiDepositAndCall() from toolkit
  3. Sign transaction with user's wallet adapter (Universal Sign In)
  4. Execute signed transaction via SuiClient.executeTransactionBlock()

Summary by CodeRabbit

  • New Features

    • Added Sui blockchain and Sui Testnet support for wallet connectivity and transaction execution.
    • Extended network selector to include SUI chain type alongside existing supported networks.
  • Style

    • Removed icon display from chain selector dropdown options.

@hernan-clich hernan-clich requested a review from a team as a code owner October 31, 2025 16:41
@coderabbitai
Copy link
Contributor

coderabbitai bot commented Oct 31, 2025

📝 Walkthrough

Walkthrough

This PR adds Sui blockchain support to the example frontend application by extending chain type definitions to include 'SUI', updating chain configuration with Sui Testnet, integrating SUI wallet handling into the connected content component, and implementing the SUI deposit-and-call transaction flow in the transaction handling hook.

Changes

Cohort / File(s) Summary
Sui Chain Support Configuration
examples/hello/frontend/src/constants/chains.ts
Extended SupportedChain interface to include 'SUI' as a chainType variant. Removed icon property from the interface and all existing chain entries. Added new Sui Testnet entry with explorer URL, name 'Sui Testnet', chainId 103, chainType 'SUI', and color code '#4DA2FF'.
Ui Components - Sui Integration
examples/hello/frontend/src/components/NetworkSelector.tsx, examples/hello/frontend/src/ConnectedContent.tsx, examples/hello/frontend/src/DynamicAppContent.tsx
Updated NetworkSelector chain filtering to include SUI when dynamic wallet is enabled and removed icon property from DropdownOption objects. Added SUI wallet ID retrieval from userWallets in ConnectedContent and exposed it in the memoized walletIds mapping. Added conditional mapping in DynamicAppContent to map network '502' to chainId 103.
Transaction Handling - Sui Support
examples/hello/frontend/src/hooks/useHandleCall.ts
Introduced internal function handleSuiCall to orchestrate the Sui deposit-and-call transaction flow, including wallet signature confirmation and transaction execution via walletClient.executeTransactionBlock. Integrated SUI path into the main handleCall flow with enforcement that primaryWallet is provided.

Sequence Diagram(s)

sequenceDiagram
    participant App
    participant HandleCall as useHandleCall
    participant Sui as SUI Handler
    participant WalletClient

    App->>HandleCall: handleCall (walletType: 'SUI')
    HandleCall->>Sui: handleSuiCall()
    
    rect rgba(77, 162, 255, 0.1)
        Sui->>Sui: prepareSuiDepositAndCall()
        Sui->>Sui: onSigningStart callback
        Sui->>WalletClient: signAndExecuteTransactionBlock()
        WalletClient-->>Sui: signature + txHash
        Sui->>Sui: onTransactionSubmitted callback
        Sui->>Sui: onTransactionConfirmed callback
    end
    
    Sui-->>HandleCall: result
    HandleCall-->>App: completion
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

  • Transaction flow implementation: The new handleSuiCall function requires careful verification of the deposit, signing, and execution sequence to ensure consistency with existing EVM and SOL patterns and proper callback invocation order.
  • Configuration consistency: Verify that all chain configuration changes (icon removal, SUI addition) are applied uniformly across all files and that chainId 103 mapping in DynamicAppContent aligns with the Sui Testnet configuration.
  • Wallet type handling: Confirm that the SUI path enforces primaryWallet requirement correctly and that the walletIds mapping in ConnectedContent properly handles cases where SUI wallet may not be present.

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)
Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 75.00% which is insufficient. The required threshold is 80.00%. You can run @coderabbitai generate docstrings to improve docstring coverage.
✅ Passed checks (2 passed)
Check name Status Explanation
Title Check ✅ Passed The PR title "[BLOCKED] feat: Add Sui support" directly corresponds to the primary objective of the changeset. The modifications across five files—ConnectedContent.tsx, DynamicAppContent.tsx, NetworkSelector.tsx, chains.ts, and useHandleCall.ts—are collectively focused on integrating Sui blockchain support into the application. The title concisely captures this scope without unnecessary detail, and a developer reviewing commit history would immediately understand that this PR introduces Sui as a new supported blockchain. The title is specific and avoids vague terminology.
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch feat/add-sui-support

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (2)
examples/hello/frontend/src/hooks/useHandleCall.ts (1)

127-162: Consider parameterizing hardcoded values.

The hardcoded amount: '0.001' (line 145) and chainId: '103' (line 147) reduce flexibility. Consider:

  • Deriving chainId from supportedChain.chainId (passed via the parent hook's context)
  • Making amount configurable through CallParams or UseHandleCallParams

This would align with the parameterized approach used in handleEvmCall and improve maintainability.

Apply this diff to parameterize the values:

 async function handleSuiCall(
   callParams: CallParams,
   primaryWallet: PrimaryWallet,
+  chainId: string,
   callbacks: {
     onSigningStart?: UseHandleCallParams['onSigningStart'];
     onTransactionSubmitted?: UseHandleCallParams['onTransactionSubmitted'];
     onTransactionConfirmed?: UseHandleCallParams['onTransactionConfirmed'];
   }
 ): Promise<void> {
   const suiWallet = getSuiWallet(primaryWallet);
   const walletClient = await getSuiWalletClient(primaryWallet);

   callbacks.onSigningStart?.();

   const { transaction } = await prepareSuiDepositAndCall(
     { ...callParams, amount: '0.001' },
     {
-      chainId: '103',
+      chainId,
     }
   );

Then update the call site at line 323:

-        await handleSuiCall(callParams, primaryWallet, callbacks);
+        await handleSuiCall(
+          callParams,
+          primaryWallet,
+          String(supportedChain.chainId),
+          callbacks
+        );
examples/hello/frontend/src/DynamicAppContent.tsx (1)

22-24: Add inline documentation for consistency with the Solana mapping.

The network identifier '502' correctly maps to chainId 103 (Sui Testnet), consistent with the supported chains defined in the codebase. However, to match the documentation pattern established on line 17 for Solana, add an inline comment explaining the Sui network mapping:

    // Sui Testnet id from `network` property
    if (network === '502') {
      return 103;
    }
📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

  • Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 3c74e59 and 704f447.

⛔ Files ignored due to path filters (7)
  • examples/hello/frontend/public/logos/arbitrum-logo.svg is excluded by !**/*.svg
  • examples/hello/frontend/public/logos/avalanche-logo.svg is excluded by !**/*.svg
  • examples/hello/frontend/public/logos/base-logo.svg is excluded by !**/*.svg
  • examples/hello/frontend/public/logos/bsc-logo.svg is excluded by !**/*.svg
  • examples/hello/frontend/public/logos/ethereum-logo.svg is excluded by !**/*.svg
  • examples/hello/frontend/public/logos/network-placeholder-logo.svg is excluded by !**/*.svg
  • examples/hello/frontend/public/logos/polygon-logo.svg is excluded by !**/*.svg
📒 Files selected for processing (5)
  • examples/hello/frontend/src/ConnectedContent.tsx (1 hunks)
  • examples/hello/frontend/src/DynamicAppContent.tsx (1 hunks)
  • examples/hello/frontend/src/components/NetworkSelector.tsx (1 hunks)
  • examples/hello/frontend/src/constants/chains.ts (2 hunks)
  • examples/hello/frontend/src/hooks/useHandleCall.ts (3 hunks)
🧰 Additional context used
🧠 Learnings (5)
📓 Common learnings
Learnt from: hernan-clich
Repo: zeta-chain/example-contracts PR: 280
File: examples/hello/frontend/src/App.tsx:8-9
Timestamp: 2025-09-17T20:09:36.410Z
Learning: In the zeta-chain/example-contracts repository, commit c9e419c6c8d6f045b06b2ba94c3c9f9b4ab05d0f addressed a runtime issue by splitting AppContent.tsx into DynamicAppContent.tsx and Eip6963AppContent.tsx components, providing better separation of concerns between dynamic wallet and EIP-6963 wallet implementations.
Learnt from: hernan-clich
Repo: zeta-chain/example-contracts PR: 280
File: examples/hello/frontend/src/utils/ethersHelpers.ts:1-6
Timestamp: 2025-09-18T17:59:04.889Z
Learning: Commit 1c6cffd3d29499bf0544987a9116c7c6571ff895 in zeta-chain/example-contracts resolves the noble/hashes esbuild build failure by adding resolutions for "noble/hashes": "1.8.0" and "noble/curves": "1.9.7" to examples/hello/frontend/package.json.
Learnt from: hernan-clich
Repo: zeta-chain/example-contracts PR: 297
File: examples/hello/frontend/src/Eip6963AppContent.tsx:19-24
Timestamp: 2025-10-17T15:57:52.849Z
Learning: In the zeta-chain/example-contracts repository's Eip6963AppContent.tsx, the useEffect synchronization pattern `if (walletChain?.chainType === 'EVM')` before calling `setSelectedChain(walletChain)` is intentional for multi-wallet architecture: it syncs selectedChain with EIP-6963 wallet state only for EVM chains, preventing automatic overwrites when users manually select non-EVM chains (BTC/SOL) via onChainSelect callback, since EIP-6963 wallets remain on EVM chains and don't natively switch to non-EVM chains.
Learnt from: hernan-clich
Repo: zeta-chain/example-contracts PR: 276
File: examples/hello/frontend/tsconfig.node.json:16-22
Timestamp: 2025-07-28T19:20:39.900Z
Learning: The user hernan-clich prefers to reference previous discussions when the same issue appears in multiple files, indicating a preference for consistent resolution approaches across similar configuration files.
📚 Learning: 2025-10-17T15:57:52.849Z
Learnt from: hernan-clich
Repo: zeta-chain/example-contracts PR: 297
File: examples/hello/frontend/src/Eip6963AppContent.tsx:19-24
Timestamp: 2025-10-17T15:57:52.849Z
Learning: In the zeta-chain/example-contracts repository's Eip6963AppContent.tsx, the useEffect synchronization pattern `if (walletChain?.chainType === 'EVM')` before calling `setSelectedChain(walletChain)` is intentional for multi-wallet architecture: it syncs selectedChain with EIP-6963 wallet state only for EVM chains, preventing automatic overwrites when users manually select non-EVM chains (BTC/SOL) via onChainSelect callback, since EIP-6963 wallets remain on EVM chains and don't natively switch to non-EVM chains.

Applied to files:

  • examples/hello/frontend/src/components/NetworkSelector.tsx
  • examples/hello/frontend/src/hooks/useHandleCall.ts
  • examples/hello/frontend/src/ConnectedContent.tsx
  • examples/hello/frontend/src/constants/chains.ts
  • examples/hello/frontend/src/DynamicAppContent.tsx
📚 Learning: 2025-09-17T20:09:36.410Z
Learnt from: hernan-clich
Repo: zeta-chain/example-contracts PR: 280
File: examples/hello/frontend/src/App.tsx:8-9
Timestamp: 2025-09-17T20:09:36.410Z
Learning: In the zeta-chain/example-contracts repository, commit c9e419c6c8d6f045b06b2ba94c3c9f9b4ab05d0f addressed a runtime issue by splitting AppContent.tsx into DynamicAppContent.tsx and Eip6963AppContent.tsx components, providing better separation of concerns between dynamic wallet and EIP-6963 wallet implementations.

Applied to files:

  • examples/hello/frontend/src/components/NetworkSelector.tsx
  • examples/hello/frontend/src/hooks/useHandleCall.ts
  • examples/hello/frontend/src/ConnectedContent.tsx
  • examples/hello/frontend/src/constants/chains.ts
  • examples/hello/frontend/src/DynamicAppContent.tsx
📚 Learning: 2025-09-18T17:59:04.889Z
Learnt from: hernan-clich
Repo: zeta-chain/example-contracts PR: 280
File: examples/hello/frontend/src/utils/ethersHelpers.ts:1-6
Timestamp: 2025-09-18T17:59:04.889Z
Learning: Commit 1c6cffd3d29499bf0544987a9116c7c6571ff895 in zeta-chain/example-contracts resolves the noble/hashes esbuild build failure by adding resolutions for "noble/hashes": "1.8.0" and "noble/curves": "1.9.7" to examples/hello/frontend/package.json.

Applied to files:

  • examples/hello/frontend/src/constants/chains.ts
  • examples/hello/frontend/src/DynamicAppContent.tsx
📚 Learning: 2025-09-18T18:00:10.177Z
Learnt from: hernan-clich
Repo: zeta-chain/example-contracts PR: 280
File: examples/hello/frontend/src/ConnectedContent.tsx:3-10
Timestamp: 2025-09-18T18:00:10.177Z
Learning: Commit 1c6cffd3d29499bf0544987a9116c7c6571ff895 in zeta-chain/example-contracts#280 successfully resolved the noble/hashes "anumber" export error by adding resolutions in examples/hello/frontend/package.json to pin noble/hashes to 1.8.0 and noble/curves to 1.9.7, eliminating the version conflicts that were causing esbuild build failures.

Applied to files:

  • examples/hello/frontend/src/constants/chains.ts
  • examples/hello/frontend/src/DynamicAppContent.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (13)
  • GitHub Check: test (examples/token)
  • GitHub Check: test (examples/hello)
  • GitHub Check: test (examples/swap)
  • GitHub Check: test (examples/call)
  • GitHub Check: test (examples/nft)
  • GitHub Check: test (examples/hello)
  • GitHub Check: test (examples/swap)
  • GitHub Check: test (examples/token)
  • GitHub Check: test (examples/call)
  • GitHub Check: test (examples/nft)
  • GitHub Check: slither (examples/hello, hello.sarif)
  • GitHub Check: slither (examples/swap, swap.sarif)
  • GitHub Check: slither (examples/call, call.sarif)
🔇 Additional comments (6)
examples/hello/frontend/src/constants/chains.ts (2)

5-5: LGTM: chainType union correctly extended.

The addition of 'SUI' to the union type is consistent with the existing pattern and necessary for type safety across the codebase.


72-78: LGTM: Sui Testnet entry properly configured.

The new chain entry follows the established pattern and includes all necessary properties. The chainId 103 is used consistently across related files.

examples/hello/frontend/src/hooks/useHandleCall.ts (2)

8-8: LGTM: SUI wallet imports added.

The imports for SUI functionality follow the established pattern for other chain types (SOL, BTC).

Also applies to: 11-11


319-323: LGTM: SUI integration follows established pattern.

The integration properly validates that primaryWallet is provided and follows the same pattern as the SOL chain handling.

examples/hello/frontend/src/ConnectedContent.tsx (1)

39-39: LGTM: SUI wallet integration follows established pattern.

The SUI wallet retrieval and mapping are consistent with the existing SOL and EVM implementations, maintaining uniformity across chain types.

Also applies to: 44-44

examples/hello/frontend/src/components/NetworkSelector.tsx (1)

31-35: LGTM: SUI chain filtering properly integrated.

The inclusion of SUI in the dynamic wallet chain filter is consistent with the broader SUI support implementation and follows the existing pattern.

@hernan-clich hernan-clich changed the title feat: Add Sui support [BLOCKED] feat: Add Sui support Oct 31, 2025
@hernan-clich hernan-clich marked this pull request as draft October 31, 2025 16:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants