Skip to content

💄 app: implement app theme for base#1112

Open
dieguezguille wants to merge 5 commits into
mainfrom
theme
Open

💄 app: implement app theme for base#1112
dieguezguille wants to merge 5 commits into
mainfrom
theme

Conversation

@dieguezguille

@dieguezguille dieguezguille commented Jun 25, 2026

Copy link
Copy Markdown
Member

closes #1044

Summary by CodeRabbit

  • New Features

    • Added Base-specific branding and styling across the app, including card art, banners, and app theme/chrome adjustments.
    • Enhanced SVG branding support so artwork adapts to Base vs other networks.
    • Added Spanish and Portuguese translations for swap step prompts and empty states.
  • Bug Fixes

    • Improved swap token selection and filtering to reflect market assets and correct allowlisted tokens per chain.
    • Adjusted swap UI to show “Nothing to swap yet” when appropriate.
    • Fixed chain ID handling when the environment value is empty.

@changeset-bot

changeset-bot Bot commented Jun 25, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 91e36bd

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@exactly/mobile Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@coderabbitai

coderabbitai Bot commented Jun 25, 2026

Copy link
Copy Markdown

Review Change Stack

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

  • ▶️ Resume reviews
  • 🔍 Trigger review

Walkthrough

This PR adds Base-specific theme tokens, chain-aware theme selection, branded card/home rendering, and updated swap token filtering and empty-state handling with new localized copy.

Changes

Base-aware app theming

Layer / File(s) Summary
Chain and branding primitives
common/wagmi.config.ts, tamagui.config.ts, svgr.config.mjs, src/assets/images/card/svgr.config.mjs, src/assets/images/types.d.ts, tsconfig.json, .changeset/clever-crews-pay.md
Chain selection, Base token colors, brand props, SVG config, and release metadata add Base-specific asset data and component props.
Shell theme selection
src/app/+html.tsx, src/components/context/ThemeProvider.tsx, src/app/_layout.tsx, src/components/shared/Skeleton.tsx
The app shell and shared loading surface now derive dark and light behavior from the Base chain state.
Branded card and home surfaces
src/components/card/CardDetails.tsx, src/components/card/exa-card/CardContents.tsx, src/components/card/exa-card/ExaCard.tsx, src/components/home/CardStatus.tsx, src/components/home/VisaSignatureBanner.tsx, src/components/home/VisaSignatureSheet.tsx
Card and home components switch backgrounds, logos, and SVG branding props based on Base product and theme tokens.

Swap token selection

Layer / File(s) Summary
Allowlists and token filtering
src/utils/lifi.ts, src/components/swaps/SelectorModal.tsx, .changeset/true-bottles-cough.md
Chain allowlists and market data narrow selectable tokens in the swap selector.
Swap form state and empty view
src/components/swaps/Swaps.tsx, src/i18n/es-AR.json, src/i18n/es.json, src/i18n/pt.json
Swap form state now selects payable tokens, hides the form when nothing is swappable, and renders localized empty-state copy.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

  • exactly/exa#985: Both PRs modify src/components/swaps/Swaps.tsx around swap-context token handling and related UI state.

Suggested reviewers

  • franm91
  • cruzdanilo
🚥 Pre-merge checks | ✅ 3 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name Status Explanation Resolution
Linked Issues check ❓ Inconclusive The reskin looks on-scope, but src/assets/images/card/*.svg were excluded by !**/*.svg, so the no-Base-brand-assets requirement can't be verified. Review the excluded SVG assets or remove the !**/*.svg filter so Base-brand-asset usage can be confirmed.
✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title is concise and accurately describes the main change: implementing the Base app theme.
Out of Scope Changes check ✅ Passed The extra changes all support the Base theming work and don't introduce clearly unrelated scope.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch theme
✨ Simplify code
  • Create PR with simplified code
  • Commit simplified code in branch theme

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.

@gemini-code-assist

Copy link
Copy Markdown

Warning

Gemini encountered an error creating the review. You can try again by commenting /gemini review.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Actionable comments posted: 1


ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: c6706412-2a35-414b-8ab3-59a13238aaf9

📥 Commits

Reviewing files that changed from the base of the PR and between 42a3df9 and b75aa89.

⛔ Files ignored due to path filters (2)
  • src/assets/images/card-bg-base.svg is excluded by !**/*.svg
  • src/assets/images/card-signature-base.svg is excluded by !**/*.svg
📒 Files selected for processing (23)
  • .changeset/clever-crews-pay.md
  • .changeset/true-bottles-cough.md
  • app.config.ts
  • common/wagmi.config.ts
  • src/app/+html.tsx
  • src/app/_layout.tsx
  • src/assets/images/types.d.ts
  • src/components/card/CardDetails.tsx
  • src/components/card/exa-card/CardContents.tsx
  • src/components/card/exa-card/ExaCard.tsx
  • src/components/context/ThemeProvider.tsx
  • src/components/home/CardStatus.tsx
  • src/components/home/VisaSignatureBanner.tsx
  • src/components/home/VisaSignatureSheet.tsx
  • src/components/shared/Skeleton.tsx
  • src/components/swaps/SelectorModal.tsx
  • src/components/swaps/Swaps.tsx
  • src/i18n/es-AR.json
  • src/i18n/es.json
  • src/i18n/pt.json
  • src/utils/lifi.ts
  • svgr.config.cjs
  • tamagui.config.ts

Comment thread src/components/shared/Skeleton.tsx

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: b75aa89e5d

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

Comment thread svgr.config.cjs Outdated
Comment thread src/utils/lifi.ts
@codecov

codecov Bot commented Jun 25, 2026

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 62.35294% with 32 lines in your changes missing coverage. Please review.
✅ Project coverage is 73.16%. Comparing base (76a9dc4) to head (91e36bd).
✅ All tests successful. No failed tests found.

Files with missing lines Patch % Lines
src/components/shared/ThemedSvg.tsx 58.18% 23 Missing ⚠️
src/components/card/exa-card/ExaCard.tsx 50.00% 4 Missing ⚠️
src/components/card/CardDetails.tsx 66.66% 2 Missing ⚠️
src/components/card/exa-card/CardContents.tsx 33.33% 2 Missing ⚠️
src/utils/lifi.ts 66.66% 1 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main    #1112      +/-   ##
==========================================
- Coverage   73.27%   73.16%   -0.11%     
==========================================
  Files         254      255       +1     
  Lines       10839    10915      +76     
  Branches     3598     3638      +40     
==========================================
+ Hits         7942     7986      +44     
- Misses       2613     2645      +32     
  Partials      284      284              
Flag Coverage Δ
e2e 73.16% <62.35%> (-0.08%) ⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@dieguezguille

Copy link
Copy Markdown
Member Author

/gemini review

@gemini-code-assist

Copy link
Copy Markdown

Warning

Gemini encountered an error creating the review. You can try again by commenting /gemini review.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Actionable comments posted: 1


ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: 8bd2b528-af9d-4e78-8993-05c463a283fd

📥 Commits

Reviewing files that changed from the base of the PR and between b75aa89 and b9fb2ba.

📒 Files selected for processing (18)
  • .changeset/clever-crews-pay.md
  • common/wagmi.config.ts
  • src/app/+html.tsx
  • src/app/_layout.tsx
  • src/assets/images/types.d.ts
  • src/components/card/CardDetails.tsx
  • src/components/card/exa-card/CardContents.tsx
  • src/components/card/exa-card/ExaCard.tsx
  • src/components/context/ThemeProvider.tsx
  • src/components/home/CardStatus.tsx
  • src/components/home/VisaSignatureBanner.tsx
  • src/components/home/VisaSignatureSheet.tsx
  • src/components/shared/Skeleton.tsx
  • src/i18n/es-AR.json
  • src/i18n/es.json
  • src/i18n/pt.json
  • svgr.config.cjs
  • tamagui.config.ts

Comment thread tamagui.config.ts Outdated

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: b9fb2ba6c6

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

Comment thread src/components/swaps/Swaps.tsx Outdated
Comment thread src/components/context/ThemeProvider.tsx Outdated

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Actionable comments posted: 2


ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: 87cf8455-f61b-46bb-b008-36c6d6bc185f

📥 Commits

Reviewing files that changed from the base of the PR and between b9fb2ba and 7371e16.

⛔ Files ignored due to path filters (2)
  • src/assets/images/card-bg-base.svg is excluded by !**/*.svg
  • src/assets/images/card-signature-base.svg is excluded by !**/*.svg
