Add new regression tests for React SDK

[luans-qa]

Description

• Add new test scenarios for the e2e spec file.

Chains / chain architectures tested

EVM	Base Sepolia (base-sepolia)	Email + Phone signer
Solana Devnet (solana) Email + Phone signer
Stellar Testnet (stellar) Email signer only

Flows covered

1. Wallet creation/authentication

• E2E: Same flow for every TEST_CONFIGURATION (EVM email/phone, Solana email/phone, Stellar email). Asserts:
• UI shows “Wallets Quickstart”.
• Wallet address is returned and visible (EVM 0x42, Solana 32–44 chars, Stellar G/C 56 chars).

2. Balance API

• Smoke: Fetch balances via SDK — native token (ETH), USDXM, and tokens array; amounts/symbols and numeric format.
• E2E: “Display wallet balances correctly” for each config:
• Native token (ETH / SOL / XLM) and USDXM visible in UI.
• getWalletBalances() returns nativeToken and usdxm with amount/symbol; native symbol matches chain.

3. Sending transactions (transfer)

• E2E: Same flow for all configs:
• Fund wallet (faucet).
• Transfer to chain-specific recipient (EVM / Solana / Stellar).
• Handle signer confirmation (e.g. email OTP) when required.

4. Prepared transaction (create + approve)

• E2E: Same for all configs:
• Fund wallet.
• Create prepared transaction (recipient = chain-specific test address, amount 10, token usdxm).
• Approve by ID (with signer confirmation if needed).
• Assert approval result and that result text mentions “transaction”.

Test plan

All tests should work

Package updates

---

[albertoelias-crossmint]

looks good, left some comments

[greptile-apps]

_{1 file reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

Additional Comments (1)

apps/wallets/quickstart-devkit/e2e/helpers/wallet.ts
Console log message says "Failed" but uses success emoji ✅ - should use ❌ or ⚠️

        console.log("⚠️ Failed to get wallet balance, retrying...");

Prompt To Fix With AI

This is a comment left during a code review.
Path: apps/wallets/quickstart-devkit/e2e/helpers/wallet.ts
Line: 76:76

Comment:
Console log message says "Failed" but uses success emoji ✅ - should use ❌ or ⚠️

```suggestion
        console.log("⚠️ Failed to get wallet balance, retrying...");
```

How can I resolve this? If you propose a fix, please make it concise.

[greptile-apps]

_{11 files reviewed, 2 comments}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

Additional Comments (1)

apps/wallets/quickstart-devkit/components/balance.tsx
Redundant ternary — both branches are identical
After the refactor from USDC to USDXM, the Stellar and non-Stellar branches (lines 66-92) now render exactly the same JSX. The wallet?.chain === "stellar" ternary can be collapsed into a single block:

            <div className="flex justify-between items-center">
                <div className="flex items-center gap-2">
                    <Image src="/usdc.svg" alt="USDXM" width={24} height={24} />
                    <p className="font-medium">USDXM</p>
                </div>
                <div className="text-gray-700 font-medium" data-testid="usdxm-balance">
                    ${" "}
                    {formatBalance(
                        balances?.tokens?.find((t) => t.symbol?.toLowerCase() === "usdxm")?.amount ?? "0"
                    )}
                </div>
            </div>

Prompt To Fix With AI

This is a comment left during a code review.
Path: apps/wallets/quickstart-devkit/components/balance.tsx
Line: 66:92

Comment:
**Redundant ternary — both branches are identical**
After the refactor from USDC to USDXM, the Stellar and non-Stellar branches (lines 66-92) now render exactly the same JSX. The `wallet?.chain === "stellar"` ternary can be collapsed into a single block:

```suggestion
            <div className="flex justify-between items-center">
                <div className="flex items-center gap-2">
                    <Image src="/usdc.svg" alt="USDXM" width={24} height={24} />
                    <p className="font-medium">USDXM</p>
                </div>
                <div className="text-gray-700 font-medium" data-testid="usdxm-balance">
                    ${" "}
                    {formatBalance(
                        balances?.tokens?.find((t) => t.symbol?.toLowerCase() === "usdxm")?.amount ?? "0"
                    )}
                </div>
            </div>
```

How can I resolve this? If you propose a fix, please make it concise.

[devin-ai-integration]

Devin Review found 3 potential issues.

View 6 additional findings in Devin Review.

[alberto-crossmint]

Can you specify in the PR description what are we adding tests for and which chains? 🙏

[greptile-apps]

_{11 files reviewed, 2 comments}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

Additional Comments (2)

apps/wallets/quickstart-devkit/components/approval-test.tsx
Stellar wallets misclassified as EVM

Now that Stellar is included in TEST_CONFIGURATIONS, these boolean checks cause problems for Stellar wallets. When wallet?.chain === "stellar", isEVMWallet is true and isSolanaWallet is false. This means:

1. The token select defaults to "eth" (line 16) instead of a Stellar-appropriate token
2. The recipient placeholder shows "0x..." (line 233) instead of a Stellar address format
3. isValidAddress (line 35) uses EVM's isAddress(), which rejects valid Stellar addresses like CANKOZR2...

The e2e test "should create and approve a prepared transaction" now runs against Stellar configs and passes a Stellar recipient address. When the component calls handleCreatePreparedTransaction, isValidAddress will return false, causing the transaction to fail with "Invalid recipient address."

Consider adding a Stellar check:

const isEVMWallet = wallet?.chain !== "solana" && wallet?.chain !== "stellar";
const isSolanaWallet = wallet?.chain === "solana";
const isStellarWallet = wallet?.chain === "stellar";

Prompt To Fix With AI

This is a comment left during a code review.
Path: apps/wallets/quickstart-devkit/components/approval-test.tsx
Line: 11:12

Comment:
**Stellar wallets misclassified as EVM**

Now that Stellar is included in `TEST_CONFIGURATIONS`, these boolean checks cause problems for Stellar wallets. When `wallet?.chain === "stellar"`, `isEVMWallet` is `true` and `isSolanaWallet` is `false`. This means:

1. The token select defaults to `"eth"` (line 16) instead of a Stellar-appropriate token
2. The recipient placeholder shows `"0x..."` (line 233) instead of a Stellar address format
3. `isValidAddress` (line 35) uses EVM's `isAddress()`, which rejects valid Stellar addresses like `CANKOZR2...`

The e2e test `"should create and approve a prepared transaction"` now runs against Stellar configs and passes a Stellar recipient address. When the component calls `handleCreatePreparedTransaction`, `isValidAddress` will return `false`, causing the transaction to fail with "Invalid recipient address."

Consider adding a Stellar check:
```
const isEVMWallet = wallet?.chain !== "solana" && wallet?.chain !== "stellar";
const isSolanaWallet = wallet?.chain === "solana";
const isStellarWallet = wallet?.chain === "stellar";
```

How can I resolve this? If you propose a fix, please make it concise.

---

apps/wallets/quickstart-devkit/components/balance.tsx
Stellar/non-Stellar branches are now identical

After the changes, both the wallet?.chain === "stellar" branch (lines 67-78) and the else branch (lines 79-91) render the exact same JSX — same alt text, same label, same data-testid, and same balance lookup logic. The ternary is unnecessary and can be simplified to a single block.

                <div className="flex justify-between items-center">
                    <div className="flex items-center gap-2">
                        <Image src="/usdc.svg" alt="USDXM" width={24} height={24} />
                        <p className="font-medium">USDXM</p>
                    </div>
                    <div className="text-gray-700 font-medium" data-testid="usdxm-balance">
                        ${" "}
                        {formatBalance(
                            balances?.tokens?.find((t) => t.symbol?.toLowerCase() === "usdxm")?.amount ?? "0"
                        )}
                    </div>
                </div>

Prompt To Fix With AI

This is a comment left during a code review.
Path: apps/wallets/quickstart-devkit/components/balance.tsx
Line: 66:92

Comment:
**Stellar/non-Stellar branches are now identical**

After the changes, both the `wallet?.chain === "stellar"` branch (lines 67-78) and the `else` branch (lines 79-91) render the exact same JSX — same alt text, same label, same `data-testid`, and same balance lookup logic. The ternary is unnecessary and can be simplified to a single block.

```suggestion
                <div className="flex justify-between items-center">
                    <div className="flex items-center gap-2">
                        <Image src="/usdc.svg" alt="USDXM" width={24} height={24} />
                        <p className="font-medium">USDXM</p>
                    </div>
                    <div className="text-gray-700 font-medium" data-testid="usdxm-balance">
                        ${" "}
                        {formatBalance(
                            balances?.tokens?.find((t) => t.symbol?.toLowerCase() === "usdxm")?.amount ?? "0"
                        )}
                    </div>
                </div>
```

How can I resolve this? If you propose a fix, please make it concise.

[alberto-crossmint]

From the PR description:

Solana Mainnet (solana) Email + Phone signer
Stellar Mainnet (stellar) Email signer only

I guess it's

Solana Devnet (solana) Email + Phone signer
Stellar Testnet (stellar) Email signer only

??

[luans-qa]

From the PR description:

Solana Mainnet (solana) Email + Phone signer
Stellar Mainnet (stellar) Email signer only

I guess it's

Solana Devnet (solana) Email + Phone signer
Stellar Testnet (stellar) Email signer only

??

Yes, you are correct, just typo, I fixed it