Skip to content

💄 app: implement app theme for base - #1112

Open
dieguezguille wants to merge 5 commits into
fundsfrom
theme
Open

💄 app: implement app theme for base#1112
dieguezguille wants to merge 5 commits into
fundsfrom
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: 2dccc03

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 Outdated
@codecov

codecov Bot commented Jun 25, 2026

Copy link
Copy Markdown

❌ 1 Tests Failed:

Tests completed Failed Passed Skipped
1174 1 1173 1
View the top 1 failed test(s) by shortest run time
web::web
Stack Traces | 96.7s run time
Element not found: Text matching regex: DeFi

To view more test analytics, go to the Test Analytics Dashboard
📋 Got 3 mins? Take this short survey to help us improve Test Analytics.

@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 Outdated
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: 039b8f9d90

ℹ️ 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
Comment thread src/components/swaps/Swaps.tsx 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: cd1fd34a1f

ℹ️ 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/card/CardDetails.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: a5abae3246

ℹ️ 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

@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: 338f6fef0a

ℹ️ 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: 72658f6b58

ℹ️ 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

@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: 2290865a54

ℹ️ 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/utils/lifi.ts
for (const [key, { ids, error }] of failures) {
reportError(new Error(`balances failed for chains ${ids.join(", ")}: ${key}`, { cause: error }));
const failure = new Error(`balances failed for chains ${ids.join(", ")}: ${key}`, { cause: error });
if (ids.includes(chain.id)) throw failure;

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

P2 Badge Don't fail bridge sources on destination balance errors

When the Alchemy balance request for the current destination chain fails but other source-chain balance requests succeed, this shared helper now throws before returning any of those cross-chain balances. getBridgeSources() also uses balancesOptions(account), so the add-funds bridge source list can lose all other-chain assets and block bridging even though the failed current-chain balance is only needed for same-chain/destination display; keep surfacing this error to the swap empty state without making the shared bridge-source query fail.

Useful? React with 👍 / 👎.

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