Skip to content

feat(btc-only): bitcoin-only branded connect splash #352

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
BitHighlander merged 1 commit into from
Jul 12, 2026
Merged

feat(btc-only): bitcoin-only branded connect splash #352

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 7 additions & 2 deletions projects/keepkey-vault/src/mainview/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import { MobilePanel } from "./components/MobilePanel"
import { WalletConnectPanel } from "./components/WalletConnectPanel"
import { FirmwareDropZone } from "./components/FirmwareDropZone"
import { SplashScreen } from "./components/SplashScreen"
import { isBitcoinOnlyVariant } from "../shared/flags"
import { DeviceGrid } from "./components/DeviceGrid"
import { DeviceClaimedDialog } from "./components/DeviceClaimedDialog"
import { LinuxUdevWarning } from "./components/LinuxUdevWarning"
Expand Down Expand Up @@ -852,10 +853,13 @@ function App() {
)
}

// Bitcoin-only firmware connected — brand the splash orange with a ₿ mark.
const splashBitcoinOnly = isBitcoinOnlyVariant(deviceState.firmwareVariant)

if (phase === "claimed") {
return (
<>{splashNav}{resizeHandles}{updateBanner}{firmwareDropZone}{signingOverlay}{pairingOverlay}{passphraseOverlay}{charOverlay}{pinOverlay}
<SplashScreen statusText={t("keepkeyDetected", { ns: "nav" })} variant="claimed">
<SplashScreen statusText={t("keepkeyDetected", { ns: "nav" })} variant="claimed" isBitcoinOnly={splashBitcoinOnly}>
<DeviceClaimedDialog error={deviceState.error || t("claimed.defaultError", { ns: "device" })} />
</SplashScreen>
</>
Expand Down Expand Up @@ -883,6 +887,7 @@ function App() {
variant={linuxUdevBlocked ? "error" : needsPin || needsPassphrase || isConnecting ? "connecting" : isError ? "error" : "searching"}
childrenReady={linuxUdevBlocked ? true : gridReady}
onLogoClick={linuxUdevBlocked || needsPin || needsPassphrase ? undefined : () => { rpcRequest("retryConnect").catch(() => {}) }}
isBitcoinOnly={splashBitcoinOnly}
>
{linuxUdevBlocked ? (
<LinuxUdevWarning />
Expand Down Expand Up @@ -919,7 +924,7 @@ function App() {
return (
<>{resizeHandles}{updateBanner}{incomingTxToast}{firmwareDropZone}{signingOverlay}{pairingOverlay}{passphraseOverlay}{charOverlay}{pinOverlay}
{!portfolioLoaded && activeTab === "vault" && (
<SplashScreen statusText={t("loadingPortfolio", { ns: "nav" })} variant="connecting" />
<SplashScreen statusText={t("loadingPortfolio", { ns: "nav" })} variant="connecting" isBitcoinOnly={splashBitcoinOnly} />
)}
<Flex direction="column" h="100vh" bg="transparent" color="kk.textPrimary" position="relative"
{...(!portfolioLoaded && activeTab === "vault" ? { position: "absolute", w: 0, h: 0, overflow: "hidden" } as const : {})}
Expand Down
22 changes: 19 additions & 3 deletions projects/keepkey-vault/src/mainview/components/SplashScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ interface SplashScreenProps {
childrenReady?: boolean
/** Called when the logo is clicked (e.g. to retry connection) */
onLogoClick?: () => void
/** Bitcoin-only firmware connected — brand the splash orange with a ₿ mark. */
isBitcoinOnly?: boolean
}

const STATUS_DOT_COLORS: Record<NonNullable<SplashScreenProps['variant']>, string> = {
Expand All @@ -22,10 +24,11 @@ const STATUS_DOT_COLORS: Record<NonNullable<SplashScreenProps['variant']>, strin
claimed: 'var(--teal)',
}

const BTC_ORANGE = '#F7931A'
const RETRY_HINT_DELAY_MS = 10_000

export function SplashScreen({ statusText, hintText, children, variant = 'searching', childrenReady = false, onLogoClick }: SplashScreenProps) {
const dotColor = STATUS_DOT_COLORS[variant]
export function SplashScreen({ statusText, hintText, children, variant = 'searching', childrenReady = false, onLogoClick, isBitcoinOnly = false }: SplashScreenProps) {
const dotColor = isBitcoinOnly ? BTC_ORANGE : STATUS_DOT_COLORS[variant]
const [showRetry, setShowRetry] = useState(false)

// Show "Tap to retry" hint after 10s — only when there's a click handler and grid isn't ready
Expand Down Expand Up @@ -81,11 +84,24 @@ export function SplashScreen({ statusText, hintText, children, variant = 'search
<Logo
width={childrenReady ? "60px" : "100px"}
style={{
filter: 'brightness(1.15) drop-shadow(0 6px 24px rgba(233,196,106,0.25))',
filter: isBitcoinOnly
? 'brightness(1.1) drop-shadow(0 6px 24px rgba(247,147,26,0.35))'
: 'brightness(1.15) drop-shadow(0 6px 24px rgba(233,196,106,0.25))',
transition: 'width 0.5s ease, filter 0.5s ease',
}}
/>
</Box>
{isBitcoinOnly && !childrenReady && (
<Flex align="center" gap="2" mt="4" style={{ animation: 'fadeIn 0.4s ease' }}>
<Flex align="center" justify="center" w="24px" h="24px" borderRadius="full"
bg="rgba(247,147,26,0.14)" border="1px solid rgba(247,147,26,0.45)" flexShrink={0}>
<Text fontSize="14px" fontWeight="700" color={BTC_ORANGE} lineHeight="1">₿</Text>
</Flex>
<Text fontSize="14px" fontWeight="700" color={BTC_ORANGE} letterSpacing="0.02em">
Bitcoin-Only KeepKey
</Text>
</Flex>
)}
{showRetry && !childrenReady && (
<Text
fontSize="xs"
Expand Down