Skip to content

feat: improve affiliate onboarding copy#7637

Merged
kernelwhisperer merged 2 commits into
developfrom
feat/improve-affiliate-copy
Jun 15, 2026
Merged

feat: improve affiliate onboarding copy#7637
kernelwhisperer merged 2 commits into
developfrom
feat/improve-affiliate-copy

Conversation

@kernelwhisperer

@kernelwhisperer kernelwhisperer commented Jun 10, 2026

Copy link
Copy Markdown
Contributor

Summary

Fixes https://nomevlabs.slack.com/archives/C07BMTK4F19/p1780912787999709

Improves affiliate referral modal copy so referred traders understand they are activating a shared reward code, not creating their own affiliate link.

Also includes fix commit 4b62838, which prevents a race in auto-verifying a URL referral code before the input state is populated.

To Test

  1. Open Swap with /?ref=COWBOY
  • Modal says You've been referred - here's your reward
  • Disconnected CTA says Connect wallet to activate
  • After connecting, the URL code remains populated and verifies without an empty-code format error

Background

Old copy made the referred-trader flow look like affiliate-code creation.

Before & after:
Screenshot From 2026-06-10 14-56-55 Screenshot From 2026-06-10 15-40-49

Summary by CodeRabbit

Release Notes

  • New Features

    • Updated referral modal messaging to reflect “You’ve been referred—here’s your reward”, including clearer reward timing and earning call-to-actions.
    • Improved referral code linking subtitles to show the right instruction depending on whether a wallet is connected.
  • Bug Fixes

    • Prevented automatic referral code verification from running unless a wallet is connected and a referral code has been entered.

@kernelwhisperer kernelwhisperer requested a review from a team June 10, 2026 12:46
@kernelwhisperer kernelwhisperer self-assigned this Jun 10, 2026
@cloudflare-workers-and-pages

cloudflare-workers-and-pages Bot commented Jun 10, 2026

Copy link
Copy Markdown

Deploying swap-dev with  Cloudflare Pages  Cloudflare Pages

Latest commit: 72ae64b
Status: ✅  Deploy successful!
Preview URL: https://ce069544.swap-dev-5u6.pages.dev
Branch Preview URL: https://feat-improve-affiliate-copy.swap-dev-5u6.pages.dev

View logs

@vercel

vercel Bot commented Jun 10, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
cowfi Ready Ready Preview Jun 15, 2026 1:35pm
explorer-dev Ready Ready Preview Jun 15, 2026 1:35pm
storybook Ready Ready Preview Jun 15, 2026 1:35pm
swap-dev Ready Ready Preview Jun 15, 2026 1:35pm
widget-configurator Ready Ready Preview Jun 15, 2026 1:35pm
2 Skipped Deployments
Project Deployment Actions Updated (UTC)
cosmos Ignored Ignored Jun 15, 2026 1:35pm
sdk-tools Ignored Ignored Preview Jun 15, 2026 1:35pm

Request Review

@coderabbitai

coderabbitai Bot commented Jun 10, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: dca4a924-37af-4aac-bf82-f40ff1efc0d8

📥 Commits

Reviewing files that changed from the base of the PR and between 50da32f and 72ae64b.

📒 Files selected for processing (6)
  • apps/cowswap-frontend/src/locales/en-US.po
  • apps/cowswap-frontend/src/modules/affiliate/containers/AffiliateTraderModalCodeLinking.tsx
  • apps/cowswap-frontend/src/modules/affiliate/containers/AffiliateTraderModalUnsupported.tsx
  • apps/cowswap-frontend/src/modules/affiliate/hooks/useAffiliateTraderCodeInput.ts
  • apps/cowswap-frontend/src/modules/affiliate/pure/AffiliateTraderModal/AffiliateTradeCodeForm.tsx
  • apps/cowswap-frontend/src/modules/affiliate/pure/AffiliateTraderModal/CodeLinkingSubtitle.tsx