📒 Files selected for processing (22)
  • .changeset/clever-crews-pay.md
  • .changeset/true-bottles-cough.md
  • common/wagmi.config.ts
  • src/app/+html.tsx
  • src/app/_layout.tsx
  • src/assets/images/types.d.ts
  • src/components/card/CardDetails.tsx
  • src/components/card/exa-card/CardContents.tsx
  • src/components/card/exa-card/ExaCard.tsx
  • src/components/context/ThemeProvider.tsx
  • src/components/home/CardStatus.tsx
  • src/components/home/VisaSignatureBanner.tsx
  • src/components/home/VisaSignatureSheet.tsx
  • src/components/shared/Skeleton.tsx
  • src/components/swaps/SelectorModal.tsx
  • src/components/swaps/Swaps.tsx
  • src/i18n/es-AR.json
  • src/i18n/es.json
  • src/i18n/pt.json
  • src/utils/lifi.ts
  • svgr.config.cjs
  • tamagui.config.ts

Comment thread src/utils/lifi.ts
Comment thread svgr.config.cjs Outdated

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 7371e16b30

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

Comment thread svgr.config.cjs Outdated

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

♻️ Duplicate comments (2)
src/components/shared/Skeleton.tsx (1)

7-8: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Handle compound Tamagui theme names here.

Line 8 only treats the literal "dark" as dark. useThemeName() can resolve compound names, so nested dark themes will fall back to the light skeleton variant.

src/components/card/CardDetails.tsx (1)

36-41: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Normalize the Tamagui theme name before branching on light vs dark.

Lines 36-41 switch this component to useThemeName(), but the later logo branches still rely on exact "light" checks. Compound names like "dark_*" will take the light-logo path.


ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: af8985a7-e963-4b5a-aec6-c2741157ad2e

📥 Commits

Reviewing files that changed from the base of the PR and between 7371e16 and 1787d59.

⛔ Files ignored due to path filters (5)
  • src/assets/images/card/card-bg-base.svg is excluded by !**/*.svg
  • src/assets/images/card/card-bg.svg is excluded by !**/*.svg
  • src/assets/images/card/card-signature-base.svg is excluded by !**/*.svg
  • src/assets/images/card/card-signature.svg is excluded by !**/*.svg
  • src/assets/images/card/card.svg is excluded by !**/*.svg
📒 Files selected for processing (24)
  • .changeset/clever-crews-pay.md
  • .changeset/true-bottles-cough.md
  • common/wagmi.config.ts
  • src/app/+html.tsx
  • src/app/_layout.tsx
  • src/assets/images/card/svgr.config.mjs
  • src/assets/images/types.d.ts
  • src/components/card/CardDetails.tsx
  • src/components/card/exa-card/CardContents.tsx
  • src/components/card/exa-card/ExaCard.tsx
  • src/components/context/ThemeProvider.tsx
  • src/components/home/CardStatus.tsx
  • src/components/home/VisaSignatureBanner.tsx
  • src/components/home/VisaSignatureSheet.tsx
  • src/components/shared/Skeleton.tsx
  • src/components/swaps/SelectorModal.tsx
  • src/components/swaps/Swaps.tsx
  • src/i18n/es-AR.json
  • src/i18n/es.json
  • src/i18n/pt.json
  • src/utils/lifi.ts
  • svgr.config.mjs
  • tamagui.config.ts
  • tsconfig.json

@dieguezguille
dieguezguille force-pushed the theme branch 2 times, most recently from feee0a6 to 1411a0b Compare June 26, 2026 16:17
@dieguezguille
dieguezguille force-pushed the theme branch 2 times, most recently from 2dd26d4 to 06597bf Compare July 2, 2026 14:14

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 06597bf67f

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

Comment thread src/components/swaps/Swaps.tsx

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: cab96e2d63

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

Comment thread src/components/swaps/Swaps.tsx
@dieguezguille
dieguezguille force-pushed the theme branch 3 times, most recently from b445eb6 to 3b8e0cb Compare July 3, 2026 14:41

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 3b8e0cb793

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

Comment thread .changeset/clever-crews-pay.md
Comment thread src/components/benefits/BenefitsSection.tsx
@dieguezguille
dieguezguille force-pushed the theme branch 3 times, most recently from 356e2cb to 47ffad8 Compare July 3, 2026 19:55
@dieguezguille
dieguezguille force-pushed the theme branch 4 times, most recently from 5815dc2 to e681b21 Compare July 16, 2026 20:41
@dieguezguille
dieguezguille force-pushed the theme branch 2 times, most recently from 3c58e45 to 5e892d6 Compare July 17, 2026 13:42

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 5e892d681a

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

Comment thread src/components/benefits/BenefitsSection.tsx Outdated
@dieguezguille
dieguezguille force-pushed the theme branch 2 times, most recently from 8efdd90 to 278c52d Compare July 17, 2026 15:40
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.

ui: base exa app ui

1 participant