✅ Files skipped from review due to trivial changes (1)
  • apps/cowswap-frontend/src/modules/affiliate/hooks/useAffiliateTraderCodeInput.ts
🚧 Files skipped from review as they are similar to previous changes (5)
  • apps/cowswap-frontend/src/modules/affiliate/containers/AffiliateTraderModalCodeLinking.tsx
  • apps/cowswap-frontend/src/modules/affiliate/containers/AffiliateTraderModalUnsupported.tsx
  • apps/cowswap-frontend/src/modules/affiliate/pure/AffiliateTraderModal/AffiliateTradeCodeForm.tsx
  • apps/cowswap-frontend/src/modules/affiliate/pure/AffiliateTraderModal/CodeLinkingSubtitle.tsx
  • apps/cowswap-frontend/src/locales/en-US.po

Walkthrough

This PR updates the affiliate trader referral onboarding flow with refreshed messaging and wallet-connection-aware subtitle rendering. New localization strings replace "Earn while you trade" phrasing with referral reward confirmations. The subtitle component conditionally renders onboarding copy based on wallet connection state. Auto-verification validation is tightened to reject empty code inputs.

Changes

Affiliate Trader Referral Onboarding Flow

Layer / File(s) Summary
Message catalog updates for referral flow
src/locales/en-US.po
New referral messaging strings added ("You've been referred - here's your reward", "Connect wallet to activate", "Start earning rewards when you trade", "Your friend shared a referral code", weekly payout description). Old activation strings disabled ("Swap once to activate", "Connect to verify code"). "Price impact" entry receives additional source reference.
Subtitle component contract and conditional rendering
src/modules/affiliate/pure/AffiliateTraderModal/CodeLinkingSubtitle.tsx
CodeLinkingSubtitleProps interface expanded with optional isWalletConnected flag. Component destructures this flag and implements conditional subtitle copy: displays referral-code message, branches on wallet connection state to show "Start earning rewards when you trade" (connected) or wallet-connect instructions (disconnected), then appends computed rewards description with amount and trigger volume.
Modal form and button wiring updates
src/modules/affiliate/pure/AffiliateTraderModal/AffiliateTradeCodeForm.tsx, src/modules/affiliate/containers/AffiliateTraderModalCodeLinking.tsx, src/modules/affiliate/containers/AffiliateTraderModalUnsupported.tsx
Form component passes wallet-connection state to subtitle via isWalletConnected={!!account} and updates header title to "You've been referred - here's your reward". Submit button label changes to "Connect wallet to activate" when wallet is disconnected. Unsupported modal title updated to referred-user reward confirmation message.
Auto-verification validation refinement
src/modules/affiliate/hooks/useAffiliateTraderCodeInput.ts
Auto-verify effect tightened to require both connected account and non-empty code input before verification, preventing unnecessary API calls with empty code.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Suggested reviewers

  • fairlighteth
  • Danziger
  • shoom3301

🐰 A referral flow so refined, with messages so kind,
Where wallets connect, and rewards aligned,
Your friend's code now shares the good cheer,
Trade and earn, the path is clear!

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title 'feat: improve affiliate onboarding copy' clearly and concisely summarizes the main change—updating referral modal copy to improve the referred-trader onboarding experience.
Description check ✅ Passed The PR description follows the template structure with Summary, To Test, and Background sections; includes a clear issue reference, testing checklist, and before/after screenshots.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/improve-affiliate-copy

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.

@kernelwhisperer kernelwhisperer requested review from Danziger and fairlighteth and removed request for a team June 10, 2026 12:56

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

🧹 Nitpick comments (1)
apps/cowswap-frontend/src/modules/affiliate/containers/AffiliateTraderModalUnsupported.tsx (1)

16-19: 💤 Low value

Consider passing isWalletConnected or customizing the subtitle for the unsupported-network case.

When CodeLinkingSubtitle is called without the isWalletConnected prop (line 19), it defaults to the "Connect your wallet to activate it..." message. In the unsupported-network modal, this could be misleading since the real blocker is network support, not wallet connection. Consider either passing isWalletConnected based on the actual wallet state or rendering different copy that clarifies the network limitation.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In
`@apps/cowswap-frontend/src/modules/affiliate/containers/AffiliateTraderModalUnsupported.tsx`
around lines 16 - 19, The subtitle shown in AffiliateTraderModalUnsupported is
misleading because CodeLinkingSubtitle is rendered without the isWalletConnected
prop; update AffiliateTraderModalUnsupported to either pass the actual wallet
connection state into CodeLinkingSubtitle (e.g.,
isWalletConnected={walletConnected} where walletConnected is read from your
wallet state/hook) or replace CodeLinkingSubtitle with a variant that displays
network-specific copy explaining the unsupported-network blocker so users aren’t
prompted to “connect your wallet” when the network is the issue.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In
`@apps/cowswap-frontend/src/modules/affiliate/containers/AffiliateTraderModalUnsupported.tsx`:
- Around line 16-19: The subtitle shown in AffiliateTraderModalUnsupported is
misleading because CodeLinkingSubtitle is rendered without the isWalletConnected
prop; update AffiliateTraderModalUnsupported to either pass the actual wallet
connection state into CodeLinkingSubtitle (e.g.,
isWalletConnected={walletConnected} where walletConnected is read from your
wallet state/hook) or replace CodeLinkingSubtitle with a variant that displays
network-specific copy explaining the unsupported-network blocker so users aren’t
prompted to “connect your wallet” when the network is the issue.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 79bfc11c-50d4-42d4-86e3-22a2643b60ef

📥 Commits

Reviewing files that changed from the base of the PR and between 80fd25f and 50da32f.

📒 Files selected for processing (6)
  • apps/cowswap-frontend/src/locales/en-US.po
  • apps/cowswap-frontend/src/modules/affiliate/containers/AffiliateTraderModalCodeLinking.tsx
  • apps/cowswap-frontend/src/modules/affiliate/containers/AffiliateTraderModalUnsupported.tsx
  • apps/cowswap-frontend/src/modules/affiliate/hooks/useAffiliateTraderCodeInput.ts
  • apps/cowswap-frontend/src/modules/affiliate/pure/AffiliateTraderModal/AffiliateTradeCodeForm.tsx
  • apps/cowswap-frontend/src/modules/affiliate/pure/AffiliateTraderModal/CodeLinkingSubtitle.tsx

@Danziger

Danziger commented Jun 11, 2026

Copy link
Copy Markdown
Contributor

Nitpick: "You've been referred" sounds a bit too technical I think. Usually these things are worded more like "Claim your reward", "Claim your discount" or things like that.

Also, the big paragraph could probably say the same thing with less words:

Your friend shared a referral code with you (I might actually remove this first sentence). Connect your wallet to start earning weekly rewards. Earn X per Y of elegible over the next Z days.

Also, "1 days" could handle singular/plural properly.

In my mind:

  • It's implicit that you'll earn the rewards when you trade, based on the "Earn X per Y..." sentence.
  • It's implicit that rewards are paid to my wallet, as I'm connecting it.
  • There's a link anyway with more details.

@Danziger Danziger left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Added a couple nitpicks, but approving anyway.

@kernelwhisperer kernelwhisperer enabled auto-merge (squash) June 15, 2026 13:32
@cloudflare-workers-and-pages

Copy link
Copy Markdown

Deploying explorer-dev with  Cloudflare Pages  Cloudflare Pages

Latest commit: 72ae64b
Status: ✅  Deploy successful!
Preview URL: https://c2e77035.explorer-dev-dxz.pages.dev
Branch Preview URL: https://feat-improve-affiliate-copy.explorer-dev-dxz.pages.dev

View logs

@kernelwhisperer kernelwhisperer merged commit c645fa1 into develop Jun 15, 2026
17 of 18 checks passed
@kernelwhisperer kernelwhisperer deleted the feat/improve-affiliate-copy branch June 15, 2026 13:39
@github-actions github-actions Bot locked and limited conversation to collaborators Jun 15, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants