From 46895cf791f43a473eea1f2d30fbec19c510dea0 Mon Sep 17 00:00:00 2001
From: William Swanson <swansontec@gmail.com>
Date: Fri, 5 Jan 2024 13:02:05 -0800
Subject: [PATCH 1/5] Remove the `SceneWrapper` background option

---
 .../ChangePasswordScene.test.tsx.snap            |  1 -
 .../__snapshots__/ChangePinScene.test.tsx.snap   |  1 -
 .../CryptoExchangeSuccessScene.test.tsx.snap     |  1 -
 .../DefaultFiatSettingScene.test.tsx.snap        |  1 -
 .../FioAddressDetailsScene.test.tsx.snap         |  4 +---
 .../FioAddressListScene.test.tsx.snap            |  4 +---
 .../FioAddressRegisterScene.test.tsx.snap        |  4 +---
 ...ddressRegisterSelectWalletScene.test.tsx.snap |  4 +---
 .../FioAddressRegisteredScene.test.tsx.snap      |  4 +---
 .../FioAddressSettingsScene.test.tsx.snap        |  4 +---
 .../FioConnectWalletConfirmScene.test.tsx.snap   |  1 -
 .../FioDomainRegisterScene.test.tsx.snap         |  4 +---
 .../__snapshots__/RequestScene.test.tsx.snap     |  1 -
 src/components/common/SceneWrapper.tsx           | 16 +---------------
 src/components/scenes/AssetSettingsScene.tsx     |  2 +-
 src/components/scenes/ChangeMiningFeeScene.tsx   |  2 +-
 src/components/scenes/ChangePasswordScene.tsx    |  2 +-
 src/components/scenes/ChangePinScene.tsx         |  2 +-
 .../scenes/CoinRankingDetailsScene.tsx           |  2 +-
 src/components/scenes/CoinRankingScene.tsx       |  2 +-
 src/components/scenes/ConfirmScene.tsx           |  2 +-
 src/components/scenes/CrashScene.tsx             |  2 +-
 .../scenes/CreateWalletCompletionScene.tsx       |  2 +-
 .../scenes/CreateWalletImportOptionsScene.tsx    |  2 +-
 .../scenes/CreateWalletImportScene.tsx           |  2 +-
 .../scenes/CreateWalletSelectCryptoScene.tsx     |  2 +-
 .../scenes/CreateWalletSelectFiatScene.tsx       |  2 +-
 .../CryptoExchangeQuoteProcessingScene.tsx       |  2 +-
 .../scenes/CryptoExchangeQuoteScene.tsx          |  2 +-
 .../scenes/CryptoExchangeSuccessScene.tsx        |  2 +-
 .../scenes/CurrencyNotificationScene.tsx         |  2 +-
 src/components/scenes/CurrencySettingsScene.tsx  |  2 +-
 .../scenes/DefaultFiatSettingScene.tsx           |  2 +-
 src/components/scenes/EdgeLoginScene.tsx         |  2 +-
 src/components/scenes/ExtraTabScene.tsx          |  2 +-
 .../scenes/Fio/FioAddressDetailsScene.tsx        |  2 +-
 .../scenes/Fio/FioAddressListScene.tsx           |  2 +-
 .../scenes/Fio/FioAddressRegisterScene.tsx       |  2 +-
 .../Fio/FioAddressRegisterSelectWalletScene.tsx  |  2 +-
 .../scenes/Fio/FioAddressRegisteredScene.tsx     |  2 +-
 .../scenes/Fio/FioAddressSettingsScene.tsx       |  2 +-
 .../scenes/Fio/FioConnectWalletConfirmScene.tsx  |  2 +-
 .../scenes/Fio/FioCreateHandleScene.tsx          |  2 +-
 .../scenes/Fio/FioDomainRegisterScene.tsx        |  2 +-
 .../Fio/FioDomainRegisterSelectWalletScene.tsx   |  2 +-
 .../scenes/Fio/FioDomainSettingsScene.tsx        |  2 +-
 .../scenes/Fio/FioNameConfirmScene.tsx           |  2 +-
 .../scenes/Fio/FioRequestConfirmationScene.tsx   |  2 +-
 .../scenes/Fio/FioRequestListScene.tsx           |  2 +-
 .../scenes/Fio/FioSentRequestDetailsScene.tsx    |  2 +-
 .../scenes/Fio/FioStakingChangeScene.tsx         |  2 +-
 .../scenes/Fio/FioStakingOverviewScene.tsx       |  2 +-
 src/components/scenes/FormScene.tsx              |  2 +-
 src/components/scenes/GuiPluginListScene.tsx     |  2 +-
 src/components/scenes/GuiPluginViewScene.tsx     |  2 +-
 src/components/scenes/LoadingScene.tsx           |  2 +-
 .../scenes/Loans/LoanCreateConfirmationScene.tsx |  2 +-
 .../scenes/Loans/LoanDashboardScene.tsx          |  4 ++--
 src/components/scenes/Loans/LoanStatusScene.tsx  |  2 +-
 .../scenes/MigrateWalletCalculateFeeScene.tsx    |  2 +-
 .../scenes/MigrateWalletCompletionScene.tsx      |  2 +-
 .../scenes/MigrateWalletSelectCryptoScene.tsx    |  2 +-
 src/components/scenes/NotificationScene.tsx      |  2 +-
 src/components/scenes/OtpSettingsScene.tsx       |  2 +-
 src/components/scenes/PasswordRecoveryScene.tsx  |  2 +-
 src/components/scenes/PromotionSettingsScene.tsx |  2 +-
 src/components/scenes/RequestScene.tsx           |  4 ++--
 src/components/scenes/SendScene2.tsx             |  2 +-
 src/components/scenes/SettingsScene.tsx          |  2 +-
 .../scenes/Staking/StakeModifyScene.tsx          |  4 ++--
 .../scenes/Staking/StakeOptionsScene.tsx         |  2 +-
 .../scenes/Staking/StakeOverviewScene.tsx        |  4 ++--
 src/components/scenes/SwapSettingsScene.tsx      |  2 +-
 .../scenes/TransactionsExportScene.tsx           |  2 +-
 src/components/scenes/UpgradeUsernameScreen.tsx  |  2 +-
 src/components/scenes/WalletListScene.tsx        |  2 +-
 src/components/scenes/WcConnectScene.tsx         |  2 +-
 src/components/scenes/WcConnectionsScene.tsx     |  2 +-
 src/components/scenes/WcDisconnectScene.tsx      |  2 +-
 src/components/scenes/WebViewScene.tsx           |  2 +-
 src/plugins/gui/scenes/AddressFormScene.tsx      |  2 +-
 .../gui/scenes/FiatPluginEnterAmountScene.tsx    |  2 +-
 src/plugins/gui/scenes/FiatPluginWebView.tsx     |  2 +-
 src/plugins/gui/scenes/InfoDisplayScene.tsx      |  2 +-
 .../gui/scenes/RewardsCardDashboardScene.tsx     |  2 +-
 .../gui/scenes/RewardsCardWelcomeScene.tsx       |  2 +-
 src/plugins/gui/scenes/SepaFormScene.tsx         |  2 +-
 87 files changed, 85 insertions(+), 119 deletions(-)

diff --git a/src/__tests__/scenes/__snapshots__/ChangePasswordScene.test.tsx.snap b/src/__tests__/scenes/__snapshots__/ChangePasswordScene.test.tsx.snap
index 3b3dce7195b..bd987f63707 100644
--- a/src/__tests__/scenes/__snapshots__/ChangePasswordScene.test.tsx.snap
+++ b/src/__tests__/scenes/__snapshots__/ChangePasswordScene.test.tsx.snap
@@ -2,7 +2,6 @@
 
 exports[`ChangePasswordComponent should render with loading props 1`] = `
 <SceneWrapper
-  background="theme"
   hasTabs={false}
 >
   <UNDEFINED
diff --git a/src/__tests__/scenes/__snapshots__/ChangePinScene.test.tsx.snap b/src/__tests__/scenes/__snapshots__/ChangePinScene.test.tsx.snap
index 8e5322ddc28..b03d7d5e2e2 100644
--- a/src/__tests__/scenes/__snapshots__/ChangePinScene.test.tsx.snap
+++ b/src/__tests__/scenes/__snapshots__/ChangePinScene.test.tsx.snap
@@ -2,7 +2,6 @@
 
 exports[`ChangePinComponent should render with loading props 1`] = `
 <SceneWrapper
-  background="theme"
   hasTabs={false}
 >
   <UNDEFINED
diff --git a/src/__tests__/scenes/__snapshots__/CryptoExchangeSuccessScene.test.tsx.snap b/src/__tests__/scenes/__snapshots__/CryptoExchangeSuccessScene.test.tsx.snap
index 5bed48b728e..fac9a5827fd 100644
--- a/src/__tests__/scenes/__snapshots__/CryptoExchangeSuccessScene.test.tsx.snap
+++ b/src/__tests__/scenes/__snapshots__/CryptoExchangeSuccessScene.test.tsx.snap
@@ -2,7 +2,6 @@
 
 exports[`CryptoExchangeSuccessComponent should render with loading props 1`] = `
 <SceneWrapper
-  background="theme"
   hasNotifications={true}
 >
   <View
diff --git a/src/__tests__/scenes/__snapshots__/DefaultFiatSettingScene.test.tsx.snap b/src/__tests__/scenes/__snapshots__/DefaultFiatSettingScene.test.tsx.snap
index ab8ab89a07c..361bd6eb410 100644
--- a/src/__tests__/scenes/__snapshots__/DefaultFiatSettingScene.test.tsx.snap
+++ b/src/__tests__/scenes/__snapshots__/DefaultFiatSettingScene.test.tsx.snap
@@ -3,7 +3,6 @@
 exports[`DefaultFiatSettingComponent should render with loading props 1`] = `
 <SceneWrapper
   avoidKeyboard={true}
-  background="theme"
 >
   [Function]
 </SceneWrapper>
diff --git a/src/__tests__/scenes/__snapshots__/FioAddressDetailsScene.test.tsx.snap b/src/__tests__/scenes/__snapshots__/FioAddressDetailsScene.test.tsx.snap
index 6cb52e121b0..20ee7d1ab0f 100644
--- a/src/__tests__/scenes/__snapshots__/FioAddressDetailsScene.test.tsx.snap
+++ b/src/__tests__/scenes/__snapshots__/FioAddressDetailsScene.test.tsx.snap
@@ -1,9 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`FioAddressDetails should render with loading props 1`] = `
-<SceneWrapper
-  background="theme"
->
+<SceneWrapper>
   <WithTheme(EdgeTextComponent)
     style={
       {
diff --git a/src/__tests__/scenes/__snapshots__/FioAddressListScene.test.tsx.snap b/src/__tests__/scenes/__snapshots__/FioAddressListScene.test.tsx.snap
index 8537a80871f..e91c63bc22e 100644
--- a/src/__tests__/scenes/__snapshots__/FioAddressListScene.test.tsx.snap
+++ b/src/__tests__/scenes/__snapshots__/FioAddressListScene.test.tsx.snap
@@ -2,9 +2,7 @@
 
 exports[`FioAddressList should render with loading props 1`] = `
 <React.Fragment>
-  <SceneWrapper
-    background="theme"
-  >
+  <SceneWrapper>
     <ScrollView
       style={
         {
diff --git a/src/__tests__/scenes/__snapshots__/FioAddressRegisterScene.test.tsx.snap b/src/__tests__/scenes/__snapshots__/FioAddressRegisterScene.test.tsx.snap
index e2f462cb9b4..0fd1f0d5a0a 100644
--- a/src/__tests__/scenes/__snapshots__/FioAddressRegisterScene.test.tsx.snap
+++ b/src/__tests__/scenes/__snapshots__/FioAddressRegisterScene.test.tsx.snap
@@ -1,9 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`FioAddressRegister should render with loading props 1`] = `
-<SceneWrapper
-  background="theme"
->
+<SceneWrapper>
   <Memo(SceneHeaderComponent)
     style={
       {
diff --git a/src/__tests__/scenes/__snapshots__/FioAddressRegisterSelectWalletScene.test.tsx.snap b/src/__tests__/scenes/__snapshots__/FioAddressRegisterSelectWalletScene.test.tsx.snap
index ed4fbe29619..d812b4ff995 100644
--- a/src/__tests__/scenes/__snapshots__/FioAddressRegisterSelectWalletScene.test.tsx.snap
+++ b/src/__tests__/scenes/__snapshots__/FioAddressRegisterSelectWalletScene.test.tsx.snap
@@ -1,9 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`FioAddressRegistered should render with loading props 1`] = `
-<SceneWrapper
-  background="theme"
->
+<SceneWrapper>
   <View
     style={
       {
diff --git a/src/__tests__/scenes/__snapshots__/FioAddressRegisteredScene.test.tsx.snap b/src/__tests__/scenes/__snapshots__/FioAddressRegisteredScene.test.tsx.snap
index c95e5a50a18..b3762be2c5e 100644
--- a/src/__tests__/scenes/__snapshots__/FioAddressRegisteredScene.test.tsx.snap
+++ b/src/__tests__/scenes/__snapshots__/FioAddressRegisteredScene.test.tsx.snap
@@ -1,9 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`FioAddressRegistered should render with loading props 1`] = `
-<SceneWrapper
-  background="theme"
->
+<SceneWrapper>
   <View
     style={
       {
diff --git a/src/__tests__/scenes/__snapshots__/FioAddressSettingsScene.test.tsx.snap b/src/__tests__/scenes/__snapshots__/FioAddressSettingsScene.test.tsx.snap
index 1e52544999b..c8436e9a068 100644
--- a/src/__tests__/scenes/__snapshots__/FioAddressSettingsScene.test.tsx.snap
+++ b/src/__tests__/scenes/__snapshots__/FioAddressSettingsScene.test.tsx.snap
@@ -1,9 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`FioAddressSettingsComponent should render with loading props 1`] = `
-<SceneWrapper
-  background="theme"
->
+<SceneWrapper>
   <WithTheme(TileComponent)
     body="MyFioAddress"
     title="FIO Crypto Handle"
diff --git a/src/__tests__/scenes/__snapshots__/FioConnectWalletConfirmScene.test.tsx.snap b/src/__tests__/scenes/__snapshots__/FioConnectWalletConfirmScene.test.tsx.snap
index 2d57c15b837..5ac3b7bedfd 100644
--- a/src/__tests__/scenes/__snapshots__/FioConnectWalletConfirmScene.test.tsx.snap
+++ b/src/__tests__/scenes/__snapshots__/FioConnectWalletConfirmScene.test.tsx.snap
@@ -2,7 +2,6 @@
 
 exports[`FioConnectWalletConfirm should render with loading props 1`] = `
 <SceneWrapper
-  background="theme"
   scroll={true}
 >
   <WithTheme(TileComponent)
diff --git a/src/__tests__/scenes/__snapshots__/FioDomainRegisterScene.test.tsx.snap b/src/__tests__/scenes/__snapshots__/FioDomainRegisterScene.test.tsx.snap
index d05c2c14130..3238cd65ee5 100644
--- a/src/__tests__/scenes/__snapshots__/FioDomainRegisterScene.test.tsx.snap
+++ b/src/__tests__/scenes/__snapshots__/FioDomainRegisterScene.test.tsx.snap
@@ -1,9 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`FioDomainRegister should render with loading props 1`] = `
-<SceneWrapper
-  background="theme"
->
+<SceneWrapper>
   <Memo(SceneHeaderComponent)
     style={
       {
diff --git a/src/__tests__/scenes/__snapshots__/RequestScene.test.tsx.snap b/src/__tests__/scenes/__snapshots__/RequestScene.test.tsx.snap
index eb4a64f849d..8a16541bdb8 100644
--- a/src/__tests__/scenes/__snapshots__/RequestScene.test.tsx.snap
+++ b/src/__tests__/scenes/__snapshots__/RequestScene.test.tsx.snap
@@ -2,7 +2,6 @@
 
 exports[`Request should render with loaded props 1`] = `
 <SceneWrapper
-  background="theme"
   hasTabs={false}
 >
   <View
diff --git a/src/components/common/SceneWrapper.tsx b/src/components/common/SceneWrapper.tsx
index 519a17abeb1..d775abaf44a 100644
--- a/src/components/common/SceneWrapper.tsx
+++ b/src/components/common/SceneWrapper.tsx
@@ -29,10 +29,6 @@ export interface SceneWrapperInfo {
   isKeyboardOpen: boolean
 }
 
-type BackgroundOptions =
-  | 'theme' // Whatever the current theme specifies (default)
-  | 'none' // Do not render any background elements
-
 interface SceneWrapperProps {
   // The children can either be normal React elements,
   // or a function that accepts info about the scene outer state and returns an element.
@@ -46,9 +42,6 @@ interface SceneWrapperProps {
   // True if this scene should shrink to avoid the keyboard:
   avoidKeyboard?: boolean
 
-  // Background options:
-  background?: BackgroundOptions
-
   // True if this scene has a header (with back button & such):
   hasHeader?: boolean
 
@@ -81,7 +74,6 @@ interface SceneWrapperProps {
 export function SceneWrapper(props: SceneWrapperProps): JSX.Element {
   const {
     avoidKeyboard = false,
-    background = 'theme',
     children,
     hasHeader = true,
     hasNotifications = false,
@@ -149,12 +141,7 @@ export function SceneWrapper(props: SceneWrapperProps): JSX.Element {
 
     return (
       <MaybeAnimatedView when={hasKeyboardAnimation} style={[styles.sceneContainer, layoutStyles, maybeInsetStyles, { maxHeight: keyboardAnimation, padding }]}>
-        <MaybeLinearGradient
-          when={background === 'theme'}
-          colors={theme.backgroundGradientColors}
-          end={theme.backgroundGradientEnd}
-          start={theme.backgroundGradientStart}
-        />
+        <StyledLinearGradient colors={theme.backgroundGradientColors} end={theme.backgroundGradientEnd} start={theme.backgroundGradientStart} />
         <MaybeScrollView
           when={scroll && !hasKeyboardAnimation}
           style={[layoutStyles, { padding }]}
@@ -208,6 +195,5 @@ const StyledLinearGradient = styled(LinearGradient)({
 })
 
 const MaybeAnimatedView = maybeComponent(Animated.View)
-const MaybeLinearGradient = maybeComponent(StyledLinearGradient)
 const MaybeScrollView = maybeComponent(ScrollView)
 const MaybeView = maybeComponent(View)
diff --git a/src/components/scenes/AssetSettingsScene.tsx b/src/components/scenes/AssetSettingsScene.tsx
index 2f039e81bc9..939cf01d69d 100644
--- a/src/components/scenes/AssetSettingsScene.tsx
+++ b/src/components/scenes/AssetSettingsScene.tsx
@@ -14,7 +14,7 @@ export function AssetSettingsScene(props: Props) {
   const account = useSelector(state => state.core.account)
 
   return (
-    <SceneWrapper scroll background="theme" hasTabs={false}>
+    <SceneWrapper scroll hasTabs={false}>
       {CURRENCY_SETTINGS_KEYS.map(pluginId => {
         if (account.currencyConfig[pluginId] == null) return null
         const { currencyInfo } = account.currencyConfig[pluginId]
diff --git a/src/components/scenes/ChangeMiningFeeScene.tsx b/src/components/scenes/ChangeMiningFeeScene.tsx
index de31d24551d..843bbb29daf 100644
--- a/src/components/scenes/ChangeMiningFeeScene.tsx
+++ b/src/components/scenes/ChangeMiningFeeScene.tsx
@@ -83,7 +83,7 @@ export class ChangeMiningFeeComponent extends React.PureComponent<Props, State>
     const { networkFeeOption } = this.state
 
     return (
-      <SceneWrapper background="theme" hasTabs={false} avoidKeyboard>
+      <SceneWrapper hasTabs={false} avoidKeyboard>
         <SceneHeader title={lstrings.title_change_mining_fee} underline withTopMargin />
         <ScrollView contentContainerStyle={styles.container}>
           {Object.keys(feeOptions).map(feeSetting => {
diff --git a/src/components/scenes/ChangePasswordScene.tsx b/src/components/scenes/ChangePasswordScene.tsx
index 8c6bc5e766d..37edd50f970 100644
--- a/src/components/scenes/ChangePasswordScene.tsx
+++ b/src/components/scenes/ChangePasswordScene.tsx
@@ -24,7 +24,7 @@ export class ChangePasswordComponent extends React.Component<Props> {
       navigation.goBack()
     }
     return (
-      <SceneWrapper hasTabs={false} background="theme">
+      <SceneWrapper hasTabs={false}>
         <ChangePasswordScreen account={account} context={context} onComplete={handleComplete} onLogEvent={logEvent} />
       </SceneWrapper>
     )
diff --git a/src/components/scenes/ChangePinScene.tsx b/src/components/scenes/ChangePinScene.tsx
index 135faefcb6b..a1779d590fe 100644
--- a/src/components/scenes/ChangePinScene.tsx
+++ b/src/components/scenes/ChangePinScene.tsx
@@ -24,7 +24,7 @@ export class ChangePinComponent extends React.Component<Props> {
       navigation.goBack()
     }
     return (
-      <SceneWrapper hasTabs={false} background="theme">
+      <SceneWrapper hasTabs={false}>
         <ChangePinScreen account={account} context={context} onComplete={handleComplete} onLogEvent={logEvent} />
       </SceneWrapper>
     )
diff --git a/src/components/scenes/CoinRankingDetailsScene.tsx b/src/components/scenes/CoinRankingDetailsScene.tsx
index c0e9b3fa2fd..0426b83158f 100644
--- a/src/components/scenes/CoinRankingDetailsScene.tsx
+++ b/src/components/scenes/CoinRankingDetailsScene.tsx
@@ -165,7 +165,7 @@ const CoinRankingDetailsSceneComponent = (props: Props) => {
   }
 
   return (
-    <SceneWrapper background="theme" hasTabs hasNotifications scroll>
+    <SceneWrapper hasTabs hasNotifications scroll>
       <View style={styles.container}>
         <EdgeAnim style={styles.titleContainer} enter={{ type: 'fadeInLeft' }}>
           <FastImage style={styles.icon} source={imageUrlObject} />
diff --git a/src/components/scenes/CoinRankingScene.tsx b/src/components/scenes/CoinRankingScene.tsx
index fc32bc42bcc..09a54ca9b09 100644
--- a/src/components/scenes/CoinRankingScene.tsx
+++ b/src/components/scenes/CoinRankingScene.tsx
@@ -202,7 +202,7 @@ const CoinRankingComponent = (props: Props) => {
   const assetSubTextString = assetSubTextStrings[assetSubText]
 
   return (
-    <SceneWrapper background="theme" hasTabs hasNotifications>
+    <SceneWrapper hasTabs hasNotifications>
       {({ insetStyles }) => (
         <>
           <View style={[styles.searchContainer, { paddingTop: insetStyles.paddingTop }]}>
diff --git a/src/components/scenes/ConfirmScene.tsx b/src/components/scenes/ConfirmScene.tsx
index e22fb18ae24..c79cf553e0f 100644
--- a/src/components/scenes/ConfirmScene.tsx
+++ b/src/components/scenes/ConfirmScene.tsx
@@ -51,7 +51,7 @@ const ConfirmComponent = (props: Props) => {
   }, [onBack])
 
   return (
-    <SceneWrapper background="theme">
+    <SceneWrapper>
       <KeyboardAwareScrollView extraScrollHeight={theme.rem(2.75)} enableOnAndroid>
         <SceneHeader title={titleText} underline />
         <View style={styles.body}>
diff --git a/src/components/scenes/CrashScene.tsx b/src/components/scenes/CrashScene.tsx
index 79ac0842312..6d65f353fd7 100644
--- a/src/components/scenes/CrashScene.tsx
+++ b/src/components/scenes/CrashScene.tsx
@@ -18,7 +18,7 @@ export function CrashScene(props: Props): React.ReactElement {
   const styles = getStyles(theme)
 
   return (
-    <SceneWrapper background="theme" padding={theme.rem(0.5)} scroll>
+    <SceneWrapper padding={theme.rem(0.5)} scroll>
       <AntDesignIcon name="frowno" style={styles.icon} />
       <Text style={styles.titleText}>{lstrings.error_boundary_title}</Text>
       <Text style={styles.messageText}>{sprintf(lstrings.error_boundary_message_s, config.supportEmail)}</Text>
diff --git a/src/components/scenes/CreateWalletCompletionScene.tsx b/src/components/scenes/CreateWalletCompletionScene.tsx
index 0d2c62c1c24..2f47e7138d8 100644
--- a/src/components/scenes/CreateWalletCompletionScene.tsx
+++ b/src/components/scenes/CreateWalletCompletionScene.tsx
@@ -160,7 +160,7 @@ const CreateWalletCompletionComponent = (props: Props) => {
   const keyExtractor = useHandler((item: WalletCreateItem) => item.key)
 
   return (
-    <SceneWrapper background="theme">
+    <SceneWrapper>
       {({ insetStyles }) => (
         <View style={[styles.content, insetStyles]}>
           <SceneHeader title={lstrings.title_create_wallets} withTopMargin />
diff --git a/src/components/scenes/CreateWalletImportOptionsScene.tsx b/src/components/scenes/CreateWalletImportOptionsScene.tsx
index 262c22446f7..d2dd91a2184 100644
--- a/src/components/scenes/CreateWalletImportOptionsScene.tsx
+++ b/src/components/scenes/CreateWalletImportOptionsScene.tsx
@@ -211,7 +211,7 @@ const CreateWalletImportOptionsComponent = (props: Props) => {
   const keyExtractor = useHandler((item: [string, Set<ImportKeyOption>]) => item[0])
 
   return (
-    <SceneWrapper background="theme">
+    <SceneWrapper>
       <SceneHeader title={lstrings.create_wallet_import_options_title} withTopMargin />
       <View style={styles.content}>
         <FlashList
diff --git a/src/components/scenes/CreateWalletImportScene.tsx b/src/components/scenes/CreateWalletImportScene.tsx
index 7160e3ef037..a5b773a7504 100644
--- a/src/components/scenes/CreateWalletImportScene.tsx
+++ b/src/components/scenes/CreateWalletImportScene.tsx
@@ -136,7 +136,7 @@ const CreateWalletImportComponent = (props: Props) => {
   const svgWidth = React.useMemo(() => 83 * theme.rem(0.0625), [theme])
 
   return (
-    <SceneWrapper background="theme">
+    <SceneWrapper>
       <SceneHeader title={lstrings.create_wallet_import_title} withTopMargin />
       <KeyboardAwareScrollView
         contentContainerStyle={styles.container}
diff --git a/src/components/scenes/CreateWalletSelectCryptoScene.tsx b/src/components/scenes/CreateWalletSelectCryptoScene.tsx
index d75e3e9eecc..6369fb78ab4 100644
--- a/src/components/scenes/CreateWalletSelectCryptoScene.tsx
+++ b/src/components/scenes/CreateWalletSelectCryptoScene.tsx
@@ -251,7 +251,7 @@ const CreateWalletSelectCryptoComponent = (props: Props) => {
   )
 
   return (
-    <SceneWrapper background="theme">
+    <SceneWrapper>
       {({ insetStyles }) => (
         <View style={[styles.content, { ...insetStyles, paddingBottom: 0 }]}>
           <SceneHeader title={lstrings.title_create_wallet_select_crypto} withTopMargin />
diff --git a/src/components/scenes/CreateWalletSelectFiatScene.tsx b/src/components/scenes/CreateWalletSelectFiatScene.tsx
index a8f75deae57..35cc2f3023d 100644
--- a/src/components/scenes/CreateWalletSelectFiatScene.tsx
+++ b/src/components/scenes/CreateWalletSelectFiatScene.tsx
@@ -208,7 +208,7 @@ const CreateWalletSelectFiatComponent = (props: Props) => {
   const keyExtractor = useHandler((item: WalletCreateItem) => item.key)
 
   return (
-    <SceneWrapper background="theme">
+    <SceneWrapper>
       <SceneHeader title={lstrings.title_create_wallet} withTopMargin />
       <View style={styles.content}>
         {renderSelectedFiatRow()}
diff --git a/src/components/scenes/CryptoExchangeQuoteProcessingScene.tsx b/src/components/scenes/CryptoExchangeQuoteProcessingScene.tsx
index 362b1faf6da..00eb706e6fe 100644
--- a/src/components/scenes/CryptoExchangeQuoteProcessingScene.tsx
+++ b/src/components/scenes/CryptoExchangeQuoteProcessingScene.tsx
@@ -56,7 +56,7 @@ export function CryptoExchangeQuoteProcessingScene(props: Props) {
   }, [onDone, onError])
 
   return (
-    <SceneWrapper background="theme" hasTabs={false}>
+    <SceneWrapper hasTabs={false}>
       <View style={styles.container}>
         <EdgeText style={styles.title}>{lstrings.hang_tight}</EdgeText>
         <EdgeText style={styles.findingText} numberOfLines={3}>
diff --git a/src/components/scenes/CryptoExchangeQuoteScene.tsx b/src/components/scenes/CryptoExchangeQuoteScene.tsx
index dd14fd2926e..e32eb913d42 100644
--- a/src/components/scenes/CryptoExchangeQuoteScene.tsx
+++ b/src/components/scenes/CryptoExchangeQuoteScene.tsx
@@ -183,7 +183,7 @@ export const CryptoExchangeQuoteScene = (props: Props) => {
     ))
   }
   return (
-    <SceneWrapper hasTabs hasNotifications background="theme">
+    <SceneWrapper hasTabs hasNotifications>
       {({ insetStyles }) => (
         <>
           <SceneHeader title={lstrings.title_exchange} underline withTopMargin />
diff --git a/src/components/scenes/CryptoExchangeSuccessScene.tsx b/src/components/scenes/CryptoExchangeSuccessScene.tsx
index 74e407d0b7e..f8665a39f83 100644
--- a/src/components/scenes/CryptoExchangeSuccessScene.tsx
+++ b/src/components/scenes/CryptoExchangeSuccessScene.tsx
@@ -75,7 +75,7 @@ export class CryptoExchangeSuccessComponent extends React.PureComponent<Props, L
     const { showButton } = this.state
     const styles = getStyles(theme)
     return (
-      <SceneWrapper background="theme" hasNotifications>
+      <SceneWrapper hasNotifications>
         <View style={styles.container}>
           <EdgeText style={styles.title}>{lstrings.exchange_congratulations}</EdgeText>
           <EdgeText style={styles.text} numberOfLines={2}>
diff --git a/src/components/scenes/CurrencyNotificationScene.tsx b/src/components/scenes/CurrencyNotificationScene.tsx
index 5929625c633..2429962efb1 100644
--- a/src/components/scenes/CurrencyNotificationScene.tsx
+++ b/src/components/scenes/CurrencyNotificationScene.tsx
@@ -37,7 +37,7 @@ export const CurrencyNotificationScene = (props: Props) => {
   const handleDailyPress = useHandler(updateSettings('daily'))
 
   return (
-    <SceneWrapper scroll background="theme" hasTabs={false}>
+    <SceneWrapper scroll hasTabs={false}>
       <SettingsSwitchRow
         key="hourly"
         label={sprintf(lstrings.settings_currency_notifications_percent_change_hour, 3)}
diff --git a/src/components/scenes/CurrencySettingsScene.tsx b/src/components/scenes/CurrencySettingsScene.tsx
index 5a4317005c7..652b15117f0 100644
--- a/src/components/scenes/CurrencySettingsScene.tsx
+++ b/src/components/scenes/CurrencySettingsScene.tsx
@@ -52,7 +52,7 @@ export function CurrencySettingsScene(props: Props) {
   }
 
   return (
-    <SceneWrapper scroll background="theme" hasTabs={false}>
+    <SceneWrapper scroll hasTabs={false}>
       {denominations.length > 1 ? renderDenominations() : null}
       <MaybeBlockbookSetting currencyConfig={currencyConfig} />
       <MaybeCustomServersSetting currencyConfig={currencyConfig} />
diff --git a/src/components/scenes/DefaultFiatSettingScene.tsx b/src/components/scenes/DefaultFiatSettingScene.tsx
index a04c66c23ce..0fec4dcd519 100644
--- a/src/components/scenes/DefaultFiatSettingScene.tsx
+++ b/src/components/scenes/DefaultFiatSettingScene.tsx
@@ -83,7 +83,7 @@ export class DefaultFiatSettingComponent extends React.Component<Props, State> {
     })
 
     return (
-      <SceneWrapper avoidKeyboard background="theme">
+      <SceneWrapper avoidKeyboard>
         {({ insetStyles }) => (
           <View style={[styles.content, { ...insetStyles, paddingBottom: 0 }]}>
             <SceneHeader title={lstrings.title_create_wallet_select_fiat} underline withTopMargin>
diff --git a/src/components/scenes/EdgeLoginScene.tsx b/src/components/scenes/EdgeLoginScene.tsx
index 8f118858a4d..c695cfc466e 100644
--- a/src/components/scenes/EdgeLoginScene.tsx
+++ b/src/components/scenes/EdgeLoginScene.tsx
@@ -69,7 +69,7 @@ export const EdgeLoginScene = (props: Props) => {
   const logoUri = theme.isDark ? lobby?.loginRequest?.displayImageDarkUrl : lobby?.loginRequest?.displayImageLightUrl
 
   return (
-    <SceneWrapper background="theme">
+    <SceneWrapper>
       <View style={styles.topArea}>
         <CrossFade activeKey={lobby == null ? 'loader' : 'logo'}>
           <View key="loader" style={styles.header}>
diff --git a/src/components/scenes/ExtraTabScene.tsx b/src/components/scenes/ExtraTabScene.tsx
index 49898bcc00b..2ce14bbfd18 100644
--- a/src/components/scenes/ExtraTabScene.tsx
+++ b/src/components/scenes/ExtraTabScene.tsx
@@ -24,7 +24,7 @@ export function ExtraTabScene(props: Props) {
     }
 
     return (
-      <SceneWrapper background="theme" hasTabs>
+      <SceneWrapper hasTabs>
         <EdgeProviderComponent plugin={plugin} navigation={navigation} />
       </SceneWrapper>
     )
diff --git a/src/components/scenes/Fio/FioAddressDetailsScene.tsx b/src/components/scenes/Fio/FioAddressDetailsScene.tsx
index ed20a465b32..353ad9cd10b 100644
--- a/src/components/scenes/Fio/FioAddressDetailsScene.tsx
+++ b/src/components/scenes/Fio/FioAddressDetailsScene.tsx
@@ -104,7 +104,7 @@ export class FioAddressDetails extends React.Component<Props, LocalState> {
     const bundledTxsLabel = `${lstrings.fio_address_details_screen_bundled_txs}: ${bundledTxs}`
 
     return (
-      <SceneWrapper background="theme">
+      <SceneWrapper>
         <EdgeText style={styles.bundledTxs}>{bundledTxsLabel}</EdgeText>
         {this.renderAccountSettings()}
         <SettingsHeaderRow
diff --git a/src/components/scenes/Fio/FioAddressListScene.tsx b/src/components/scenes/Fio/FioAddressListScene.tsx
index 58b4a1ef4cf..5811548de75 100644
--- a/src/components/scenes/Fio/FioAddressListScene.tsx
+++ b/src/components/scenes/Fio/FioAddressListScene.tsx
@@ -116,7 +116,7 @@ export class FioAddressList extends React.Component<Props, LocalState> {
     const noFioAddressesText = `${lstrings.no} ${lstrings.title_fio_address}`
     return (
       <>
-        <SceneWrapper background="theme">
+        <SceneWrapper>
           <ScrollView style={styles.row}>
             <SceneHeader title={lstrings.title_fio_address} underline />
             <View style={styles.list}>
diff --git a/src/components/scenes/Fio/FioAddressRegisterScene.tsx b/src/components/scenes/Fio/FioAddressRegisterScene.tsx
index a1f0a39a47c..cdff261996a 100644
--- a/src/components/scenes/Fio/FioAddressRegisterScene.tsx
+++ b/src/components/scenes/Fio/FioAddressRegisterScene.tsx
@@ -396,7 +396,7 @@ export class FioAddressRegister extends React.Component<Props, State> {
     const styles = getStyles(theme)
 
     return (
-      <SceneWrapper background="theme">
+      <SceneWrapper>
         <SceneHeader style={styles.header} title={lstrings.title_fio_address_confirmation}>
           <Image source={theme.fioAddressLogo} style={styles.image} resizeMode="cover" />
         </SceneHeader>
diff --git a/src/components/scenes/Fio/FioAddressRegisterSelectWalletScene.tsx b/src/components/scenes/Fio/FioAddressRegisterSelectWalletScene.tsx
index de13438d083..32756c7aa7d 100644
--- a/src/components/scenes/Fio/FioAddressRegisterSelectWalletScene.tsx
+++ b/src/components/scenes/Fio/FioAddressRegisterSelectWalletScene.tsx
@@ -229,7 +229,7 @@ export class FioAddressRegisterSelectWallet extends React.Component<Props, Local
     const styles = getStyles(theme)
     const detailsText = sprintf(lstrings.fio_address_payment_required_text, config.appName)
     return (
-      <SceneWrapper scroll background="theme">
+      <SceneWrapper scroll>
         <View style={styles.header}>
           <Image source={theme.fioAddressLogo} style={styles.image} resizeMode="cover" />
           <EdgeText style={styles.instructionalText} numberOfLines={10}>
diff --git a/src/components/scenes/Fio/FioAddressRegisteredScene.tsx b/src/components/scenes/Fio/FioAddressRegisteredScene.tsx
index 0bedef17e8e..a27ee88c7fc 100644
--- a/src/components/scenes/Fio/FioAddressRegisteredScene.tsx
+++ b/src/components/scenes/Fio/FioAddressRegisteredScene.tsx
@@ -37,7 +37,7 @@ export class FioAddressRegistered extends React.Component<Props> {
     const styles = getStyles(theme)
 
     return (
-      <SceneWrapper background="theme">
+      <SceneWrapper>
         <View style={styles.view}>
           <View style={styles.texts}>
             <View style={styles.image}>
diff --git a/src/components/scenes/Fio/FioAddressSettingsScene.tsx b/src/components/scenes/Fio/FioAddressSettingsScene.tsx
index a2b8e84caad..04b0395c6ed 100644
--- a/src/components/scenes/Fio/FioAddressSettingsScene.tsx
+++ b/src/components/scenes/Fio/FioAddressSettingsScene.tsx
@@ -147,7 +147,7 @@ export class FioAddressSettingsComponent extends React.Component<Props, LocalSta
     const { showTransfer, showAddBundledTxs } = this.state
 
     return (
-      <SceneWrapper background="theme">
+      <SceneWrapper>
         <Tile type="static" title={lstrings.fio_address_register_form_field_label} body={fioAddressName} />
         {bundledTxs != null ? <Tile type="static" title={lstrings.fio_address_details_screen_bundled_txs} body={`${bundledTxs}`} /> : null}
         {showAddBundledTxs && (
diff --git a/src/components/scenes/Fio/FioConnectWalletConfirmScene.tsx b/src/components/scenes/Fio/FioConnectWalletConfirmScene.tsx
index 5bee3548348..c17778767e9 100644
--- a/src/components/scenes/Fio/FioConnectWalletConfirmScene.tsx
+++ b/src/components/scenes/Fio/FioConnectWalletConfirmScene.tsx
@@ -184,7 +184,7 @@ export class FioConnectWalletConfirm extends React.Component<Props, State> {
     const styles = getStyles(theme)
 
     return (
-      <SceneWrapper scroll background="theme">
+      <SceneWrapper scroll>
         <Tile type="static" title={lstrings.fio_address_register_form_field_label} body={fioAddressName} />
         {walletsToConnect.length ? (
           <Tile type="static" title={lstrings.title_fio_connect_to_wallet}>
diff --git a/src/components/scenes/Fio/FioCreateHandleScene.tsx b/src/components/scenes/Fio/FioCreateHandleScene.tsx
index 81b239e5cf9..1f9dd83c028 100644
--- a/src/components/scenes/Fio/FioCreateHandleScene.tsx
+++ b/src/components/scenes/Fio/FioCreateHandleScene.tsx
@@ -177,7 +177,7 @@ export const FioCreateHandleScene = (props: Props) => {
   }, [])
 
   return (
-    <SceneWrapper background="theme">
+    <SceneWrapper>
       <KeyboardAwareScrollView contentContainerStyle={styles.container} keyboardShouldPersistTaps="handled">
         <FastImage source={{ uri: getFioCustomizeHandleImage(theme) }} style={styles.icon} />
         <EdgeText style={styles.title}>{lstrings.personalize_wallet_title}</EdgeText>
diff --git a/src/components/scenes/Fio/FioDomainRegisterScene.tsx b/src/components/scenes/Fio/FioDomainRegisterScene.tsx
index f5aa0b9c931..a16c72a6191 100644
--- a/src/components/scenes/Fio/FioDomainRegisterScene.tsx
+++ b/src/components/scenes/Fio/FioDomainRegisterScene.tsx
@@ -256,7 +256,7 @@ export class FioDomainRegister extends React.PureComponent<Props, LocalState> {
     }
 
     return (
-      <SceneWrapper background="theme">
+      <SceneWrapper>
         <SceneHeader style={styles.header} title={lstrings.title_register_fio_domain}>
           <IonIcon name="ios-at" style={styles.iconIon} color={theme.icon} size={theme.rem(1.5)} />
         </SceneHeader>
diff --git a/src/components/scenes/Fio/FioDomainRegisterSelectWalletScene.tsx b/src/components/scenes/Fio/FioDomainRegisterSelectWalletScene.tsx
index 636ed69cca0..50b9cb6c216 100644
--- a/src/components/scenes/Fio/FioDomainRegisterSelectWalletScene.tsx
+++ b/src/components/scenes/Fio/FioDomainRegisterSelectWalletScene.tsx
@@ -204,7 +204,7 @@ class FioDomainRegisterSelectWallet extends React.PureComponent<Props, LocalStat
     }
 
     return (
-      <SceneWrapper scroll background="theme">
+      <SceneWrapper scroll>
         <IonIcon name="ios-at" style={styles.iconIon} color={theme.primaryText} size={theme.rem(4)} />
         <EdgeText style={styles.instructionalText} numberOfLines={7}>
           {detailsText}
diff --git a/src/components/scenes/Fio/FioDomainSettingsScene.tsx b/src/components/scenes/Fio/FioDomainSettingsScene.tsx
index 715af8cf044..4c56053fd6c 100644
--- a/src/components/scenes/Fio/FioDomainSettingsScene.tsx
+++ b/src/components/scenes/Fio/FioDomainSettingsScene.tsx
@@ -161,7 +161,7 @@ export class FioDomainSettingsComponent extends React.Component<Props, State> {
     const { showRenew, showVisibility, showTransfer } = this.state
 
     return (
-      <SceneWrapper background="theme">
+      <SceneWrapper>
         <Tile type="static" title={lstrings.fio_domain_label} body={`${FIO_ADDRESS_DELIMITER} ${fioDomainName}`} />
         <Tile type="static" title={lstrings.fio_address_details_screen_expires} body={formatDate(new Date(expiration))} />
         {showVisibility && (
diff --git a/src/components/scenes/Fio/FioNameConfirmScene.tsx b/src/components/scenes/Fio/FioNameConfirmScene.tsx
index 11319eaa7bc..d50f5f0f027 100644
--- a/src/components/scenes/Fio/FioNameConfirmScene.tsx
+++ b/src/components/scenes/Fio/FioNameConfirmScene.tsx
@@ -140,7 +140,7 @@ class FioNameConfirm extends React.PureComponent<Props> {
     const styles = getStyles(theme)
 
     return (
-      <SceneWrapper background="theme">
+      <SceneWrapper>
         <SceneHeader title={this.isFioAddress() ? lstrings.title_fio_address_confirmation : lstrings.title_register_fio_domain} underline />
         <View style={styles.scene}>
           <Tile
diff --git a/src/components/scenes/Fio/FioRequestConfirmationScene.tsx b/src/components/scenes/Fio/FioRequestConfirmationScene.tsx
index 5c1b6fab323..daa38b3ac31 100644
--- a/src/components/scenes/Fio/FioRequestConfirmationScene.tsx
+++ b/src/components/scenes/Fio/FioRequestConfirmationScene.tsx
@@ -299,7 +299,7 @@ export class FioRequestConfirmationConnected extends React.Component<Props, Stat
     const fiatName = edgeWallet.fiatCurrencyCode.replace('iso:', '')
 
     return (
-      <SceneWrapper background="theme">
+      <SceneWrapper>
         <Tile type="editable" title={lstrings.fio_confirm_request_from} body={fioAddressFrom} onPress={this.onAddressFromPressed} />
         <Tile
           type="editable"
diff --git a/src/components/scenes/Fio/FioRequestListScene.tsx b/src/components/scenes/Fio/FioRequestListScene.tsx
index f41cb008234..1828b5c6c47 100644
--- a/src/components/scenes/Fio/FioRequestListScene.tsx
+++ b/src/components/scenes/Fio/FioRequestListScene.tsx
@@ -526,7 +526,7 @@ class FioRequestList extends React.Component<Props, LocalState> {
     const styles = getStyles(theme)
 
     return (
-      <SceneWrapper background="theme">
+      <SceneWrapper>
         {fullScreenLoader && <FullScreenLoader indicatorStyles={styles.fullScreenLoader} />}
         <View style={styles.scene}>
           <View style={styles.row}>
diff --git a/src/components/scenes/Fio/FioSentRequestDetailsScene.tsx b/src/components/scenes/Fio/FioSentRequestDetailsScene.tsx
index 329d191a2c6..07eaa304863 100644
--- a/src/components/scenes/Fio/FioSentRequestDetailsScene.tsx
+++ b/src/components/scenes/Fio/FioSentRequestDetailsScene.tsx
@@ -67,7 +67,7 @@ class FioSentRequestDetailsComponent extends React.PureComponent<Props> {
     const styles = getStyles(theme)
 
     return (
-      <SceneWrapper background="theme">
+      <SceneWrapper>
         <SceneHeader title={lstrings.title_fio_sent_request_details} underline />
         <View style={styles.headerSpace} />
         {this.amountField()}
diff --git a/src/components/scenes/Fio/FioStakingChangeScene.tsx b/src/components/scenes/Fio/FioStakingChangeScene.tsx
index 7a6dd040966..0869450eec3 100644
--- a/src/components/scenes/Fio/FioStakingChangeScene.tsx
+++ b/src/components/scenes/Fio/FioStakingChangeScene.tsx
@@ -337,7 +337,7 @@ export const FioStakingChangeScene = withWallet((props: Props) => {
   }
 
   return (
-    <SceneWrapper background="theme">
+    <SceneWrapper>
       {(() => {
         switch (change) {
           case 'add':
diff --git a/src/components/scenes/Fio/FioStakingOverviewScene.tsx b/src/components/scenes/Fio/FioStakingOverviewScene.tsx
index 16ce2300f33..12e6d71efe8 100644
--- a/src/components/scenes/Fio/FioStakingOverviewScene.tsx
+++ b/src/components/scenes/Fio/FioStakingOverviewScene.tsx
@@ -109,7 +109,7 @@ export const FioStakingOverviewSceneComponent = (props: Props) => {
   const fiatStaked = ` (${fiatSymbol}${stakingFiatBalanceFormat} ${fiatCurrencyCode})`
 
   return (
-    <SceneWrapper background="theme" hasTabs={false}>
+    <SceneWrapper hasTabs={false}>
       <SceneHeader style={styles.sceneHeader} title={sprintf(lstrings.staking_overview_header, currencyCode)} underline withTopMargin>
         <Image style={styles.currencyLogo} source={fioLogo} />
       </SceneHeader>
diff --git a/src/components/scenes/FormScene.tsx b/src/components/scenes/FormScene.tsx
index 6d5f28ae129..a7a40164e47 100644
--- a/src/components/scenes/FormScene.tsx
+++ b/src/components/scenes/FormScene.tsx
@@ -22,7 +22,7 @@ export const FormScene = (props: Props) => {
   const styles = getStyles(theme)
 
   return (
-    <SceneWrapper background="theme">
+    <SceneWrapper>
       <SceneHeader tertiary={headerTertiary} title={headerText} underline withTopMargin />
       <KeyboardAwareScrollView contentContainerStyle={styles.container} extraScrollHeight={theme.rem(2.75)} enableOnAndroid>
         {children}
diff --git a/src/components/scenes/GuiPluginListScene.tsx b/src/components/scenes/GuiPluginListScene.tsx
index 1421a4b77ac..4e0dc965700 100644
--- a/src/components/scenes/GuiPluginListScene.tsx
+++ b/src/components/scenes/GuiPluginListScene.tsx
@@ -504,7 +504,7 @@ export const GuiPluginListScene = React.memo((props: OwnProps) => {
   }
 
   return (
-    <SceneWrapper background="theme" hasTabs hasNotifications>
+    <SceneWrapper hasTabs hasNotifications>
       {({ insetStyles }) => (
         <GuiPluginList
           navigation={navigation}
diff --git a/src/components/scenes/GuiPluginViewScene.tsx b/src/components/scenes/GuiPluginViewScene.tsx
index 523fc9e0a7d..acba49840c8 100644
--- a/src/components/scenes/GuiPluginViewScene.tsx
+++ b/src/components/scenes/GuiPluginViewScene.tsx
@@ -22,7 +22,7 @@ export function GuiPluginViewScene(props: Props): JSX.Element {
   const { deepPath, deepQuery, plugin } = route.params
 
   return (
-    <SceneWrapper background="theme" hasTabs={route.name !== 'pluginView'}>
+    <SceneWrapper hasTabs={route.name !== 'pluginView'}>
       <EdgeProviderComponent plugin={plugin} deepPath={deepPath} deepQuery={deepQuery} navigation={navigation} />
     </SceneWrapper>
   )
diff --git a/src/components/scenes/LoadingScene.tsx b/src/components/scenes/LoadingScene.tsx
index 242c3197f8b..2d20bd26c57 100644
--- a/src/components/scenes/LoadingScene.tsx
+++ b/src/components/scenes/LoadingScene.tsx
@@ -12,7 +12,7 @@ import { useTheme } from '../services/ThemeContext'
 export const LoadingScene = () => {
   const theme = useTheme()
   return (
-    <SceneWrapper background="theme" hasHeader={false} hasTabs={false}>
+    <SceneWrapper hasHeader={false} hasTabs={false}>
       <View style={styles.container}>
         <ActivityIndicator color={theme.loadingIcon} size="large" />
       </View>
diff --git a/src/components/scenes/Loans/LoanCreateConfirmationScene.tsx b/src/components/scenes/Loans/LoanCreateConfirmationScene.tsx
index 0d6a359f80e..ac70a394552 100644
--- a/src/components/scenes/Loans/LoanCreateConfirmationScene.tsx
+++ b/src/components/scenes/Loans/LoanCreateConfirmationScene.tsx
@@ -218,7 +218,7 @@ export const LoanCreateConfirmationScene = (props: Props) => {
   if (loanAccountError != null) return <Alert title={lstrings.error_unexpected_title} type="error" message={translateError(loanAccountError)} />
 
   return loanAccount == null ? (
-    <SceneWrapper background="theme">
+    <SceneWrapper>
       <FillLoader />
     </SceneWrapper>
   ) : (
diff --git a/src/components/scenes/Loans/LoanDashboardScene.tsx b/src/components/scenes/Loans/LoanDashboardScene.tsx
index 54ea757840a..dc3600e3a19 100644
--- a/src/components/scenes/Loans/LoanDashboardScene.tsx
+++ b/src/components/scenes/Loans/LoanDashboardScene.tsx
@@ -181,7 +181,7 @@ export const LoanDashboardScene = (props: Props) => {
 
   if (!isWalletsLoaded) {
     return (
-      <SceneWrapper background="theme" hasTabs={false}>
+      <SceneWrapper hasTabs={false}>
         <SceneHeader title={lstrings.loan_dashboard_title} underline />
         <FillLoader />
       </SceneWrapper>
@@ -189,7 +189,7 @@ export const LoanDashboardScene = (props: Props) => {
   }
 
   return (
-    <SceneWrapper background="theme" hasTabs={false}>
+    <SceneWrapper hasTabs={false}>
       <SceneHeader
         tertiary={
           <TouchableOpacity onPress={handleInfoIconPress}>
diff --git a/src/components/scenes/Loans/LoanStatusScene.tsx b/src/components/scenes/Loans/LoanStatusScene.tsx
index 1c30d19a582..b9ff46cfeef 100644
--- a/src/components/scenes/Loans/LoanStatusScene.tsx
+++ b/src/components/scenes/Loans/LoanStatusScene.tsx
@@ -93,7 +93,7 @@ export const LoanStatusSceneComponent = (props: Props) => {
   const isProgramDone = steps.length > 0 && steps[steps.length - 1].status === 'done'
 
   return (
-    <SceneWrapper background="theme" hasHeader hasTabs={false}>
+    <SceneWrapper hasHeader hasTabs={false}>
       <SceneHeader
         tertiary={
           <TouchableOpacity onPress={handleInfoIconPress}>
diff --git a/src/components/scenes/MigrateWalletCalculateFeeScene.tsx b/src/components/scenes/MigrateWalletCalculateFeeScene.tsx
index aa07f49b5b2..1158f0e5dc8 100644
--- a/src/components/scenes/MigrateWalletCalculateFeeScene.tsx
+++ b/src/components/scenes/MigrateWalletCalculateFeeScene.tsx
@@ -215,7 +215,7 @@ const MigrateWalletCalculateFeeComponent = (props: Props) => {
   const keyExtractor = useHandler((item: MigrateWalletItem) => item.key)
 
   return (
-    <SceneWrapper background="theme">
+    <SceneWrapper>
       <View style={styles.content}>
         <SceneHeader title={lstrings.migrate_wallets_calculate_fee_title} withTopMargin />
         <EdgeText style={styles.instructionalText} numberOfLines={4}>
diff --git a/src/components/scenes/MigrateWalletCompletionScene.tsx b/src/components/scenes/MigrateWalletCompletionScene.tsx
index f36a93db5a5..26ac7234c90 100644
--- a/src/components/scenes/MigrateWalletCompletionScene.tsx
+++ b/src/components/scenes/MigrateWalletCompletionScene.tsx
@@ -238,7 +238,7 @@ const MigrateWalletCompletionComponent = (props: Props) => {
   const keyExtractor = useHandler((item: MigrateWalletItem) => item.key)
 
   return (
-    <SceneWrapper background="theme">
+    <SceneWrapper>
       {({ insetStyles }) => (
         <View style={[styles.content, insetStyles]}>
           <SceneHeader title={lstrings.migrate_wallets_title} withTopMargin />
diff --git a/src/components/scenes/MigrateWalletSelectCryptoScene.tsx b/src/components/scenes/MigrateWalletSelectCryptoScene.tsx
index 271fc7954bf..33488fb980f 100644
--- a/src/components/scenes/MigrateWalletSelectCryptoScene.tsx
+++ b/src/components/scenes/MigrateWalletSelectCryptoScene.tsx
@@ -137,7 +137,7 @@ const MigrateWalletSelectCryptoComponent = (props: Props) => {
   const keyExtractor = useHandler((item: MigrateWalletItem) => item.key)
 
   return (
-    <SceneWrapper background="theme">
+    <SceneWrapper>
       {({ insetStyles }) => (
         <View style={[styles.content, { ...insetStyles, paddingBottom: 0 }]}>
           <SceneHeader title={lstrings.migrate_wallets_select_crypto_title} withTopMargin />
diff --git a/src/components/scenes/NotificationScene.tsx b/src/components/scenes/NotificationScene.tsx
index cfac16cf486..30477a770ab 100644
--- a/src/components/scenes/NotificationScene.tsx
+++ b/src/components/scenes/NotificationScene.tsx
@@ -42,7 +42,7 @@ export const NotificationScene = (props: Props) => {
   )
 
   return (
-    <SceneWrapper scroll background="theme" hasTabs={false}>
+    <SceneWrapper scroll hasTabs={false}>
       <SettingsSwitchRow
         key="marketing-notifications"
         label={lstrings.settings_marketing_notifications_switch}
diff --git a/src/components/scenes/OtpSettingsScene.tsx b/src/components/scenes/OtpSettingsScene.tsx
index 821973566f7..a44be2fc249 100644
--- a/src/components/scenes/OtpSettingsScene.tsx
+++ b/src/components/scenes/OtpSettingsScene.tsx
@@ -98,7 +98,7 @@ class OtpSettingsSceneComponent extends React.Component<Props, State> {
     const otpDescriptionTwo = sprintf(lstrings.otp_description_two, config.appName)
 
     return (
-      <SceneWrapper background="theme" padding={theme.rem(0.5)} scroll>
+      <SceneWrapper padding={theme.rem(0.5)} scroll>
         <AntDesignIcon name="lock" style={styles.icon} />
         <Text style={styles.titleText}>{otpKey != null ? lstrings.title_otp_enabled : lstrings.title_otp_disabled}</Text>
 
diff --git a/src/components/scenes/PasswordRecoveryScene.tsx b/src/components/scenes/PasswordRecoveryScene.tsx
index c3aed60d05b..6ade831bd2a 100644
--- a/src/components/scenes/PasswordRecoveryScene.tsx
+++ b/src/components/scenes/PasswordRecoveryScene.tsx
@@ -22,7 +22,7 @@ class ChangeRecoveryComponent extends React.Component<Props> {
     const handleComplete = () => navigation.goBack()
 
     return (
-      <SceneWrapper hasTabs={false} background="theme">
+      <SceneWrapper hasTabs={false}>
         <PasswordRecoveryScreen
           branding={{ appName: config.appName }}
           account={account}
diff --git a/src/components/scenes/PromotionSettingsScene.tsx b/src/components/scenes/PromotionSettingsScene.tsx
index fb4731d722e..b049f93070c 100644
--- a/src/components/scenes/PromotionSettingsScene.tsx
+++ b/src/components/scenes/PromotionSettingsScene.tsx
@@ -31,7 +31,7 @@ export class PromotionSettingsComponent extends React.Component<Props> {
     const { accountReferral, deviceReferral, removePromotion } = this.props
 
     return (
-      <SceneWrapper background="theme" hasTabs={false}>
+      <SceneWrapper hasTabs={false}>
         <SettingsHeaderRow label={lstrings.settings_promotion_affiliation_header} />
         <SettingsSubHeader
           label={
diff --git a/src/components/scenes/RequestScene.tsx b/src/components/scenes/RequestScene.tsx
index 4f0071edcc7..5411430ed51 100644
--- a/src/components/scenes/RequestScene.tsx
+++ b/src/components/scenes/RequestScene.tsx
@@ -262,7 +262,7 @@ export class RequestSceneComponent extends React.Component<Props, State> {
   renderKeysOnlyMode = () => {
     const styles = getStyles(this.props.theme)
     return (
-      <SceneWrapper background="theme" hasTabs={false}>
+      <SceneWrapper hasTabs={false}>
         <SceneHeader title={sprintf(lstrings.request_deprecated_header, this.props.wallet?.currencyInfo.displayName)} underline withTopMargin />
         <Text style={styles.keysOnlyModeText}>{sprintf(lstrings.request_deprecated_currency_code, this.props.primaryCurrencyInfo?.displayCurrencyCode)}</Text>
         <MainButton onPress={this.handleKeysOnlyModePress} label={lstrings.help_support} marginRem={2} type="secondary">
@@ -310,7 +310,7 @@ export class RequestSceneComponent extends React.Component<Props, State> {
     return keysOnlyMode ? (
       this.renderKeysOnlyMode()
     ) : (
-      <SceneWrapper background="theme" hasTabs={false}>
+      <SceneWrapper hasTabs={false}>
         <View style={styles.container}>
           <EdgeAnim style={styles.requestContainer} enter={{ type: 'fadeInUp', distance: 75 }}>
             <EdgeText style={styles.title}>{lstrings.fragment_request_subtitle}</EdgeText>
diff --git a/src/components/scenes/SendScene2.tsx b/src/components/scenes/SendScene2.tsx
index 02f99b435e7..d472e2c06cf 100644
--- a/src/components/scenes/SendScene2.tsx
+++ b/src/components/scenes/SendScene2.tsx
@@ -985,7 +985,7 @@ const SendComponent = (props: Props) => {
     disabledText = lstrings.spending_limits_enter_pin
   }
   return (
-    <SceneWrapper background="theme" hasNotifications>
+    <SceneWrapper hasNotifications>
       {({ insetStyles }) => (
         <>
           <StyledKeyboardAwareScrollView
diff --git a/src/components/scenes/SettingsScene.tsx b/src/components/scenes/SettingsScene.tsx
index bea22352436..8622697eb16 100644
--- a/src/components/scenes/SettingsScene.tsx
+++ b/src/components/scenes/SettingsScene.tsx
@@ -289,7 +289,7 @@ export class SettingsSceneComponent extends React.Component<Props, State> {
     const isLightAccount = username == null
 
     return (
-      <SceneWrapper scroll background="theme" hasTabs={false}>
+      <SceneWrapper scroll hasTabs={false}>
         <SettingsHeaderRow
           icon={<FontAwesomeIcon color={theme.icon} name="user-o" size={iconSize} />}
           label={`${lstrings.settings_account_title_cap}: ${username ?? lstrings.missing_username}`}
diff --git a/src/components/scenes/Staking/StakeModifyScene.tsx b/src/components/scenes/Staking/StakeModifyScene.tsx
index 8b7586de7ee..0d2a113d163 100644
--- a/src/components/scenes/Staking/StakeModifyScene.tsx
+++ b/src/components/scenes/Staking/StakeModifyScene.tsx
@@ -468,7 +468,7 @@ const StakeModifySceneComponent = (props: Props) => {
 
   if (stakePosition.allocations.length === 0) {
     return (
-      <SceneWrapper background="theme">
+      <SceneWrapper>
         <FillLoader />
       </SceneWrapper>
     )
@@ -477,7 +477,7 @@ const StakeModifySceneComponent = (props: Props) => {
   const isSliderDisabled = sliderLocked || changeQuote == null || !changeQuote.allocations.some(quoteAllocation => gt(quoteAllocation.nativeAmount, '0'))
 
   return (
-    <SceneWrapper scroll background="theme">
+    <SceneWrapper scroll>
       <SceneHeader style={styles.sceneHeader} title={title} underline withTopMargin>
         {icon}
       </SceneHeader>
diff --git a/src/components/scenes/Staking/StakeOptionsScene.tsx b/src/components/scenes/Staking/StakeOptionsScene.tsx
index f51c84e1881..41740782f13 100644
--- a/src/components/scenes/Staking/StakeOptionsScene.tsx
+++ b/src/components/scenes/Staking/StakeOptionsScene.tsx
@@ -77,7 +77,7 @@ const StakeOptionsSceneComponent = (props: Props) => {
   }
 
   return (
-    <SceneWrapper scroll background="theme">
+    <SceneWrapper scroll>
       <SceneHeader style={styles.sceneHeader} title={sprintf(lstrings.staking_change_add_header, currencyCode)} underline withTopMargin>
         <CryptoIconUi4 marginRem={[0, 0, 0, 0.5]} walletId={walletId} tokenId={tokenId} sizeRem={1.5} />
       </SceneHeader>
diff --git a/src/components/scenes/Staking/StakeOverviewScene.tsx b/src/components/scenes/Staking/StakeOverviewScene.tsx
index c141d45477f..2deaf544625 100644
--- a/src/components/scenes/Staking/StakeOverviewScene.tsx
+++ b/src/components/scenes/Staking/StakeOverviewScene.tsx
@@ -129,7 +129,7 @@ const StakeOverviewSceneComponent = (props: Props) => {
 
   if (stakeAllocations == null || rewardAllocations == null)
     return (
-      <SceneWrapper background="theme">
+      <SceneWrapper>
         <FillLoader />
       </SceneWrapper>
     )
@@ -137,7 +137,7 @@ const StakeOverviewSceneComponent = (props: Props) => {
   const { canStake = false, canClaim = false, canUnstakeAndClaim = false, canUnstake = false } = stakePosition ?? {}
 
   return (
-    <SceneWrapper scroll background="theme">
+    <SceneWrapper scroll>
       <SceneHeader title={title} withTopMargin />
       <View style={styles.card}>
         <StakingReturnsCard
diff --git a/src/components/scenes/SwapSettingsScene.tsx b/src/components/scenes/SwapSettingsScene.tsx
index 18d1735875d..0602de47da3 100644
--- a/src/components/scenes/SwapSettingsScene.tsx
+++ b/src/components/scenes/SwapSettingsScene.tsx
@@ -175,7 +175,7 @@ export class SwapSettings extends React.Component<Props, State> {
 
   render() {
     return (
-      <SceneWrapper background="theme" hasTabs={false}>
+      <SceneWrapper hasTabs={false}>
         <ScrollView contentContainerStyle={{ paddingBottom: this.props.theme.rem(4) }}>
           <SettingsSubHeader label={lstrings.settings_exchange_instruction} />
           <SettingsHeaderRow label={lstrings.swap_preferred_header} />
diff --git a/src/components/scenes/TransactionsExportScene.tsx b/src/components/scenes/TransactionsExportScene.tsx
index fe4d192af04..e9c20ce6d3e 100644
--- a/src/components/scenes/TransactionsExportScene.tsx
+++ b/src/components/scenes/TransactionsExportScene.tsx
@@ -133,7 +133,7 @@ class TransactionsExportSceneComponent extends React.PureComponent<Props, State>
     const disabledExport = !isExportQbo && !isExportCsv && !isExportBitwave
 
     return (
-      <SceneWrapper scroll background="theme">
+      <SceneWrapper scroll>
         <SettingsRow label={walletName} onPress={() => undefined} />
         <SettingsHeaderRow icon={<EntypoIcon name="calendar" color={theme.icon} size={iconSize} />} label={lstrings.export_transaction_date_range} />
         <SettingsRow label={lstrings.export_transaction_this_month} onPress={this.setThisMonth} />
diff --git a/src/components/scenes/UpgradeUsernameScreen.tsx b/src/components/scenes/UpgradeUsernameScreen.tsx
index d9e639a489e..806cabefe9b 100644
--- a/src/components/scenes/UpgradeUsernameScreen.tsx
+++ b/src/components/scenes/UpgradeUsernameScreen.tsx
@@ -19,7 +19,7 @@ export const UpgradeUsernameScene = (props: Props) => {
     navigation.goBack()
   }
   return (
-    <SceneWrapper hasTabs={false} background="theme">
+    <SceneWrapper hasTabs={false}>
       <UpgradeUsernameScreen account={account} context={context} onComplete={handleComplete} onLogEvent={logEvent} />
     </SceneWrapper>
   )
diff --git a/src/components/scenes/WalletListScene.tsx b/src/components/scenes/WalletListScene.tsx
index 9d932ca2e4f..92a529d9a8f 100644
--- a/src/components/scenes/WalletListScene.tsx
+++ b/src/components/scenes/WalletListScene.tsx
@@ -85,7 +85,7 @@ export function WalletListScene(props: Props) {
   const handlePressDone = useHandler(() => setSorting(false))
 
   return (
-    <SceneWrapper hasTabs background="theme" hasHeader hasNotifications padding={theme.rem(0.5)}>
+    <SceneWrapper hasTabs hasHeader hasNotifications padding={theme.rem(0.5)}>
       {({ insetStyles }) => (
         <>
           <WiredProgressBar />
diff --git a/src/components/scenes/WcConnectScene.tsx b/src/components/scenes/WcConnectScene.tsx
index 86a8046a487..1b7ebea5e32 100644
--- a/src/components/scenes/WcConnectScene.tsx
+++ b/src/components/scenes/WcConnectScene.tsx
@@ -116,7 +116,7 @@ export const WcConnectScene = (props: Props) => {
   }
 
   return (
-    <SceneWrapper background="theme" hasTabs={false}>
+    <SceneWrapper hasTabs={false}>
       <SceneHeader title={lstrings.wc_confirm_title} underline />
       <ScrollView contentContainerStyle={styles.container}>
         <View style={styles.listRow}>
diff --git a/src/components/scenes/WcConnectionsScene.tsx b/src/components/scenes/WcConnectionsScene.tsx
index cdf7001fdc5..045290db70c 100644
--- a/src/components/scenes/WcConnectionsScene.tsx
+++ b/src/components/scenes/WcConnectionsScene.tsx
@@ -89,7 +89,7 @@ export const WcConnectionsScene = (props: Props) => {
   }
 
   return (
-    <SceneWrapper background="theme" hasTabs={false}>
+    <SceneWrapper hasTabs={false}>
       <SceneHeader underline title={lstrings.wc_walletconnect_title} />
       <ScrollView contentContainerStyle={styles.container}>
         <EdgeText style={styles.subTitle}>{lstrings.wc_walletconnect_subtitle}</EdgeText>
diff --git a/src/components/scenes/WcDisconnectScene.tsx b/src/components/scenes/WcDisconnectScene.tsx
index edddd3b346f..c10da07e5ba 100644
--- a/src/components/scenes/WcDisconnectScene.tsx
+++ b/src/components/scenes/WcDisconnectScene.tsx
@@ -39,7 +39,7 @@ export const WcDisconnectScene = (props: Props) => {
   }
 
   return (
-    <SceneWrapper background="theme" hasTabs={false}>
+    <SceneWrapper hasTabs={false}>
       <SceneHeader underline title={lstrings.wc_walletconnect_title} />
       <View style={styles.container}>
         <Card paddingRem={0} marginRem={[0.5, 0.5, 0.5]}>
diff --git a/src/components/scenes/WebViewScene.tsx b/src/components/scenes/WebViewScene.tsx
index 41a5b54be87..9264e6ea3cd 100644
--- a/src/components/scenes/WebViewScene.tsx
+++ b/src/components/scenes/WebViewScene.tsx
@@ -15,7 +15,7 @@ export const WebViewScene = (props: Props) => {
   const { uri } = props.route.params
 
   return (
-    <SceneWrapper background="theme" hasTabs={false}>
+    <SceneWrapper hasTabs={false}>
       <WebView source={{ uri }} />
     </SceneWrapper>
   )
diff --git a/src/plugins/gui/scenes/AddressFormScene.tsx b/src/plugins/gui/scenes/AddressFormScene.tsx
index 63a13a8152e..cfe39d12c36 100644
--- a/src/plugins/gui/scenes/AddressFormScene.tsx
+++ b/src/plugins/gui/scenes/AddressFormScene.tsx
@@ -250,7 +250,7 @@ export const AddressFormScene = React.memo((props: Props) => {
       key !== 'address2' && formData[key].trim() === ''
   )
   return (
-    <SceneWrapper background="theme" hasNotifications>
+    <SceneWrapper hasNotifications>
       {({ insetStyles }) => (
         <>
           <SceneHeader title={headerTitle} underline withTopMargin />
diff --git a/src/plugins/gui/scenes/FiatPluginEnterAmountScene.tsx b/src/plugins/gui/scenes/FiatPluginEnterAmountScene.tsx
index b4112432ed5..769bb970dc8 100644
--- a/src/plugins/gui/scenes/FiatPluginEnterAmountScene.tsx
+++ b/src/plugins/gui/scenes/FiatPluginEnterAmountScene.tsx
@@ -129,7 +129,7 @@ export const FiatPluginEnterAmountScene = React.memo((props: Props) => {
 
   const poweredByIconPath = poweredBy != null ? getPartnerIconUri(poweredBy.poweredByIcon) : undefined
   return (
-    <SceneWrapper scroll keyboardShouldPersistTaps="handled" background="theme" hasNotifications>
+    <SceneWrapper scroll keyboardShouldPersistTaps="handled" hasNotifications>
       <SceneHeader style={styles.sceneHeader} title={headerTitle} underline withTopMargin>
         {headerIcon}
       </SceneHeader>
diff --git a/src/plugins/gui/scenes/FiatPluginWebView.tsx b/src/plugins/gui/scenes/FiatPluginWebView.tsx
index d52af82d553..c9130bdd9db 100644
--- a/src/plugins/gui/scenes/FiatPluginWebView.tsx
+++ b/src/plugins/gui/scenes/FiatPluginWebView.tsx
@@ -28,7 +28,7 @@ export function FiatPluginWebViewComponent(props: Props): JSX.Element {
   })
 
   return (
-    <SceneWrapper background="theme" hasTabs>
+    <SceneWrapper hasTabs>
       <WebView
         allowUniversalAccessFromFileURLs
         geolocationEnabled
diff --git a/src/plugins/gui/scenes/InfoDisplayScene.tsx b/src/plugins/gui/scenes/InfoDisplayScene.tsx
index de6cdc8f9af..cc62df14d52 100644
--- a/src/plugins/gui/scenes/InfoDisplayScene.tsx
+++ b/src/plugins/gui/scenes/InfoDisplayScene.tsx
@@ -122,7 +122,7 @@ export const InfoDisplayScene = React.memo((props: Props) => {
     ))
 
   return (
-    <SceneWrapper scroll background="theme" hasNotifications>
+    <SceneWrapper scroll hasNotifications>
       <SceneHeader title={headerTitle} underline withTopMargin />
       <View style={styles.promptContainer}>
         <EdgeText numberOfLines={12}>{promptMessage}</EdgeText>
diff --git a/src/plugins/gui/scenes/RewardsCardDashboardScene.tsx b/src/plugins/gui/scenes/RewardsCardDashboardScene.tsx
index fa09711fc5d..ae4bfc6b5f3 100644
--- a/src/plugins/gui/scenes/RewardsCardDashboardScene.tsx
+++ b/src/plugins/gui/scenes/RewardsCardDashboardScene.tsx
@@ -53,7 +53,7 @@ export const RewardsCardDashboardScene = (props: Props) => {
 
   return (
     <>
-      <SceneWrapper keyboardShouldPersistTaps="handled" background="theme" hasHeader scroll hasTabs>
+      <SceneWrapper keyboardShouldPersistTaps="handled" hasHeader scroll hasTabs>
         <SceneHeader
           title={lstrings.rewards_card_dashboard_title}
           tertiary={
diff --git a/src/plugins/gui/scenes/RewardsCardWelcomeScene.tsx b/src/plugins/gui/scenes/RewardsCardWelcomeScene.tsx
index 4780157969b..cde4519c57b 100644
--- a/src/plugins/gui/scenes/RewardsCardWelcomeScene.tsx
+++ b/src/plugins/gui/scenes/RewardsCardWelcomeScene.tsx
@@ -21,7 +21,7 @@ export const RewardsCardWelcomeScene = (props: Props) => {
   const { onMoreInfo, onNewCard } = props.route.params
 
   return (
-    <SceneWrapper keyboardShouldPersistTaps="handled" background="theme">
+    <SceneWrapper keyboardShouldPersistTaps="handled">
       <SceneContainer>
         <WelcomeContainer>
           <IllustrationImage source={visaCardSayAnythingIllustration} />
diff --git a/src/plugins/gui/scenes/SepaFormScene.tsx b/src/plugins/gui/scenes/SepaFormScene.tsx
index 2304a839587..5936f079a98 100644
--- a/src/plugins/gui/scenes/SepaFormScene.tsx
+++ b/src/plugins/gui/scenes/SepaFormScene.tsx
@@ -58,7 +58,7 @@ export const SepaFormScene = React.memo((props: Props) => {
   }, [])
 
   return (
-    <SceneWrapper background="theme" hasNotifications>
+    <SceneWrapper hasNotifications>
       {({ insetStyles }) => (
         <>
           <SceneHeader title={headerTitle} underline withTopMargin />

From 3fe970377ac74053d0633b1b11bd3539827d9ae5 Mon Sep 17 00:00:00 2001
From: William Swanson <swansontec@gmail.com>
Date: Fri, 5 Jan 2024 14:11:12 -0800
Subject: [PATCH 2/5] Remove unused `ClickableRow` props

---
 .../components/ClickableRow.test.tsx          | 12 +--------
 .../__snapshots__/ClickableRow.test.tsx.snap  | 27 +++----------------
 src/components/themed/ClickableRow.tsx        | 24 +++--------------
 3 files changed, 8 insertions(+), 55 deletions(-)

diff --git a/src/__tests__/components/ClickableRow.test.tsx b/src/__tests__/components/ClickableRow.test.tsx
index 18a64572ff7..a07f188fbba 100644
--- a/src/__tests__/components/ClickableRow.test.tsx
+++ b/src/__tests__/components/ClickableRow.test.tsx
@@ -12,17 +12,7 @@ describe('ClickableRow', () => {
     const fakeChild: React.ReactNode = 'String'
 
     const actual = renderer.render(
-      <ClickableRowComponent
-        onPress={() => undefined}
-        onLongPress={() => undefined}
-        highlight
-        gradient
-        autoHeight
-        underline
-        marginRem={11}
-        paddingRem={11}
-        theme={getTheme()}
-      >
+      <ClickableRowComponent onPress={() => undefined} onLongPress={() => undefined} autoHeight underline marginRem={11} paddingRem={11} theme={getTheme()}>
         {fakeChild}
       </ClickableRowComponent>
     )
diff --git a/src/__tests__/components/__snapshots__/ClickableRow.test.tsx.snap b/src/__tests__/components/__snapshots__/ClickableRow.test.tsx.snap
index b5f89c46d61..86af128cd8b 100644
--- a/src/__tests__/components/__snapshots__/ClickableRow.test.tsx.snap
+++ b/src/__tests__/components/__snapshots__/ClickableRow.test.tsx.snap
@@ -1,31 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ClickableRow should render with loading props 1`] = `
-<TouchableHighlight
+<TouchableOpacity
   accessible={false}
   onLongPress={[Function]}
   onPress={[Function]}
-  underlayColor="#06090c"
 >
-  <LinearGradient
-    colors={
-      [
-        "#06090c",
-        "#1b2f3b",
-      ]
-    }
-    end={
-      {
-        "x": 1,
-        "y": 0,
-      }
-    }
-    start={
-      {
-        "x": 0,
-        "y": 0,
-      }
-    }
+  <View
     style={
       [
         {
@@ -62,6 +43,6 @@ exports[`ClickableRow should render with loading props 1`] = `
     }
   >
     String
-  </LinearGradient>
-</TouchableHighlight>
+  </View>
+</TouchableOpacity>
 `;
diff --git a/src/components/themed/ClickableRow.tsx b/src/components/themed/ClickableRow.tsx
index 379a39b7a07..d17afd52ed8 100644
--- a/src/components/themed/ClickableRow.tsx
+++ b/src/components/themed/ClickableRow.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react'
-import { TouchableHighlight, TouchableOpacity, View } from 'react-native'
-import LinearGradient from 'react-native-linear-gradient'
+import { TouchableOpacity, View } from 'react-native'
 
 import { fixSides, mapSides, sidesToMargin, sidesToPadding } from '../../util/sides'
 import { showError } from '../services/AirshipInstance'
@@ -9,8 +8,6 @@ import { cacheStyles, Theme, ThemeProps, withTheme } from '../services/ThemeCont
 interface Props {
   onPress: () => void | Promise<void>
   onLongPress?: () => void | Promise<void>
-  highlight?: boolean
-  gradient?: boolean
   autoHeight?: boolean
   children?: React.ReactNode
   underline?: boolean
@@ -21,7 +18,7 @@ interface Props {
 
 export class ClickableRowComponent extends React.PureComponent<Props & ThemeProps> {
   renderContent() {
-    const { gradient, children, marginRem, paddingRem, underline, autoHeight, theme } = this.props
+    const { children, marginRem, paddingRem, underline, autoHeight, theme } = this.props
     const styles = getStyles(theme)
     const margin = sidesToMargin(mapSides(fixSides(marginRem, 0), theme.rem))
     const padding = sidesToPadding(mapSides(fixSides(paddingRem, 0), theme.rem))
@@ -36,13 +33,6 @@ export class ClickableRowComponent extends React.PureComponent<Props & ThemeProp
         borderWidth: 0
       }
     ]
-    if (gradient) {
-      return (
-        <LinearGradient colors={theme.backgroundGradientColors} end={theme.backgroundGradientEnd} start={theme.backgroundGradientStart} style={containerStyles}>
-          {children}
-        </LinearGradient>
-      )
-    }
 
     return <View style={containerStyles}>{children}</View>
   }
@@ -53,15 +43,7 @@ export class ClickableRowComponent extends React.PureComponent<Props & ThemeProp
   }
 
   render() {
-    const { onLongPress, highlight, theme } = this.props
-
-    if (highlight) {
-      return (
-        <TouchableHighlight accessible={false} onPress={this.handlePress} onLongPress={onLongPress} underlayColor={theme.backgroundGradientColors[0]}>
-          {this.renderContent()}
-        </TouchableHighlight>
-      )
-    }
+    const { onLongPress } = this.props
 
     return (
       <TouchableOpacity accessible={false} onPress={this.handlePress} onLongPress={onLongPress}>

From 65517d35fd7648d112c0514f2211ca945bd7d9c9 Mon Sep 17 00:00:00 2001
From: William Swanson <swansontec@gmail.com>
Date: Fri, 5 Jan 2024 14:18:47 -0800
Subject: [PATCH 3/5] Remove unused `Theme.backgroundLoadingOverlay`

---
 src/theme/variables/edgeDark.ts  | 1 -
 src/theme/variables/edgeLight.ts | 1 -
 src/theme/variables/testDark.ts  | 1 -
 src/theme/variables/testLight.ts | 1 -
 src/types/Theme.ts               | 1 -
 5 files changed, 5 deletions(-)

diff --git a/src/theme/variables/edgeDark.ts b/src/theme/variables/edgeDark.ts
index c36029d8c0e..93b8d6b245f 100644
--- a/src/theme/variables/edgeDark.ts
+++ b/src/theme/variables/edgeDark.ts
@@ -133,7 +133,6 @@ export const edgeDark: Theme = {
   backgroundGradientEnd: { x: 1, y: 0 },
   backgroundImageServerUrls: ['https://content.edge.app'],
   backgroundImage: undefined,
-  backgroundLoadingOverlay: 'rgba(123,123,123,.2)',
 
   // Camera Overlay
   cameraOverlayColor: palette.black,
diff --git a/src/theme/variables/edgeLight.ts b/src/theme/variables/edgeLight.ts
index f3e3620db45..1dd45f85ac7 100644
--- a/src/theme/variables/edgeLight.ts
+++ b/src/theme/variables/edgeLight.ts
@@ -127,7 +127,6 @@ export const edgeLight: Theme = {
   backgroundGradientEnd: { x: 0, y: 1 },
   backgroundImageServerUrls: ['https://content.edge.app'],
   backgroundImage: undefined,
-  backgroundLoadingOverlay: `rgba(123,123,123,.2)`,
 
   // Camera Overlay
   cameraOverlayColor: palette.gray,
diff --git a/src/theme/variables/testDark.ts b/src/theme/variables/testDark.ts
index 94f6261875f..1cc5e094da7 100644
--- a/src/theme/variables/testDark.ts
+++ b/src/theme/variables/testDark.ts
@@ -133,7 +133,6 @@ export const testDark: Theme = {
   backgroundGradientEnd: { x: 1, y: 0 },
   backgroundImageServerUrls: ['https://content.edge.app'],
   backgroundImage: undefined,
-  backgroundLoadingOverlay: 'rgba(123,123,123,.2)',
 
   // Camera Overlay
   cameraOverlayColor: palette.black,
diff --git a/src/theme/variables/testLight.ts b/src/theme/variables/testLight.ts
index ca25ed94376..2ecab10f246 100644
--- a/src/theme/variables/testLight.ts
+++ b/src/theme/variables/testLight.ts
@@ -127,7 +127,6 @@ export const testLight: Theme = {
   backgroundGradientEnd: { x: 0, y: 1 },
   backgroundImageServerUrls: ['https://content.edge.app'],
   backgroundImage: undefined,
-  backgroundLoadingOverlay: `rgba(123,123,123,.2)`,
 
   // Camera Overlay
   cameraOverlayColor: palette.gray,
diff --git a/src/types/Theme.ts b/src/types/Theme.ts
index 9043d91172e..65afb5881b4 100644
--- a/src/types/Theme.ts
+++ b/src/types/Theme.ts
@@ -91,7 +91,6 @@ export interface Theme {
 
   backgroundImageServerUrls: string[]
   backgroundImage?: ImageProp
-  backgroundLoadingOverlay: string
 
   // Camera Overlay
   cameraOverlayColor: string

From f74c1ee808367c204343199c2e3782a0e100a702 Mon Sep 17 00:00:00 2001
From: William Swanson <swansontec@gmail.com>
Date: Fri, 5 Jan 2024 13:42:17 -0800
Subject: [PATCH 4/5] Remove login background image support

---
 src/assets/images/backgrounds/login_bg.jpg | Bin 11857 -> 0 bytes
 src/components/scenes/LoginScene.tsx       |  13 +---
 src/theme/variables/edgeDark.ts            |   2 -
 src/theme/variables/edgeLight.ts           |   2 -
 src/theme/variables/testDark.ts            |   2 -
 src/theme/variables/testLight.ts           |   2 -
 src/types/Theme.ts                         |   3 -
 src/util/ThemeCache.ts                     |  81 ---------------------
 src/util/utils.ts                          |   5 --
 9 files changed, 1 insertion(+), 109 deletions(-)
 delete mode 100644 src/assets/images/backgrounds/login_bg.jpg
 delete mode 100644 src/util/ThemeCache.ts

diff --git a/src/assets/images/backgrounds/login_bg.jpg b/src/assets/images/backgrounds/login_bg.jpg
deleted file mode 100644
index 7117bea42f8bf9f808d11813cd2220cc58cac466..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 11857
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
a7UYbb95}I7c?4vJ7+7}ND?MRZKmHfb4w2sg

diff --git a/src/components/scenes/LoginScene.tsx b/src/components/scenes/LoginScene.tsx
index 1abae7e0afb..209d2d8aa0d 100644
--- a/src/components/scenes/LoginScene.tsx
+++ b/src/components/scenes/LoginScene.tsx
@@ -14,22 +14,18 @@ import { cacheStyles, Theme, useTheme } from '../../components/services/ThemeCon
 import { ENV } from '../../env'
 import { ExperimentConfig, getExperimentConfig } from '../../experimentConfig'
 import { useAsyncEffect } from '../../hooks/useAsyncEffect'
-import { useAsyncValue } from '../../hooks/useAsyncValue'
 import { useHandler } from '../../hooks/useHandler'
 import { useWatch } from '../../hooks/useWatch'
 import { lstrings } from '../../locales/strings'
 import { config } from '../../theme/appConfig'
 import { useDispatch, useSelector } from '../../types/reactRedux'
 import { EdgeSceneProps } from '../../types/routerTypes'
-import { ImageProp } from '../../types/Theme'
 import { GuiTouchIdInfo } from '../../types/types'
 import { logEvent, trackError } from '../../util/tracking'
-import { pickRandom } from '../../util/utils'
 import { withServices } from '../hoc/withServices'
 import { showHelpModal } from '../modals/HelpModal'
 import { UpdateModal } from '../modals/UpdateModal'
 import { Airship, showError } from '../services/AirshipInstance'
-import { getBackgroundImage } from './../../util/ThemeCache'
 import { LoadingScene } from './LoadingScene'
 
 // Sneak the BlurView over to the login UI:
@@ -75,11 +71,6 @@ export function LoginSceneComponent(props: Props) {
   // Effects
   // ---------------------------------------------------------------------
 
-  const [backgroundImage = theme.backgroundImage] = useAsyncValue<ImageProp | undefined>(async () => {
-    const url = pickRandom(theme.backgroundImageServerUrls)
-    return await getBackgroundImage(disklet, url, theme.backgroundImage)
-  }, [disklet, theme])
-
   React.useEffect(() => {
     const { YOLO_USERNAME, YOLO_PASSWORD, YOLO_PIN } = ENV
     if (YOLO_USERNAME != null && (Boolean(YOLO_PASSWORD) || Boolean(YOLO_PIN)) && firstRun) {
@@ -198,7 +189,6 @@ export function LoginSceneComponent(props: Props) {
         appConfig={config}
         appId={config.appId}
         appName={config.appNameShort}
-        backgroundImage={backgroundImage}
         context={context}
         fontDescription={fontDescription}
         initialLoginId={nextLoginId ?? undefined}
@@ -231,8 +221,7 @@ const dummyTouchIdInfo: GuiTouchIdInfo = {
 const getStyles = cacheStyles((theme: Theme) => ({
   container: {
     flex: 1,
-    paddingTop: StatusBar.currentHeight,
-    backgroundColor: theme.backgroundGradientColors[0]
+    paddingTop: StatusBar.currentHeight
   }
 }))
 
diff --git a/src/theme/variables/edgeDark.ts b/src/theme/variables/edgeDark.ts
index 93b8d6b245f..d1dbeb84e01 100644
--- a/src/theme/variables/edgeDark.ts
+++ b/src/theme/variables/edgeDark.ts
@@ -131,8 +131,6 @@ export const edgeDark: Theme = {
   backgroundGradientColors: [palette.darkestNavy, palette.darkAqua],
   backgroundGradientStart: { x: 0, y: 0 },
   backgroundGradientEnd: { x: 1, y: 0 },
-  backgroundImageServerUrls: ['https://content.edge.app'],
-  backgroundImage: undefined,
 
   // Camera Overlay
   cameraOverlayColor: palette.black,
diff --git a/src/theme/variables/edgeLight.ts b/src/theme/variables/edgeLight.ts
index 1dd45f85ac7..1483d44c949 100644
--- a/src/theme/variables/edgeLight.ts
+++ b/src/theme/variables/edgeLight.ts
@@ -125,8 +125,6 @@ export const edgeLight: Theme = {
   backgroundGradientColors: [palette.lightestGray, palette.lightestGray],
   backgroundGradientStart: { x: 0, y: 0 },
   backgroundGradientEnd: { x: 0, y: 1 },
-  backgroundImageServerUrls: ['https://content.edge.app'],
-  backgroundImage: undefined,
 
   // Camera Overlay
   cameraOverlayColor: palette.gray,
diff --git a/src/theme/variables/testDark.ts b/src/theme/variables/testDark.ts
index 1cc5e094da7..9806bdb4d12 100644
--- a/src/theme/variables/testDark.ts
+++ b/src/theme/variables/testDark.ts
@@ -131,8 +131,6 @@ export const testDark: Theme = {
   backgroundGradientColors: [palette.darkestNavy, palette.darkAqua],
   backgroundGradientStart: { x: 0, y: 0 },
   backgroundGradientEnd: { x: 1, y: 0 },
-  backgroundImageServerUrls: ['https://content.edge.app'],
-  backgroundImage: undefined,
 
   // Camera Overlay
   cameraOverlayColor: palette.black,
diff --git a/src/theme/variables/testLight.ts b/src/theme/variables/testLight.ts
index 2ecab10f246..acce394bff9 100644
--- a/src/theme/variables/testLight.ts
+++ b/src/theme/variables/testLight.ts
@@ -125,8 +125,6 @@ export const testLight: Theme = {
   backgroundGradientColors: [palette.lightestGray, palette.lightestGray],
   backgroundGradientStart: { x: 0, y: 0 },
   backgroundGradientEnd: { x: 0, y: 1 },
-  backgroundImageServerUrls: ['https://content.edge.app'],
-  backgroundImage: undefined,
 
   // Camera Overlay
   cameraOverlayColor: palette.gray,
diff --git a/src/types/Theme.ts b/src/types/Theme.ts
index 65afb5881b4..1fb844dfc2f 100644
--- a/src/types/Theme.ts
+++ b/src/types/Theme.ts
@@ -89,9 +89,6 @@ export interface Theme {
   backgroundGradientStart: { x: number; y: number }
   backgroundGradientEnd: { x: number; y: number }
 
-  backgroundImageServerUrls: string[]
-  backgroundImage?: ImageProp
-
   // Camera Overlay
   cameraOverlayColor: string
   cameraOverlayOpStart: number
diff --git a/src/util/ThemeCache.ts b/src/util/ThemeCache.ts
deleted file mode 100644
index 8f0bb88da36..00000000000
--- a/src/util/ThemeCache.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-import { asDate, asObject, uncleaner } from 'cleaners'
-import { Disklet } from 'disklet'
-import RNFS from 'react-native-fs'
-
-import { BACKGROUND_IMAGE_FILE_NAME, BACKGROUND_IMAGE_LOCAL_URI } from '../constants/CdnConstants'
-import { ImageProp } from '../types/Theme'
-
-const THEME_CACHE_FILE_NAME = 'themeCache.json'
-
-const asThemeCache = asObject({
-  assets: asObject(
-    asObject({
-      start: asDate,
-      expiration: asDate
-    })
-  )
-})
-const wasThemeCache = uncleaner(asThemeCache)
-type ThemeCache = ReturnType<typeof asThemeCache>
-
-interface ItemTimestamps {
-  start: Date
-  expiration: Date
-}
-
-async function getThemeCache(disklet: Disklet): Promise<ThemeCache> {
-  const data = await disklet.getText(THEME_CACHE_FILE_NAME)
-  return asThemeCache(JSON.parse(data))
-}
-
-async function setThemeCache(disklet: Disklet, data: ThemeCache): Promise<void> {
-  const text = JSON.stringify(wasThemeCache(data))
-  await disklet.setText(THEME_CACHE_FILE_NAME, text)
-}
-
-const getThemeItemTimestamps = async (url: string): Promise<ItemTimestamps> => {
-  const response = await fetch(url, { method: 'HEAD' })
-  const start = response.headers.get('x-amz-meta-start-date') // '2021-08-26T01:37:50Z'
-  const expiration = response.headers.get('x-amz-meta-expiration-date') // '2021-08-29T01:37:50Z'
-  if (start == null || expiration == null) throw new Error('Failed to find file on CDN')
-  return { start: new Date(start), expiration: new Date(expiration) }
-}
-
-const downloadFile = async (disklet: Disklet, fromUrl: string, toFile: string): Promise<void> => {
-  // See if the server even has an image for us in the first place:
-  const cache: ThemeCache = await getThemeCache(disklet).catch(() => ({ assets: {} }))
-  const { start, expiration } = await getThemeItemTimestamps(fromUrl)
-  if (expiration.valueOf() < Date.now()) {
-    delete cache.assets[fromUrl]
-    await setThemeCache(disklet, cache)
-    return
-  }
-  const cacheTimes = cache.assets[fromUrl]
-  if (cacheTimes != null && cacheTimes.start.valueOf() === start.valueOf() && cacheTimes.expiration.valueOf() === expiration.valueOf()) return
-
-  // Download file whenever local file timestamps do not equal remote file timestamps
-  const download = RNFS.downloadFile({ fromUrl, toFile })
-  const status = await download.promise
-  if (status.statusCode !== 200) throw new Error('Failed to download')
-  cache.assets[fromUrl] = { start, expiration }
-  await setThemeCache(disklet, cache)
-}
-
-export async function getBackgroundImage(disklet: Disklet, imageServer?: string | null, fallback?: ImageProp): Promise<ImageProp | undefined> {
-  if (imageServer == null) return fallback
-  const backgroundImageUrl = `${imageServer}/${BACKGROUND_IMAGE_FILE_NAME}`
-  const now = Date.now()
-
-  let image = fallback
-
-  const cache: ThemeCache = await getThemeCache(disklet).catch(() => ({ assets: {} }))
-  const cacheTimes = cache.assets[backgroundImageUrl]
-  if (cacheTimes != null && cacheTimes.start.valueOf() < now && cacheTimes.expiration.valueOf() > now && (await RNFS.exists(BACKGROUND_IMAGE_LOCAL_URI))) {
-    image = { uri: BACKGROUND_IMAGE_LOCAL_URI }
-  }
-  // Always return existing local file but query and download new remote file in the background
-  downloadFile(disklet, backgroundImageUrl, BACKGROUND_IMAGE_LOCAL_URI).catch(() => {
-    console.warn(`Error downloading from background image server ${backgroundImageUrl} to ${BACKGROUND_IMAGE_LOCAL_URI}`)
-  })
-  return image
-}
diff --git a/src/util/utils.ts b/src/util/utils.ts
index b565f1a9289..714a0b93cbf 100644
--- a/src/util/utils.ts
+++ b/src/util/utils.ts
@@ -519,11 +519,6 @@ export const shuffleArray = <T>(array: T[]): T[] => {
   return array
 }
 
-export const pickRandom = <T>(array?: T[]): T | null => {
-  if (array == null || array.length === 0) return null
-  return array[Math.floor(Math.random() * array.length)]
-}
-
 /**
  * Waits for a collection of promises.
  * Returns all the promises that manage to resolve within the timeout.

From 017d659e9f6450cc5842d92343922267d2b55fb9 Mon Sep 17 00:00:00 2001
From: William Swanson <swansontec@gmail.com>
Date: Thu, 4 Jan 2024 11:39:12 -0800
Subject: [PATCH 5/5] Replace the gradient background with blurred dots

---
 .../__snapshots__/CategoryModal.test.tsx.snap |    4 +-
 ...reateWalletAccountSetupScene.test.tsx.snap |  214 +-
 .../CreateWalletImportScene.test.tsx.snap     |  214 +-
 ...reateWalletSelectCryptoScene.test.tsx.snap |  214 +-
 .../CreateWalletSelectFiatScene.test.tsx.snap |  215 +-
 .../CryptoExchangeQuoteScene.test.tsx.snap    |  214 +-
 .../CurrencyNotificationScene.test.tsx.snap   |  214 +-
 .../CurrencySettings.ui.test.tsx.snap         |  214 +-
 .../EdgeLoginScene.test.tsx.snap              |  214 +-
 .../__snapshots__/SendScene2.ui.test.tsx.snap | 2156 +++++++++++++++--
 .../__snapshots__/SettingsScene.test.tsx.snap |  428 +++-
 .../TransactionDetailsScene.test.tsx.snap     |  428 +++-
 src/components/FioAddress/ConnectWallets.tsx  |    2 -
 src/components/Main.tsx                       |    2 +-
 src/components/buttons/MinimalButton.tsx      |    2 +-
 src/components/common/SceneWrapper.tsx        |   21 +-
 .../LoadingSplashScreen.tsx                   |   11 +-
 .../scenes/CreateWalletSelectFiatScene.tsx    |    3 +-
 .../scenes/DefaultFiatSettingScene.tsx        |    3 +-
 src/components/scenes/LoginScene.tsx          |    2 +
 .../scenes/MigrateWalletCalculateFeeScene.tsx |    7 -
 .../scenes/TransactionListScene.tsx           |   12 +-
 src/components/ui4/DotsBackground.tsx         |   95 +
 src/theme/variables/edgeDark.ts               |   39 +-
 src/theme/variables/edgeLight.ts              |   16 +-
 src/theme/variables/testDark.ts               |   39 +-
 src/theme/variables/testLight.ts              |   16 +-
 src/types/Theme.ts                            |   20 +-
 28 files changed, 4383 insertions(+), 636 deletions(-)
 create mode 100644 src/components/ui4/DotsBackground.tsx

diff --git a/src/__tests__/modals/__snapshots__/CategoryModal.test.tsx.snap b/src/__tests__/modals/__snapshots__/CategoryModal.test.tsx.snap
index e1faa0ae7c4..dde7368e264 100644
--- a/src/__tests__/modals/__snapshots__/CategoryModal.test.tsx.snap
+++ b/src/__tests__/modals/__snapshots__/CategoryModal.test.tsx.snap
@@ -182,7 +182,7 @@ exports[`CategoryModal should render with a subcategory 1`] = `
           numberOfLines={1}
           style={
             {
-              "color": "#06090c",
+              "color": "#1a1a1a",
               "fontFamily": "Quicksand-Bold",
               "fontSize": 14,
               "marginHorizontal": 7,
@@ -1451,7 +1451,7 @@ exports[`CategoryModal should render with an empty subcategory 1`] = `
           numberOfLines={1}
           style={
             {
-              "color": "#06090c",
+              "color": "#1a1a1a",
               "fontFamily": "Quicksand-Bold",
               "fontSize": 14,
               "marginHorizontal": 7,
diff --git a/src/__tests__/scenes/__snapshots__/CreateWalletAccountSetupScene.test.tsx.snap b/src/__tests__/scenes/__snapshots__/CreateWalletAccountSetupScene.test.tsx.snap
index 21987263a8c..8b73ae8c5fc 100644
--- a/src/__tests__/scenes/__snapshots__/CreateWalletAccountSetupScene.test.tsx.snap
+++ b/src/__tests__/scenes/__snapshots__/CreateWalletAccountSetupScene.test.tsx.snap
@@ -2,36 +2,198 @@
 
 exports[`CreateWalletAccountSelect renders 1`] = `
 [
-  <BVLinearGradient
-    colors={
+  <View
+    onLayout={[Function]}
+    style={
       [
-        4278585612,
-        4279971643,
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "backgroundColor": "#1a1a1a",
+        },
       ]
     }
-    endPoint={
-      {
-        "x": 1,
-        "y": 0,
-      }
-    }
-    locations={null}
-    startPoint={
-      {
-        "x": 0,
-        "y": 0,
-      }
-    }
-    style={
-      {
-        "bottom": 0,
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
+  >
+    <RNSVGSvgView
+      align="xMidYMid"
+      bbHeight="0"
+      bbWidth="0"
+      focusable={false}
+      height={0}
+      meetOrSlice={0}
+      minX={0}
+      minY={0}
+      style={
+        {
+          "backgroundColor": "transparent",
+          "borderWidth": 0,
+        }
       }
-    }
-  />,
+      vbHeight={0}
+      vbWidth={0}
+      width={0}
+    >
+      <RNSVGGroup
+        fill={
+          {
+            "payload": 4278190080,
+            "type": 0,
+          }
+        }
+      >
+        <RNSVGDefs>
+          <RNSVGRadialGradient
+            cx="50%"
+            cy="50%"
+            fx="50%"
+            fy="50%"
+            gradient={
+              [
+                0,
+                -1,
+                0.125,
+                -167772161,
+                0.25,
+                -637534209,
+                0.75,
+                654311423,
+                0.875,
+                184549375,
+                1,
+                16777215,
+              ]
+            }
+            gradientTransform={null}
+            gradientUnits={0}
+            name="grad0"
+            rx="50%"
+            ry="50%"
+          />
+          <RNSVGRadialGradient
+            cx="50%"
+            cy="50%"
+            fx="50%"
+            fy="50%"
+            gradient={
+              [
+                0,
+                -216279,
+                0.0588,
+                -216279,
+                0.1765,
+                -167988439,
+                0.29410000000000003,
+                -637750487,
+                0.7646999999999999,
+                654095145,
+                0.8824,
+                184333097,
+                1,
+                16560937,
+              ]
+            }
+            gradientTransform={null}
+            gradientUnits={0}
+            name="grad1"
+            rx="50%"
+            ry="50%"
+          />
+          <RNSVGRadialGradient
+            cx="50%"
+            cy="50%"
+            fx="50%"
+            fy="50%"
+            gradient={
+              [
+                0,
+                -16719740,
+                0.4667,
+                -16719740,
+                0.5333,
+                -184491900,
+                0.6,
+                -654253948,
+                0.8667,
+                637591684,
+                0.9333,
+                167829636,
+                1,
+                57476,
+              ]
+            }
+            gradientTransform={null}
+            gradientUnits={0}
+            name="grad2"
+            rx="50%"
+            ry="50%"
+          />
+        </RNSVGDefs>
+        <RNSVGGroup
+          fill={
+            {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
+          opacity={0.25}
+        >
+          <RNSVGCircle
+            cx="10%"
+            cy="10%"
+            fill={
+              {
+                "brushRef": "grad0",
+                "type": 1,
+              }
+            }
+            propList={
+              [
+                "fill",
+              ]
+            }
+            r="224.73239436619718"
+          />
+          <RNSVGCircle
+            cx="95%"
+            cy="30%"
+            fill={
+              {
+                "brushRef": "grad1",
+                "type": 1,
+              }
+            }
+            propList={
+              [
+                "fill",
+              ]
+            }
+            r="238.7781690140845"
+          />
+          <RNSVGCircle
+            cx="-15%"
+            cy="100%"
+            fill={
+              {
+                "brushRef": "grad2",
+                "type": 1,
+              }
+            }
+            propList={
+              [
+                "fill",
+              ]
+            }
+            r="421.37323943661977"
+          />
+        </RNSVGGroup>
+      </RNSVGGroup>
+    </RNSVGSvgView>
+  </View>,
   <RCTScrollView
     contentContainerStyle={
       {
diff --git a/src/__tests__/scenes/__snapshots__/CreateWalletImportScene.test.tsx.snap b/src/__tests__/scenes/__snapshots__/CreateWalletImportScene.test.tsx.snap
index 357d58bcc9d..7e14787bd72 100644
--- a/src/__tests__/scenes/__snapshots__/CreateWalletImportScene.test.tsx.snap
+++ b/src/__tests__/scenes/__snapshots__/CreateWalletImportScene.test.tsx.snap
@@ -2,36 +2,198 @@
 
 exports[`CreateWalletImportScene should render with loading props 1`] = `
 [
-  <BVLinearGradient
-    colors={
+  <View
+    onLayout={[Function]}
+    style={
       [
-        4278585612,
-        4279971643,
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "backgroundColor": "#1a1a1a",
+        },
       ]
     }
-    endPoint={
-      {
-        "x": 1,
-        "y": 0,
-      }
-    }
-    locations={null}
-    startPoint={
-      {
-        "x": 0,
-        "y": 0,
-      }
-    }
-    style={
-      {
-        "bottom": 0,
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
+  >
+    <RNSVGSvgView
+      align="xMidYMid"
+      bbHeight="0"
+      bbWidth="0"
+      focusable={false}
+      height={0}
+      meetOrSlice={0}
+      minX={0}
+      minY={0}
+      style={
+        {
+          "backgroundColor": "transparent",
+          "borderWidth": 0,
+        }
       }
-    }
-  />,
+      vbHeight={0}
+      vbWidth={0}
+      width={0}
+    >
+      <RNSVGGroup
+        fill={
+          {
+            "payload": 4278190080,
+            "type": 0,
+          }
+        }
+      >
+        <RNSVGDefs>
+          <RNSVGRadialGradient
+            cx="50%"
+            cy="50%"
+            fx="50%"
+            fy="50%"
+            gradient={
+              [
+                0,
+                -1,
+                0.125,
+                -167772161,
+                0.25,
+                -637534209,
+                0.75,
+                654311423,
+                0.875,
+                184549375,
+                1,
+                16777215,
+              ]
+            }
+            gradientTransform={null}
+            gradientUnits={0}
+            name="grad0"
+            rx="50%"
+            ry="50%"
+          />
+          <RNSVGRadialGradient
+            cx="50%"
+            cy="50%"
+            fx="50%"
+            fy="50%"
+            gradient={
+              [
+                0,
+                -216279,
+                0.0588,
+                -216279,
+                0.1765,
+                -167988439,
+                0.29410000000000003,
+                -637750487,
+                0.7646999999999999,
+                654095145,
+                0.8824,
+                184333097,
+                1,
+                16560937,
+              ]
+            }
+            gradientTransform={null}
+            gradientUnits={0}
+            name="grad1"
+            rx="50%"
+            ry="50%"
+          />
+          <RNSVGRadialGradient
+            cx="50%"
+            cy="50%"
+            fx="50%"
+            fy="50%"
+            gradient={
+              [
+                0,
+                -16719740,
+                0.4667,
+                -16719740,
+                0.5333,
+                -184491900,
+                0.6,
+                -654253948,
+                0.8667,
+                637591684,
+                0.9333,
+                167829636,
+                1,
+                57476,
+              ]
+            }
+            gradientTransform={null}
+            gradientUnits={0}
+            name="grad2"
+            rx="50%"
+            ry="50%"
+          />
+        </RNSVGDefs>
+        <RNSVGGroup
+          fill={
+            {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
+          opacity={0.25}
+        >
+          <RNSVGCircle
+            cx="10%"
+            cy="10%"
+            fill={
+              {
+                "brushRef": "grad0",
+                "type": 1,
+              }
+            }
+            propList={
+              [
+                "fill",
+              ]
+            }
+            r="224.73239436619718"
+          />
+          <RNSVGCircle
+            cx="95%"
+            cy="30%"
+            fill={
+              {
+                "brushRef": "grad1",
+                "type": 1,
+              }
+            }
+            propList={
+              [
+                "fill",
+              ]
+            }
+            r="238.7781690140845"
+          />
+          <RNSVGCircle
+            cx="-15%"
+            cy="100%"
+            fill={
+              {
+                "brushRef": "grad2",
+                "type": 1,
+              }
+            }
+            propList={
+              [
+                "fill",
+              ]
+            }
+            r="421.37323943661977"
+          />
+        </RNSVGGroup>
+      </RNSVGGroup>
+    </RNSVGSvgView>
+  </View>,
   <View
     style={
       [
diff --git a/src/__tests__/scenes/__snapshots__/CreateWalletSelectCryptoScene.test.tsx.snap b/src/__tests__/scenes/__snapshots__/CreateWalletSelectCryptoScene.test.tsx.snap
index b07e27d777f..96bd816a89a 100644
--- a/src/__tests__/scenes/__snapshots__/CreateWalletSelectCryptoScene.test.tsx.snap
+++ b/src/__tests__/scenes/__snapshots__/CreateWalletSelectCryptoScene.test.tsx.snap
@@ -2,36 +2,198 @@
 
 exports[`CreateWalletSelectCrypto should render with loading props 1`] = `
 [
-  <BVLinearGradient
-    colors={
+  <View
+    onLayout={[Function]}
+    style={
       [
-        4278585612,
-        4279971643,
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "backgroundColor": "#1a1a1a",
+        },
       ]
     }
-    endPoint={
-      {
-        "x": 1,
-        "y": 0,
-      }
-    }
-    locations={null}
-    startPoint={
-      {
-        "x": 0,
-        "y": 0,
-      }
-    }
-    style={
-      {
-        "bottom": 0,
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
+  >
+    <RNSVGSvgView
+      align="xMidYMid"
+      bbHeight="0"
+      bbWidth="0"
+      focusable={false}
+      height={0}
+      meetOrSlice={0}
+      minX={0}
+      minY={0}
+      style={
+        {
+          "backgroundColor": "transparent",
+          "borderWidth": 0,
+        }
       }
-    }
-  />,
+      vbHeight={0}
+      vbWidth={0}
+      width={0}
+    >
+      <RNSVGGroup
+        fill={
+          {
+            "payload": 4278190080,
+            "type": 0,
+          }
+        }
+      >
+        <RNSVGDefs>
+          <RNSVGRadialGradient
+            cx="50%"
+            cy="50%"
+            fx="50%"
+            fy="50%"
+            gradient={
+              [
+                0,
+                -1,
+                0.125,
+                -167772161,
+                0.25,
+                -637534209,
+                0.75,
+                654311423,
+                0.875,
+                184549375,
+                1,
+                16777215,
+              ]
+            }
+            gradientTransform={null}
+            gradientUnits={0}
+            name="grad0"
+            rx="50%"
+            ry="50%"
+          />
+          <RNSVGRadialGradient
+            cx="50%"
+            cy="50%"
+            fx="50%"
+            fy="50%"
+            gradient={
+              [
+                0,
+                -216279,
+                0.0588,
+                -216279,
+                0.1765,
+                -167988439,
+                0.29410000000000003,
+                -637750487,
+                0.7646999999999999,
+                654095145,
+                0.8824,
+                184333097,
+                1,
+                16560937,
+              ]
+            }
+            gradientTransform={null}
+            gradientUnits={0}
+            name="grad1"
+            rx="50%"
+            ry="50%"
+          />
+          <RNSVGRadialGradient
+            cx="50%"
+            cy="50%"
+            fx="50%"
+            fy="50%"
+            gradient={
+              [
+                0,
+                -16719740,
+                0.4667,
+                -16719740,
+                0.5333,
+                -184491900,
+                0.6,
+                -654253948,
+                0.8667,
+                637591684,
+                0.9333,
+                167829636,
+                1,
+                57476,
+              ]
+            }
+            gradientTransform={null}
+            gradientUnits={0}
+            name="grad2"
+            rx="50%"
+            ry="50%"
+          />
+        </RNSVGDefs>
+        <RNSVGGroup
+          fill={
+            {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
+          opacity={0.25}
+        >
+          <RNSVGCircle
+            cx="10%"
+            cy="10%"
+            fill={
+              {
+                "brushRef": "grad0",
+                "type": 1,
+              }
+            }
+            propList={
+              [
+                "fill",
+              ]
+            }
+            r="224.73239436619718"
+          />
+          <RNSVGCircle
+            cx="95%"
+            cy="30%"
+            fill={
+              {
+                "brushRef": "grad1",
+                "type": 1,
+              }
+            }
+            propList={
+              [
+                "fill",
+              ]
+            }
+            r="238.7781690140845"
+          />
+          <RNSVGCircle
+            cx="-15%"
+            cy="100%"
+            fill={
+              {
+                "brushRef": "grad2",
+                "type": 1,
+              }
+            }
+            propList={
+              [
+                "fill",
+              ]
+            }
+            r="421.37323943661977"
+          />
+        </RNSVGGroup>
+      </RNSVGGroup>
+    </RNSVGSvgView>
+  </View>,
   <View
     style={
       [
diff --git a/src/__tests__/scenes/__snapshots__/CreateWalletSelectFiatScene.test.tsx.snap b/src/__tests__/scenes/__snapshots__/CreateWalletSelectFiatScene.test.tsx.snap
index d0c9615bdc0..5cb843393a1 100644
--- a/src/__tests__/scenes/__snapshots__/CreateWalletSelectFiatScene.test.tsx.snap
+++ b/src/__tests__/scenes/__snapshots__/CreateWalletSelectFiatScene.test.tsx.snap
@@ -2,36 +2,198 @@
 
 exports[`CreateWalletSelectFiatComponent should render with loading props 1`] = `
 [
-  <BVLinearGradient
-    colors={
+  <View
+    onLayout={[Function]}
+    style={
       [
-        4278585612,
-        4279971643,
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "backgroundColor": "#1a1a1a",
+        },
       ]
     }
-    endPoint={
-      {
-        "x": 1,
-        "y": 0,
-      }
-    }
-    locations={null}
-    startPoint={
-      {
-        "x": 0,
-        "y": 0,
-      }
-    }
-    style={
-      {
-        "bottom": 0,
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
+  >
+    <RNSVGSvgView
+      align="xMidYMid"
+      bbHeight="0"
+      bbWidth="0"
+      focusable={false}
+      height={0}
+      meetOrSlice={0}
+      minX={0}
+      minY={0}
+      style={
+        {
+          "backgroundColor": "transparent",
+          "borderWidth": 0,
+        }
       }
-    }
-  />,
+      vbHeight={0}
+      vbWidth={0}
+      width={0}
+    >
+      <RNSVGGroup
+        fill={
+          {
+            "payload": 4278190080,
+            "type": 0,
+          }
+        }
+      >
+        <RNSVGDefs>
+          <RNSVGRadialGradient
+            cx="50%"
+            cy="50%"
+            fx="50%"
+            fy="50%"
+            gradient={
+              [
+                0,
+                -1,
+                0.125,
+                -167772161,
+                0.25,
+                -637534209,
+                0.75,
+                654311423,
+                0.875,
+                184549375,
+                1,
+                16777215,
+              ]
+            }
+            gradientTransform={null}
+            gradientUnits={0}
+            name="grad0"
+            rx="50%"
+            ry="50%"
+          />
+          <RNSVGRadialGradient
+            cx="50%"
+            cy="50%"
+            fx="50%"
+            fy="50%"
+            gradient={
+              [
+                0,
+                -216279,
+                0.0588,
+                -216279,
+                0.1765,
+                -167988439,
+                0.29410000000000003,
+                -637750487,
+                0.7646999999999999,
+                654095145,
+                0.8824,
+                184333097,
+                1,
+                16560937,
+              ]
+            }
+            gradientTransform={null}
+            gradientUnits={0}
+            name="grad1"
+            rx="50%"
+            ry="50%"
+          />
+          <RNSVGRadialGradient
+            cx="50%"
+            cy="50%"
+            fx="50%"
+            fy="50%"
+            gradient={
+              [
+                0,
+                -16719740,
+                0.4667,
+                -16719740,
+                0.5333,
+                -184491900,
+                0.6,
+                -654253948,
+                0.8667,
+                637591684,
+                0.9333,
+                167829636,
+                1,
+                57476,
+              ]
+            }
+            gradientTransform={null}
+            gradientUnits={0}
+            name="grad2"
+            rx="50%"
+            ry="50%"
+          />
+        </RNSVGDefs>
+        <RNSVGGroup
+          fill={
+            {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
+          opacity={0.25}
+        >
+          <RNSVGCircle
+            cx="10%"
+            cy="10%"
+            fill={
+              {
+                "brushRef": "grad0",
+                "type": 1,
+              }
+            }
+            propList={
+              [
+                "fill",
+              ]
+            }
+            r="224.73239436619718"
+          />
+          <RNSVGCircle
+            cx="95%"
+            cy="30%"
+            fill={
+              {
+                "brushRef": "grad1",
+                "type": 1,
+              }
+            }
+            propList={
+              [
+                "fill",
+              ]
+            }
+            r="238.7781690140845"
+          />
+          <RNSVGCircle
+            cx="-15%"
+            cy="100%"
+            fill={
+              {
+                "brushRef": "grad2",
+                "type": 1,
+              }
+            }
+            propList={
+              [
+                "fill",
+              ]
+            }
+            r="421.37323943661977"
+          />
+        </RNSVGGroup>
+      </RNSVGGroup>
+    </RNSVGSvgView>
+  </View>,
   <View
     style={
       [
@@ -198,7 +360,6 @@ exports[`CreateWalletSelectFiatComponent should render with loading props 1`] =
                       "overflow": "hidden",
                     },
                     {
-                      "backgroundColor": "#1b2f3b",
                       "borderRadius": 22,
                       "height": 45,
                       "marginLeft": 6,
diff --git a/src/__tests__/scenes/__snapshots__/CryptoExchangeQuoteScene.test.tsx.snap b/src/__tests__/scenes/__snapshots__/CryptoExchangeQuoteScene.test.tsx.snap
index 58d566654da..fe2ed393467 100644
--- a/src/__tests__/scenes/__snapshots__/CryptoExchangeQuoteScene.test.tsx.snap
+++ b/src/__tests__/scenes/__snapshots__/CryptoExchangeQuoteScene.test.tsx.snap
@@ -2,36 +2,198 @@
 
 exports[`CryptoExchangeQuoteScreenComponent should render with loading props 1`] = `
 [
-  <BVLinearGradient
-    colors={
+  <View
+    onLayout={[Function]}
+    style={
       [
-        4278585612,
-        4279971643,
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "backgroundColor": "#1a1a1a",
+        },
       ]
     }
-    endPoint={
-      {
-        "x": 1,
-        "y": 0,
-      }
-    }
-    locations={null}
-    startPoint={
-      {
-        "x": 0,
-        "y": 0,
-      }
-    }
-    style={
-      {
-        "bottom": 0,
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
+  >
+    <RNSVGSvgView
+      align="xMidYMid"
+      bbHeight="0"
+      bbWidth="0"
+      focusable={false}
+      height={0}
+      meetOrSlice={0}
+      minX={0}
+      minY={0}
+      style={
+        {
+          "backgroundColor": "transparent",
+          "borderWidth": 0,
+        }
       }
-    }
-  />,
+      vbHeight={0}
+      vbWidth={0}
+      width={0}
+    >
+      <RNSVGGroup
+        fill={
+          {
+            "payload": 4278190080,
+            "type": 0,
+          }
+        }
+      >
+        <RNSVGDefs>
+          <RNSVGRadialGradient
+            cx="50%"
+            cy="50%"
+            fx="50%"
+            fy="50%"
+            gradient={
+              [
+                0,
+                -1,
+                0.125,
+                -167772161,
+                0.25,
+                -637534209,
+                0.75,
+                654311423,
+                0.875,
+                184549375,
+                1,
+                16777215,
+              ]
+            }
+            gradientTransform={null}
+            gradientUnits={0}
+            name="grad0"
+            rx="50%"
+            ry="50%"
+          />
+          <RNSVGRadialGradient
+            cx="50%"
+            cy="50%"
+            fx="50%"
+            fy="50%"
+            gradient={
+              [
+                0,
+                -216279,
+                0.0588,
+                -216279,
+                0.1765,
+                -167988439,
+                0.29410000000000003,
+                -637750487,
+                0.7646999999999999,
+                654095145,
+                0.8824,
+                184333097,
+                1,
+                16560937,
+              ]
+            }
+            gradientTransform={null}
+            gradientUnits={0}
+            name="grad1"
+            rx="50%"
+            ry="50%"
+          />
+          <RNSVGRadialGradient
+            cx="50%"
+            cy="50%"
+            fx="50%"
+            fy="50%"
+            gradient={
+              [
+                0,
+                -16719740,
+                0.4667,
+                -16719740,
+                0.5333,
+                -184491900,
+                0.6,
+                -654253948,
+                0.8667,
+                637591684,
+                0.9333,
+                167829636,
+                1,
+                57476,
+              ]
+            }
+            gradientTransform={null}
+            gradientUnits={0}
+            name="grad2"
+            rx="50%"
+            ry="50%"
+          />
+        </RNSVGDefs>
+        <RNSVGGroup
+          fill={
+            {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
+          opacity={0.25}
+        >
+          <RNSVGCircle
+            cx="10%"
+            cy="10%"
+            fill={
+              {
+                "brushRef": "grad0",
+                "type": 1,
+              }
+            }
+            propList={
+              [
+                "fill",
+              ]
+            }
+            r="224.73239436619718"
+          />
+          <RNSVGCircle
+            cx="95%"
+            cy="30%"
+            fill={
+              {
+                "brushRef": "grad1",
+                "type": 1,
+              }
+            }
+            propList={
+              [
+                "fill",
+              ]
+            }
+            r="238.7781690140845"
+          />
+          <RNSVGCircle
+            cx="-15%"
+            cy="100%"
+            fill={
+              {
+                "brushRef": "grad2",
+                "type": 1,
+              }
+            }
+            propList={
+              [
+                "fill",
+              ]
+            }
+            r="421.37323943661977"
+          />
+        </RNSVGGroup>
+      </RNSVGGroup>
+    </RNSVGSvgView>
+  </View>,
   <View
     style={
       [
diff --git a/src/__tests__/scenes/__snapshots__/CurrencyNotificationScene.test.tsx.snap b/src/__tests__/scenes/__snapshots__/CurrencyNotificationScene.test.tsx.snap
index 6dd34e11ef5..9351c9caa40 100644
--- a/src/__tests__/scenes/__snapshots__/CurrencyNotificationScene.test.tsx.snap
+++ b/src/__tests__/scenes/__snapshots__/CurrencyNotificationScene.test.tsx.snap
@@ -2,36 +2,198 @@
 
 exports[`CurrencyNotificationComponent should render with loading props 1`] = `
 [
-  <BVLinearGradient
-    colors={
+  <View
+    onLayout={[Function]}
+    style={
       [
-        4278585612,
-        4279971643,
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "backgroundColor": "#1a1a1a",
+        },
       ]
     }
-    endPoint={
-      {
-        "x": 1,
-        "y": 0,
-      }
-    }
-    locations={null}
-    startPoint={
-      {
-        "x": 0,
-        "y": 0,
-      }
-    }
-    style={
-      {
-        "bottom": 0,
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
+  >
+    <RNSVGSvgView
+      align="xMidYMid"
+      bbHeight="0"
+      bbWidth="0"
+      focusable={false}
+      height={0}
+      meetOrSlice={0}
+      minX={0}
+      minY={0}
+      style={
+        {
+          "backgroundColor": "transparent",
+          "borderWidth": 0,
+        }
       }
-    }
-  />,
+      vbHeight={0}
+      vbWidth={0}
+      width={0}
+    >
+      <RNSVGGroup
+        fill={
+          {
+            "payload": 4278190080,
+            "type": 0,
+          }
+        }
+      >
+        <RNSVGDefs>
+          <RNSVGRadialGradient
+            cx="50%"
+            cy="50%"
+            fx="50%"
+            fy="50%"
+            gradient={
+              [
+                0,
+                -1,
+                0.125,
+                -167772161,
+                0.25,
+                -637534209,
+                0.75,
+                654311423,
+                0.875,
+                184549375,
+                1,
+                16777215,
+              ]
+            }
+            gradientTransform={null}
+            gradientUnits={0}
+            name="grad0"
+            rx="50%"
+            ry="50%"
+          />
+          <RNSVGRadialGradient
+            cx="50%"
+            cy="50%"
+            fx="50%"
+            fy="50%"
+            gradient={
+              [
+                0,
+                -216279,
+                0.0588,
+                -216279,
+                0.1765,
+                -167988439,
+                0.29410000000000003,
+                -637750487,
+                0.7646999999999999,
+                654095145,
+                0.8824,
+                184333097,
+                1,
+                16560937,
+              ]
+            }
+            gradientTransform={null}
+            gradientUnits={0}
+            name="grad1"
+            rx="50%"
+            ry="50%"
+          />
+          <RNSVGRadialGradient
+            cx="50%"
+            cy="50%"
+            fx="50%"
+            fy="50%"
+            gradient={
+              [
+                0,
+                -16719740,
+                0.4667,
+                -16719740,
+                0.5333,
+                -184491900,
+                0.6,
+                -654253948,
+                0.8667,
+                637591684,
+                0.9333,
+                167829636,
+                1,
+                57476,
+              ]
+            }
+            gradientTransform={null}
+            gradientUnits={0}
+            name="grad2"
+            rx="50%"
+            ry="50%"
+          />
+        </RNSVGDefs>
+        <RNSVGGroup
+          fill={
+            {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
+          opacity={0.25}
+        >
+          <RNSVGCircle
+            cx="10%"
+            cy="10%"
+            fill={
+              {
+                "brushRef": "grad0",
+                "type": 1,
+              }
+            }
+            propList={
+              [
+                "fill",
+              ]
+            }
+            r="224.73239436619718"
+          />
+          <RNSVGCircle
+            cx="95%"
+            cy="30%"
+            fill={
+              {
+                "brushRef": "grad1",
+                "type": 1,
+              }
+            }
+            propList={
+              [
+                "fill",
+              ]
+            }
+            r="238.7781690140845"
+          />
+          <RNSVGCircle
+            cx="-15%"
+            cy="100%"
+            fill={
+              {
+                "brushRef": "grad2",
+                "type": 1,
+              }
+            }
+            propList={
+              [
+                "fill",
+              ]
+            }
+            r="421.37323943661977"
+          />
+        </RNSVGGroup>
+      </RNSVGGroup>
+    </RNSVGSvgView>
+  </View>,
   <RCTScrollView
     contentContainerStyle={
       {
diff --git a/src/__tests__/scenes/__snapshots__/CurrencySettings.ui.test.tsx.snap b/src/__tests__/scenes/__snapshots__/CurrencySettings.ui.test.tsx.snap
index c1f02674b8d..ae87c30518d 100644
--- a/src/__tests__/scenes/__snapshots__/CurrencySettings.ui.test.tsx.snap
+++ b/src/__tests__/scenes/__snapshots__/CurrencySettings.ui.test.tsx.snap
@@ -2,36 +2,198 @@
 
 exports[`CurrencySettings should render 1`] = `
 [
-  <BVLinearGradient
-    colors={
+  <View
+    onLayout={[Function]}
+    style={
       [
-        4278585612,
-        4279971643,
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "backgroundColor": "#1a1a1a",
+        },
       ]
     }
-    endPoint={
-      {
-        "x": 1,
-        "y": 0,
-      }
-    }
-    locations={null}
-    startPoint={
-      {
-        "x": 0,
-        "y": 0,
-      }
-    }
-    style={
-      {
-        "bottom": 0,
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
+  >
+    <RNSVGSvgView
+      align="xMidYMid"
+      bbHeight="0"
+      bbWidth="0"
+      focusable={false}
+      height={0}
+      meetOrSlice={0}
+      minX={0}
+      minY={0}
+      style={
+        {
+          "backgroundColor": "transparent",
+          "borderWidth": 0,
+        }
       }
-    }
-  />,
+      vbHeight={0}
+      vbWidth={0}
+      width={0}
+    >
+      <RNSVGGroup
+        fill={
+          {
+            "payload": 4278190080,
+            "type": 0,
+          }
+        }
+      >
+        <RNSVGDefs>
+          <RNSVGRadialGradient
+            cx="50%"
+            cy="50%"
+            fx="50%"
+            fy="50%"
+            gradient={
+              [
+                0,
+                -1,
+                0.125,
+                -167772161,
+                0.25,
+                -637534209,
+                0.75,
+                654311423,
+                0.875,
+                184549375,
+                1,
+                16777215,
+              ]
+            }
+            gradientTransform={null}
+            gradientUnits={0}
+            name="grad0"
+            rx="50%"
+            ry="50%"
+          />
+          <RNSVGRadialGradient
+            cx="50%"
+            cy="50%"
+            fx="50%"
+            fy="50%"
+            gradient={
+              [
+                0,
+                -216279,
+                0.0588,
+                -216279,
+                0.1765,
+                -167988439,
+                0.29410000000000003,
+                -637750487,
+                0.7646999999999999,
+                654095145,
+                0.8824,
+                184333097,
+                1,
+                16560937,
+              ]
+            }
+            gradientTransform={null}
+            gradientUnits={0}
+            name="grad1"
+            rx="50%"
+            ry="50%"
+          />
+          <RNSVGRadialGradient
+            cx="50%"
+            cy="50%"
+            fx="50%"
+            fy="50%"
+            gradient={
+              [
+                0,
+                -16719740,
+                0.4667,
+                -16719740,
+                0.5333,
+                -184491900,
+                0.6,
+                -654253948,
+                0.8667,
+                637591684,
+                0.9333,
+                167829636,
+                1,
+                57476,
+              ]
+            }
+            gradientTransform={null}
+            gradientUnits={0}
+            name="grad2"
+            rx="50%"
+            ry="50%"
+          />
+        </RNSVGDefs>
+        <RNSVGGroup
+          fill={
+            {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
+          opacity={0.25}
+        >
+          <RNSVGCircle
+            cx="10%"
+            cy="10%"
+            fill={
+              {
+                "brushRef": "grad0",
+                "type": 1,
+              }
+            }
+            propList={
+              [
+                "fill",
+              ]
+            }
+            r="224.73239436619718"
+          />
+          <RNSVGCircle
+            cx="95%"
+            cy="30%"
+            fill={
+              {
+                "brushRef": "grad1",
+                "type": 1,
+              }
+            }
+            propList={
+              [
+                "fill",
+              ]
+            }
+            r="238.7781690140845"
+          />
+          <RNSVGCircle
+            cx="-15%"
+            cy="100%"
+            fill={
+              {
+                "brushRef": "grad2",
+                "type": 1,
+              }
+            }
+            propList={
+              [
+                "fill",
+              ]
+            }
+            r="421.37323943661977"
+          />
+        </RNSVGGroup>
+      </RNSVGGroup>
+    </RNSVGSvgView>
+  </View>,
   <RCTScrollView
     contentContainerStyle={
       {
diff --git a/src/__tests__/scenes/__snapshots__/EdgeLoginScene.test.tsx.snap b/src/__tests__/scenes/__snapshots__/EdgeLoginScene.test.tsx.snap
index 1904c4b0610..0e3fb80ce77 100644
--- a/src/__tests__/scenes/__snapshots__/EdgeLoginScene.test.tsx.snap
+++ b/src/__tests__/scenes/__snapshots__/EdgeLoginScene.test.tsx.snap
@@ -2,36 +2,198 @@
 
 exports[`EdgeLoginScene should render with loading props 1`] = `
 [
-  <BVLinearGradient
-    colors={
+  <View
+    onLayout={[Function]}
+    style={
       [
-        4278585612,
-        4279971643,
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "backgroundColor": "#1a1a1a",
+        },
       ]
     }
-    endPoint={
-      {
-        "x": 1,
-        "y": 0,
-      }
-    }
-    locations={null}
-    startPoint={
-      {
-        "x": 0,
-        "y": 0,
-      }
-    }
-    style={
-      {
-        "bottom": 0,
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
+  >
+    <RNSVGSvgView
+      align="xMidYMid"
+      bbHeight="0"
+      bbWidth="0"
+      focusable={false}
+      height={0}
+      meetOrSlice={0}
+      minX={0}
+      minY={0}
+      style={
+        {
+          "backgroundColor": "transparent",
+          "borderWidth": 0,
+        }
       }
-    }
-  />,
+      vbHeight={0}
+      vbWidth={0}
+      width={0}
+    >
+      <RNSVGGroup
+        fill={
+          {
+            "payload": 4278190080,
+            "type": 0,
+          }
+        }
+      >
+        <RNSVGDefs>
+          <RNSVGRadialGradient
+            cx="50%"
+            cy="50%"
+            fx="50%"
+            fy="50%"
+            gradient={
+              [
+                0,
+                -1,
+                0.125,
+                -167772161,
+                0.25,
+                -637534209,
+                0.75,
+                654311423,
+                0.875,
+                184549375,
+                1,
+                16777215,
+              ]
+            }
+            gradientTransform={null}
+            gradientUnits={0}
+            name="grad0"
+            rx="50%"
+            ry="50%"
+          />
+          <RNSVGRadialGradient
+            cx="50%"
+            cy="50%"
+            fx="50%"
+            fy="50%"
+            gradient={
+              [
+                0,
+                -216279,
+                0.0588,
+                -216279,
+                0.1765,
+                -167988439,
+                0.29410000000000003,
+                -637750487,
+                0.7646999999999999,
+                654095145,
+                0.8824,
+                184333097,
+                1,
+                16560937,
+              ]
+            }
+            gradientTransform={null}
+            gradientUnits={0}
+            name="grad1"
+            rx="50%"
+            ry="50%"
+          />
+          <RNSVGRadialGradient
+            cx="50%"
+            cy="50%"
+            fx="50%"
+            fy="50%"
+            gradient={
+              [
+                0,
+                -16719740,
+                0.4667,
+                -16719740,
+                0.5333,
+                -184491900,
+                0.6,
+                -654253948,
+                0.8667,
+                637591684,
+                0.9333,
+                167829636,
+                1,
+                57476,
+              ]
+            }
+            gradientTransform={null}
+            gradientUnits={0}
+            name="grad2"
+            rx="50%"
+            ry="50%"
+          />
+        </RNSVGDefs>
+        <RNSVGGroup
+          fill={
+            {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
+          opacity={0.25}
+        >
+          <RNSVGCircle
+            cx="10%"
+            cy="10%"
+            fill={
+              {
+                "brushRef": "grad0",
+                "type": 1,
+              }
+            }
+            propList={
+              [
+                "fill",
+              ]
+            }
+            r="224.73239436619718"
+          />
+          <RNSVGCircle
+            cx="95%"
+            cy="30%"
+            fill={
+              {
+                "brushRef": "grad1",
+                "type": 1,
+              }
+            }
+            propList={
+              [
+                "fill",
+              ]
+            }
+            r="238.7781690140845"
+          />
+          <RNSVGCircle
+            cx="-15%"
+            cy="100%"
+            fill={
+              {
+                "brushRef": "grad2",
+                "type": 1,
+              }
+            }
+            propList={
+              [
+                "fill",
+              ]
+            }
+            r="421.37323943661977"
+          />
+        </RNSVGGroup>
+      </RNSVGGroup>
+    </RNSVGSvgView>
+  </View>,
   <View
     style={
       [
diff --git a/src/__tests__/scenes/__snapshots__/SendScene2.ui.test.tsx.snap b/src/__tests__/scenes/__snapshots__/SendScene2.ui.test.tsx.snap
index d2d4358c6ce..964051dd3db 100644
--- a/src/__tests__/scenes/__snapshots__/SendScene2.ui.test.tsx.snap
+++ b/src/__tests__/scenes/__snapshots__/SendScene2.ui.test.tsx.snap
@@ -2,36 +2,198 @@
 
 exports[`SendScene2 1 spendTarget 1`] = `
 [
-  <BVLinearGradient
-    colors={
+  <View
+    onLayout={[Function]}
+    style={
       [
-        4278585612,
-        4279971643,
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "backgroundColor": "#1a1a1a",
+        },
       ]
     }
-    endPoint={
-      {
-        "x": 1,
-        "y": 0,
-      }
-    }
-    locations={null}
-    startPoint={
-      {
-        "x": 0,
-        "y": 0,
-      }
-    }
-    style={
-      {
-        "bottom": 0,
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
+  >
+    <RNSVGSvgView
+      align="xMidYMid"
+      bbHeight="0"
+      bbWidth="0"
+      focusable={false}
+      height={0}
+      meetOrSlice={0}
+      minX={0}
+      minY={0}
+      style={
+        {
+          "backgroundColor": "transparent",
+          "borderWidth": 0,
+        }
       }
-    }
-  />,
+      vbHeight={0}
+      vbWidth={0}
+      width={0}
+    >
+      <RNSVGGroup
+        fill={
+          {
+            "payload": 4278190080,
+            "type": 0,
+          }
+        }
+      >
+        <RNSVGDefs>
+          <RNSVGRadialGradient
+            cx="50%"
+            cy="50%"
+            fx="50%"
+            fy="50%"
+            gradient={
+              [
+                0,
+                -1,
+                0.125,
+                -167772161,
+                0.25,
+                -637534209,
+                0.75,
+                654311423,
+                0.875,
+                184549375,
+                1,
+                16777215,
+              ]
+            }
+            gradientTransform={null}
+            gradientUnits={0}
+            name="grad0"
+            rx="50%"
+            ry="50%"
+          />
+          <RNSVGRadialGradient
+            cx="50%"
+            cy="50%"
+            fx="50%"
+            fy="50%"
+            gradient={
+              [
+                0,
+                -216279,
+                0.0588,
+                -216279,
+                0.1765,
+                -167988439,
+                0.29410000000000003,
+                -637750487,
+                0.7646999999999999,
+                654095145,
+                0.8824,
+                184333097,
+                1,
+                16560937,
+              ]
+            }
+            gradientTransform={null}
+            gradientUnits={0}
+            name="grad1"
+            rx="50%"
+            ry="50%"
+          />
+          <RNSVGRadialGradient
+            cx="50%"
+            cy="50%"
+            fx="50%"
+            fy="50%"
+            gradient={
+              [
+                0,
+                -16719740,
+                0.4667,
+                -16719740,
+                0.5333,
+                -184491900,
+                0.6,
+                -654253948,
+                0.8667,
+                637591684,
+                0.9333,
+                167829636,
+                1,
+                57476,
+              ]
+            }
+            gradientTransform={null}
+            gradientUnits={0}
+            name="grad2"
+            rx="50%"
+            ry="50%"
+          />
+        </RNSVGDefs>
+        <RNSVGGroup
+          fill={
+            {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
+          opacity={0.25}
+        >
+          <RNSVGCircle
+            cx="10%"
+            cy="10%"
+            fill={
+              {
+                "brushRef": "grad0",
+                "type": 1,
+              }
+            }
+            propList={
+              [
+                "fill",
+              ]
+            }
+            r="224.73239436619718"
+          />
+          <RNSVGCircle
+            cx="95%"
+            cy="30%"
+            fill={
+              {
+                "brushRef": "grad1",
+                "type": 1,
+              }
+            }
+            propList={
+              [
+                "fill",
+              ]
+            }
+            r="238.7781690140845"
+          />
+          <RNSVGCircle
+            cx="-15%"
+            cy="100%"
+            fill={
+              {
+                "brushRef": "grad2",
+                "type": 1,
+              }
+            }
+            propList={
+              [
+                "fill",
+              ]
+            }
+            r="421.37323943661977"
+          />
+        </RNSVGGroup>
+      </RNSVGGroup>
+    </RNSVGSvgView>
+  </View>,
   <View
     style={
       [
@@ -802,36 +964,198 @@ exports[`SendScene2 1 spendTarget 1`] = `
 
 exports[`SendScene2 1 spendTarget with info tiles 1`] = `
 [
-  <BVLinearGradient
-    colors={
+  <View
+    onLayout={[Function]}
+    style={
       [
-        4278585612,
-        4279971643,
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "backgroundColor": "#1a1a1a",
+        },
       ]
     }
-    endPoint={
-      {
-        "x": 1,
-        "y": 0,
-      }
-    }
-    locations={null}
-    startPoint={
-      {
-        "x": 0,
-        "y": 0,
-      }
-    }
-    style={
-      {
-        "bottom": 0,
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
+  >
+    <RNSVGSvgView
+      align="xMidYMid"
+      bbHeight="0"
+      bbWidth="0"
+      focusable={false}
+      height={0}
+      meetOrSlice={0}
+      minX={0}
+      minY={0}
+      style={
+        {
+          "backgroundColor": "transparent",
+          "borderWidth": 0,
+        }
       }
-    }
-  />,
+      vbHeight={0}
+      vbWidth={0}
+      width={0}
+    >
+      <RNSVGGroup
+        fill={
+          {
+            "payload": 4278190080,
+            "type": 0,
+          }
+        }
+      >
+        <RNSVGDefs>
+          <RNSVGRadialGradient
+            cx="50%"
+            cy="50%"
+            fx="50%"
+            fy="50%"
+            gradient={
+              [
+                0,
+                -1,
+                0.125,
+                -167772161,
+                0.25,
+                -637534209,
+                0.75,
+                654311423,
+                0.875,
+                184549375,
+                1,
+                16777215,
+              ]
+            }
+            gradientTransform={null}
+            gradientUnits={0}
+            name="grad0"
+            rx="50%"
+            ry="50%"
+          />
+          <RNSVGRadialGradient
+            cx="50%"
+            cy="50%"
+            fx="50%"
+            fy="50%"
+            gradient={
+              [
+                0,
+                -216279,
+                0.0588,
+                -216279,
+                0.1765,
+                -167988439,
+                0.29410000000000003,
+                -637750487,
+                0.7646999999999999,
+                654095145,
+                0.8824,
+                184333097,
+                1,
+                16560937,
+              ]
+            }
+            gradientTransform={null}
+            gradientUnits={0}
+            name="grad1"
+            rx="50%"
+            ry="50%"
+          />
+          <RNSVGRadialGradient
+            cx="50%"
+            cy="50%"
+            fx="50%"
+            fy="50%"
+            gradient={
+              [
+                0,
+                -16719740,
+                0.4667,
+                -16719740,
+                0.5333,
+                -184491900,
+                0.6,
+                -654253948,
+                0.8667,
+                637591684,
+                0.9333,
+                167829636,
+                1,
+                57476,
+              ]
+            }
+            gradientTransform={null}
+            gradientUnits={0}
+            name="grad2"
+            rx="50%"
+            ry="50%"
+          />
+        </RNSVGDefs>
+        <RNSVGGroup
+          fill={
+            {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
+          opacity={0.25}
+        >
+          <RNSVGCircle
+            cx="10%"
+            cy="10%"
+            fill={
+              {
+                "brushRef": "grad0",
+                "type": 1,
+              }
+            }
+            propList={
+              [
+                "fill",
+              ]
+            }
+            r="224.73239436619718"
+          />
+          <RNSVGCircle
+            cx="95%"
+            cy="30%"
+            fill={
+              {
+                "brushRef": "grad1",
+                "type": 1,
+              }
+            }
+            propList={
+              [
+                "fill",
+              ]
+            }
+            r="238.7781690140845"
+          />
+          <RNSVGCircle
+            cx="-15%"
+            cy="100%"
+            fill={
+              {
+                "brushRef": "grad2",
+                "type": 1,
+              }
+            }
+            propList={
+              [
+                "fill",
+              ]
+            }
+            r="421.37323943661977"
+          />
+        </RNSVGGroup>
+      </RNSVGGroup>
+    </RNSVGSvgView>
+  </View>,
   <View
     style={
       [
@@ -1812,36 +2136,198 @@ exports[`SendScene2 1 spendTarget with info tiles 1`] = `
 
 exports[`SendScene2 2 spendTargets 1`] = `
 [
-  <BVLinearGradient
-    colors={
+  <View
+    onLayout={[Function]}
+    style={
       [
-        4278585612,
-        4279971643,
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "backgroundColor": "#1a1a1a",
+        },
       ]
     }
-    endPoint={
-      {
-        "x": 1,
-        "y": 0,
-      }
-    }
-    locations={null}
-    startPoint={
-      {
-        "x": 0,
-        "y": 0,
-      }
-    }
-    style={
-      {
-        "bottom": 0,
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
+  >
+    <RNSVGSvgView
+      align="xMidYMid"
+      bbHeight="0"
+      bbWidth="0"
+      focusable={false}
+      height={0}
+      meetOrSlice={0}
+      minX={0}
+      minY={0}
+      style={
+        {
+          "backgroundColor": "transparent",
+          "borderWidth": 0,
+        }
       }
-    }
-  />,
+      vbHeight={0}
+      vbWidth={0}
+      width={0}
+    >
+      <RNSVGGroup
+        fill={
+          {
+            "payload": 4278190080,
+            "type": 0,
+          }
+        }
+      >
+        <RNSVGDefs>
+          <RNSVGRadialGradient
+            cx="50%"
+            cy="50%"
+            fx="50%"
+            fy="50%"
+            gradient={
+              [
+                0,
+                -1,
+                0.125,
+                -167772161,
+                0.25,
+                -637534209,
+                0.75,
+                654311423,
+                0.875,
+                184549375,
+                1,
+                16777215,
+              ]
+            }
+            gradientTransform={null}
+            gradientUnits={0}
+            name="grad0"
+            rx="50%"
+            ry="50%"
+          />
+          <RNSVGRadialGradient
+            cx="50%"
+            cy="50%"
+            fx="50%"
+            fy="50%"
+            gradient={
+              [
+                0,
+                -216279,
+                0.0588,
+                -216279,
+                0.1765,
+                -167988439,
+                0.29410000000000003,
+                -637750487,
+                0.7646999999999999,
+                654095145,
+                0.8824,
+                184333097,
+                1,
+                16560937,
+              ]
+            }
+            gradientTransform={null}
+            gradientUnits={0}
+            name="grad1"
+            rx="50%"
+            ry="50%"
+          />
+          <RNSVGRadialGradient
+            cx="50%"
+            cy="50%"
+            fx="50%"
+            fy="50%"
+            gradient={
+              [
+                0,
+                -16719740,
+                0.4667,
+                -16719740,
+                0.5333,
+                -184491900,
+                0.6,
+                -654253948,
+                0.8667,
+                637591684,
+                0.9333,
+                167829636,
+                1,
+                57476,
+              ]
+            }
+            gradientTransform={null}
+            gradientUnits={0}
+            name="grad2"
+            rx="50%"
+            ry="50%"
+          />
+        </RNSVGDefs>
+        <RNSVGGroup
+          fill={
+            {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
+          opacity={0.25}
+        >
+          <RNSVGCircle
+            cx="10%"
+            cy="10%"
+            fill={
+              {
+                "brushRef": "grad0",
+                "type": 1,
+              }
+            }
+            propList={
+              [
+                "fill",
+              ]
+            }
+            r="224.73239436619718"
+          />
+          <RNSVGCircle
+            cx="95%"
+            cy="30%"
+            fill={
+              {
+                "brushRef": "grad1",
+                "type": 1,
+              }
+            }
+            propList={
+              [
+                "fill",
+              ]
+            }
+            r="238.7781690140845"
+          />
+          <RNSVGCircle
+            cx="-15%"
+            cy="100%"
+            fill={
+              {
+                "brushRef": "grad2",
+                "type": 1,
+              }
+            }
+            propList={
+              [
+                "fill",
+              ]
+            }
+            r="421.37323943661977"
+          />
+        </RNSVGGroup>
+      </RNSVGGroup>
+    </RNSVGSvgView>
+  </View>,
   <View
     style={
       [
@@ -2744,36 +3230,198 @@ exports[`SendScene2 2 spendTargets 1`] = `
 
 exports[`SendScene2 2 spendTargets hide tiles 1`] = `
 [
-  <BVLinearGradient
-    colors={
+  <View
+    onLayout={[Function]}
+    style={
       [
-        4278585612,
-        4279971643,
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "backgroundColor": "#1a1a1a",
+        },
       ]
     }
-    endPoint={
-      {
-        "x": 1,
-        "y": 0,
-      }
-    }
-    locations={null}
-    startPoint={
-      {
-        "x": 0,
-        "y": 0,
-      }
-    }
-    style={
-      {
-        "bottom": 0,
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
+  >
+    <RNSVGSvgView
+      align="xMidYMid"
+      bbHeight="0"
+      bbWidth="0"
+      focusable={false}
+      height={0}
+      meetOrSlice={0}
+      minX={0}
+      minY={0}
+      style={
+        {
+          "backgroundColor": "transparent",
+          "borderWidth": 0,
+        }
       }
-    }
-  />,
+      vbHeight={0}
+      vbWidth={0}
+      width={0}
+    >
+      <RNSVGGroup
+        fill={
+          {
+            "payload": 4278190080,
+            "type": 0,
+          }
+        }
+      >
+        <RNSVGDefs>
+          <RNSVGRadialGradient
+            cx="50%"
+            cy="50%"
+            fx="50%"
+            fy="50%"
+            gradient={
+              [
+                0,
+                -1,
+                0.125,
+                -167772161,
+                0.25,
+                -637534209,
+                0.75,
+                654311423,
+                0.875,
+                184549375,
+                1,
+                16777215,
+              ]
+            }
+            gradientTransform={null}
+            gradientUnits={0}
+            name="grad0"
+            rx="50%"
+            ry="50%"
+          />
+          <RNSVGRadialGradient
+            cx="50%"
+            cy="50%"
+            fx="50%"
+            fy="50%"
+            gradient={
+              [
+                0,
+                -216279,
+                0.0588,
+                -216279,
+                0.1765,
+                -167988439,
+                0.29410000000000003,
+                -637750487,
+                0.7646999999999999,
+                654095145,
+                0.8824,
+                184333097,
+                1,
+                16560937,
+              ]
+            }
+            gradientTransform={null}
+            gradientUnits={0}
+            name="grad1"
+            rx="50%"
+            ry="50%"
+          />
+          <RNSVGRadialGradient
+            cx="50%"
+            cy="50%"
+            fx="50%"
+            fy="50%"
+            gradient={
+              [
+                0,
+                -16719740,
+                0.4667,
+                -16719740,
+                0.5333,
+                -184491900,
+                0.6,
+                -654253948,
+                0.8667,
+                637591684,
+                0.9333,
+                167829636,
+                1,
+                57476,
+              ]
+            }
+            gradientTransform={null}
+            gradientUnits={0}
+            name="grad2"
+            rx="50%"
+            ry="50%"
+          />
+        </RNSVGDefs>
+        <RNSVGGroup
+          fill={
+            {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
+          opacity={0.25}
+        >
+          <RNSVGCircle
+            cx="10%"
+            cy="10%"
+            fill={
+              {
+                "brushRef": "grad0",
+                "type": 1,
+              }
+            }
+            propList={
+              [
+                "fill",
+              ]
+            }
+            r="224.73239436619718"
+          />
+          <RNSVGCircle
+            cx="95%"
+            cy="30%"
+            fill={
+              {
+                "brushRef": "grad1",
+                "type": 1,
+              }
+            }
+            propList={
+              [
+                "fill",
+              ]
+            }
+            r="238.7781690140845"
+          />
+          <RNSVGCircle
+            cx="-15%"
+            cy="100%"
+            fill={
+              {
+                "brushRef": "grad2",
+                "type": 1,
+              }
+            }
+            propList={
+              [
+                "fill",
+              ]
+            }
+            r="421.37323943661977"
+          />
+        </RNSVGGroup>
+      </RNSVGGroup>
+    </RNSVGSvgView>
+  </View>,
   <View
     style={
       [
@@ -3546,46 +4194,208 @@ exports[`SendScene2 2 spendTargets hide tiles 1`] = `
 
 exports[`SendScene2 2 spendTargets hide tiles 2`] = `
 [
-  <BVLinearGradient
-    colors={
-      [
-        4278585612,
-        4279971643,
-      ]
-    }
-    endPoint={
-      {
-        "x": 1,
-        "y": 0,
-      }
-    }
-    locations={null}
-    startPoint={
-      {
-        "x": 0,
-        "y": 0,
-      }
-    }
-    style={
-      {
-        "bottom": 0,
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
-      }
-    }
-  />,
   <View
+    onLayout={[Function]}
     style={
       [
         {
-          "alignItems": "stretch",
-          "flexDirection": "column",
-          "justifyContent": "flex-start",
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
         },
         {
-          "height": 1334,
+          "backgroundColor": "#1a1a1a",
+        },
+      ]
+    }
+  >
+    <RNSVGSvgView
+      align="xMidYMid"
+      bbHeight="0"
+      bbWidth="0"
+      focusable={false}
+      height={0}
+      meetOrSlice={0}
+      minX={0}
+      minY={0}
+      style={
+        {
+          "backgroundColor": "transparent",
+          "borderWidth": 0,
+        }
+      }
+      vbHeight={0}
+      vbWidth={0}
+      width={0}
+    >
+      <RNSVGGroup
+        fill={
+          {
+            "payload": 4278190080,
+            "type": 0,
+          }
+        }
+      >
+        <RNSVGDefs>
+          <RNSVGRadialGradient
+            cx="50%"
+            cy="50%"
+            fx="50%"
+            fy="50%"
+            gradient={
+              [
+                0,
+                -1,
+                0.125,
+                -167772161,
+                0.25,
+                -637534209,
+                0.75,
+                654311423,
+                0.875,
+                184549375,
+                1,
+                16777215,
+              ]
+            }
+            gradientTransform={null}
+            gradientUnits={0}
+            name="grad0"
+            rx="50%"
+            ry="50%"
+          />
+          <RNSVGRadialGradient
+            cx="50%"
+            cy="50%"
+            fx="50%"
+            fy="50%"
+            gradient={
+              [
+                0,
+                -216279,
+                0.0588,
+                -216279,
+                0.1765,
+                -167988439,
+                0.29410000000000003,
+                -637750487,
+                0.7646999999999999,
+                654095145,
+                0.8824,
+                184333097,
+                1,
+                16560937,
+              ]
+            }
+            gradientTransform={null}
+            gradientUnits={0}
+            name="grad1"
+            rx="50%"
+            ry="50%"
+          />
+          <RNSVGRadialGradient
+            cx="50%"
+            cy="50%"
+            fx="50%"
+            fy="50%"
+            gradient={
+              [
+                0,
+                -16719740,
+                0.4667,
+                -16719740,
+                0.5333,
+                -184491900,
+                0.6,
+                -654253948,
+                0.8667,
+                637591684,
+                0.9333,
+                167829636,
+                1,
+                57476,
+              ]
+            }
+            gradientTransform={null}
+            gradientUnits={0}
+            name="grad2"
+            rx="50%"
+            ry="50%"
+          />
+        </RNSVGDefs>
+        <RNSVGGroup
+          fill={
+            {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
+          opacity={0.25}
+        >
+          <RNSVGCircle
+            cx="10%"
+            cy="10%"
+            fill={
+              {
+                "brushRef": "grad0",
+                "type": 1,
+              }
+            }
+            propList={
+              [
+                "fill",
+              ]
+            }
+            r="224.73239436619718"
+          />
+          <RNSVGCircle
+            cx="95%"
+            cy="30%"
+            fill={
+              {
+                "brushRef": "grad1",
+                "type": 1,
+              }
+            }
+            propList={
+              [
+                "fill",
+              ]
+            }
+            r="238.7781690140845"
+          />
+          <RNSVGCircle
+            cx="-15%"
+            cy="100%"
+            fill={
+              {
+                "brushRef": "grad2",
+                "type": 1,
+              }
+            }
+            propList={
+              [
+                "fill",
+              ]
+            }
+            r="421.37323943661977"
+          />
+        </RNSVGGroup>
+      </RNSVGGroup>
+    </RNSVGSvgView>
+  </View>,
+  <View
+    style={
+      [
+        {
+          "alignItems": "stretch",
+          "flexDirection": "column",
+          "justifyContent": "flex-start",
+        },
+        {
+          "height": 1334,
           "width": 750,
         },
         {},
@@ -4326,36 +5136,198 @@ exports[`SendScene2 2 spendTargets hide tiles 2`] = `
 
 exports[`SendScene2 2 spendTargets hide tiles 3`] = `
 [
-  <BVLinearGradient
-    colors={
+  <View
+    onLayout={[Function]}
+    style={
       [
-        4278585612,
-        4279971643,
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "backgroundColor": "#1a1a1a",
+        },
       ]
     }
-    endPoint={
-      {
-        "x": 1,
-        "y": 0,
-      }
-    }
-    locations={null}
-    startPoint={
-      {
-        "x": 0,
-        "y": 0,
-      }
-    }
-    style={
-      {
-        "bottom": 0,
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
+  >
+    <RNSVGSvgView
+      align="xMidYMid"
+      bbHeight="0"
+      bbWidth="0"
+      focusable={false}
+      height={0}
+      meetOrSlice={0}
+      minX={0}
+      minY={0}
+      style={
+        {
+          "backgroundColor": "transparent",
+          "borderWidth": 0,
+        }
       }
-    }
-  />,
+      vbHeight={0}
+      vbWidth={0}
+      width={0}
+    >
+      <RNSVGGroup
+        fill={
+          {
+            "payload": 4278190080,
+            "type": 0,
+          }
+        }
+      >
+        <RNSVGDefs>
+          <RNSVGRadialGradient
+            cx="50%"
+            cy="50%"
+            fx="50%"
+            fy="50%"
+            gradient={
+              [
+                0,
+                -1,
+                0.125,
+                -167772161,
+                0.25,
+                -637534209,
+                0.75,
+                654311423,
+                0.875,
+                184549375,
+                1,
+                16777215,
+              ]
+            }
+            gradientTransform={null}
+            gradientUnits={0}
+            name="grad0"
+            rx="50%"
+            ry="50%"
+          />
+          <RNSVGRadialGradient
+            cx="50%"
+            cy="50%"
+            fx="50%"
+            fy="50%"
+            gradient={
+              [
+                0,
+                -216279,
+                0.0588,
+                -216279,
+                0.1765,
+                -167988439,
+                0.29410000000000003,
+                -637750487,
+                0.7646999999999999,
+                654095145,
+                0.8824,
+                184333097,
+                1,
+                16560937,
+              ]
+            }
+            gradientTransform={null}
+            gradientUnits={0}
+            name="grad1"
+            rx="50%"
+            ry="50%"
+          />
+          <RNSVGRadialGradient
+            cx="50%"
+            cy="50%"
+            fx="50%"
+            fy="50%"
+            gradient={
+              [
+                0,
+                -16719740,
+                0.4667,
+                -16719740,
+                0.5333,
+                -184491900,
+                0.6,
+                -654253948,
+                0.8667,
+                637591684,
+                0.9333,
+                167829636,
+                1,
+                57476,
+              ]
+            }
+            gradientTransform={null}
+            gradientUnits={0}
+            name="grad2"
+            rx="50%"
+            ry="50%"
+          />
+        </RNSVGDefs>
+        <RNSVGGroup
+          fill={
+            {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
+          opacity={0.25}
+        >
+          <RNSVGCircle
+            cx="10%"
+            cy="10%"
+            fill={
+              {
+                "brushRef": "grad0",
+                "type": 1,
+              }
+            }
+            propList={
+              [
+                "fill",
+              ]
+            }
+            r="224.73239436619718"
+          />
+          <RNSVGCircle
+            cx="95%"
+            cy="30%"
+            fill={
+              {
+                "brushRef": "grad1",
+                "type": 1,
+              }
+            }
+            propList={
+              [
+                "fill",
+              ]
+            }
+            r="238.7781690140845"
+          />
+          <RNSVGCircle
+            cx="-15%"
+            cy="100%"
+            fill={
+              {
+                "brushRef": "grad2",
+                "type": 1,
+              }
+            }
+            propList={
+              [
+                "fill",
+              ]
+            }
+            r="421.37323943661977"
+          />
+        </RNSVGGroup>
+      </RNSVGGroup>
+    </RNSVGSvgView>
+  </View>,
   <View
     style={
       [
@@ -4976,36 +5948,198 @@ exports[`SendScene2 2 spendTargets hide tiles 3`] = `
 
 exports[`SendScene2 2 spendTargets lock tiles 1`] = `
 [
-  <BVLinearGradient
-    colors={
+  <View
+    onLayout={[Function]}
+    style={
       [
-        4278585612,
-        4279971643,
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "backgroundColor": "#1a1a1a",
+        },
       ]
     }
-    endPoint={
-      {
-        "x": 1,
-        "y": 0,
-      }
-    }
-    locations={null}
-    startPoint={
-      {
-        "x": 0,
-        "y": 0,
-      }
-    }
-    style={
-      {
-        "bottom": 0,
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
+  >
+    <RNSVGSvgView
+      align="xMidYMid"
+      bbHeight="0"
+      bbWidth="0"
+      focusable={false}
+      height={0}
+      meetOrSlice={0}
+      minX={0}
+      minY={0}
+      style={
+        {
+          "backgroundColor": "transparent",
+          "borderWidth": 0,
+        }
       }
-    }
-  />,
+      vbHeight={0}
+      vbWidth={0}
+      width={0}
+    >
+      <RNSVGGroup
+        fill={
+          {
+            "payload": 4278190080,
+            "type": 0,
+          }
+        }
+      >
+        <RNSVGDefs>
+          <RNSVGRadialGradient
+            cx="50%"
+            cy="50%"
+            fx="50%"
+            fy="50%"
+            gradient={
+              [
+                0,
+                -1,
+                0.125,
+                -167772161,
+                0.25,
+                -637534209,
+                0.75,
+                654311423,
+                0.875,
+                184549375,
+                1,
+                16777215,
+              ]
+            }
+            gradientTransform={null}
+            gradientUnits={0}
+            name="grad0"
+            rx="50%"
+            ry="50%"
+          />
+          <RNSVGRadialGradient
+            cx="50%"
+            cy="50%"
+            fx="50%"
+            fy="50%"
+            gradient={
+              [
+                0,
+                -216279,
+                0.0588,
+                -216279,
+                0.1765,
+                -167988439,
+                0.29410000000000003,
+                -637750487,
+                0.7646999999999999,
+                654095145,
+                0.8824,
+                184333097,
+                1,
+                16560937,
+              ]
+            }
+            gradientTransform={null}
+            gradientUnits={0}
+            name="grad1"
+            rx="50%"
+            ry="50%"
+          />
+          <RNSVGRadialGradient
+            cx="50%"
+            cy="50%"
+            fx="50%"
+            fy="50%"
+            gradient={
+              [
+                0,
+                -16719740,
+                0.4667,
+                -16719740,
+                0.5333,
+                -184491900,
+                0.6,
+                -654253948,
+                0.8667,
+                637591684,
+                0.9333,
+                167829636,
+                1,
+                57476,
+              ]
+            }
+            gradientTransform={null}
+            gradientUnits={0}
+            name="grad2"
+            rx="50%"
+            ry="50%"
+          />
+        </RNSVGDefs>
+        <RNSVGGroup
+          fill={
+            {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
+          opacity={0.25}
+        >
+          <RNSVGCircle
+            cx="10%"
+            cy="10%"
+            fill={
+              {
+                "brushRef": "grad0",
+                "type": 1,
+              }
+            }
+            propList={
+              [
+                "fill",
+              ]
+            }
+            r="224.73239436619718"
+          />
+          <RNSVGCircle
+            cx="95%"
+            cy="30%"
+            fill={
+              {
+                "brushRef": "grad1",
+                "type": 1,
+              }
+            }
+            propList={
+              [
+                "fill",
+              ]
+            }
+            r="238.7781690140845"
+          />
+          <RNSVGCircle
+            cx="-15%"
+            cy="100%"
+            fill={
+              {
+                "brushRef": "grad2",
+                "type": 1,
+              }
+            }
+            propList={
+              [
+                "fill",
+              ]
+            }
+            r="421.37323943661977"
+          />
+        </RNSVGGroup>
+      </RNSVGGroup>
+    </RNSVGSvgView>
+  </View>,
   <View
     style={
       [
@@ -5881,36 +7015,198 @@ exports[`SendScene2 2 spendTargets lock tiles 1`] = `
 
 exports[`SendScene2 2 spendTargets lock tiles 2`] = `
 [
-  <BVLinearGradient
-    colors={
+  <View
+    onLayout={[Function]}
+    style={
       [
-        4278585612,
-        4279971643,
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "backgroundColor": "#1a1a1a",
+        },
       ]
     }
-    endPoint={
-      {
-        "x": 1,
-        "y": 0,
-      }
-    }
-    locations={null}
-    startPoint={
-      {
-        "x": 0,
-        "y": 0,
-      }
-    }
-    style={
-      {
-        "bottom": 0,
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
+  >
+    <RNSVGSvgView
+      align="xMidYMid"
+      bbHeight="0"
+      bbWidth="0"
+      focusable={false}
+      height={0}
+      meetOrSlice={0}
+      minX={0}
+      minY={0}
+      style={
+        {
+          "backgroundColor": "transparent",
+          "borderWidth": 0,
+        }
       }
-    }
-  />,
+      vbHeight={0}
+      vbWidth={0}
+      width={0}
+    >
+      <RNSVGGroup
+        fill={
+          {
+            "payload": 4278190080,
+            "type": 0,
+          }
+        }
+      >
+        <RNSVGDefs>
+          <RNSVGRadialGradient
+            cx="50%"
+            cy="50%"
+            fx="50%"
+            fy="50%"
+            gradient={
+              [
+                0,
+                -1,
+                0.125,
+                -167772161,
+                0.25,
+                -637534209,
+                0.75,
+                654311423,
+                0.875,
+                184549375,
+                1,
+                16777215,
+              ]
+            }
+            gradientTransform={null}
+            gradientUnits={0}
+            name="grad0"
+            rx="50%"
+            ry="50%"
+          />
+          <RNSVGRadialGradient
+            cx="50%"
+            cy="50%"
+            fx="50%"
+            fy="50%"
+            gradient={
+              [
+                0,
+                -216279,
+                0.0588,
+                -216279,
+                0.1765,
+                -167988439,
+                0.29410000000000003,
+                -637750487,
+                0.7646999999999999,
+                654095145,
+                0.8824,
+                184333097,
+                1,
+                16560937,
+              ]
+            }
+            gradientTransform={null}
+            gradientUnits={0}
+            name="grad1"
+            rx="50%"
+            ry="50%"
+          />
+          <RNSVGRadialGradient
+            cx="50%"
+            cy="50%"
+            fx="50%"
+            fy="50%"
+            gradient={
+              [
+                0,
+                -16719740,
+                0.4667,
+                -16719740,
+                0.5333,
+                -184491900,
+                0.6,
+                -654253948,
+                0.8667,
+                637591684,
+                0.9333,
+                167829636,
+                1,
+                57476,
+              ]
+            }
+            gradientTransform={null}
+            gradientUnits={0}
+            name="grad2"
+            rx="50%"
+            ry="50%"
+          />
+        </RNSVGDefs>
+        <RNSVGGroup
+          fill={
+            {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
+          opacity={0.25}
+        >
+          <RNSVGCircle
+            cx="10%"
+            cy="10%"
+            fill={
+              {
+                "brushRef": "grad0",
+                "type": 1,
+              }
+            }
+            propList={
+              [
+                "fill",
+              ]
+            }
+            r="224.73239436619718"
+          />
+          <RNSVGCircle
+            cx="95%"
+            cy="30%"
+            fill={
+              {
+                "brushRef": "grad1",
+                "type": 1,
+              }
+            }
+            propList={
+              [
+                "fill",
+              ]
+            }
+            r="238.7781690140845"
+          />
+          <RNSVGCircle
+            cx="-15%"
+            cy="100%"
+            fill={
+              {
+                "brushRef": "grad2",
+                "type": 1,
+              }
+            }
+            propList={
+              [
+                "fill",
+              ]
+            }
+            r="421.37323943661977"
+          />
+        </RNSVGGroup>
+      </RNSVGGroup>
+    </RNSVGSvgView>
+  </View>,
   <View
     style={
       [
@@ -6759,36 +8055,198 @@ exports[`SendScene2 2 spendTargets lock tiles 2`] = `
 
 exports[`SendScene2 2 spendTargets lock tiles 3`] = `
 [
-  <BVLinearGradient
-    colors={
+  <View
+    onLayout={[Function]}
+    style={
       [
-        4278585612,
-        4279971643,
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "backgroundColor": "#1a1a1a",
+        },
       ]
     }
-    endPoint={
-      {
-        "x": 1,
-        "y": 0,
-      }
-    }
-    locations={null}
-    startPoint={
-      {
-        "x": 0,
-        "y": 0,
-      }
-    }
-    style={
-      {
-        "bottom": 0,
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
+  >
+    <RNSVGSvgView
+      align="xMidYMid"
+      bbHeight="0"
+      bbWidth="0"
+      focusable={false}
+      height={0}
+      meetOrSlice={0}
+      minX={0}
+      minY={0}
+      style={
+        {
+          "backgroundColor": "transparent",
+          "borderWidth": 0,
+        }
       }
-    }
-  />,
+      vbHeight={0}
+      vbWidth={0}
+      width={0}
+    >
+      <RNSVGGroup
+        fill={
+          {
+            "payload": 4278190080,
+            "type": 0,
+          }
+        }
+      >
+        <RNSVGDefs>
+          <RNSVGRadialGradient
+            cx="50%"
+            cy="50%"
+            fx="50%"
+            fy="50%"
+            gradient={
+              [
+                0,
+                -1,
+                0.125,
+                -167772161,
+                0.25,
+                -637534209,
+                0.75,
+                654311423,
+                0.875,
+                184549375,
+                1,
+                16777215,
+              ]
+            }
+            gradientTransform={null}
+            gradientUnits={0}
+            name="grad0"
+            rx="50%"
+            ry="50%"
+          />
+          <RNSVGRadialGradient
+            cx="50%"
+            cy="50%"
+            fx="50%"
+            fy="50%"
+            gradient={
+              [
+                0,
+                -216279,
+                0.0588,
+                -216279,
+                0.1765,
+                -167988439,
+                0.29410000000000003,
+                -637750487,
+                0.7646999999999999,
+                654095145,
+                0.8824,
+                184333097,
+                1,
+                16560937,
+              ]
+            }
+            gradientTransform={null}
+            gradientUnits={0}
+            name="grad1"
+            rx="50%"
+            ry="50%"
+          />
+          <RNSVGRadialGradient
+            cx="50%"
+            cy="50%"
+            fx="50%"
+            fy="50%"
+            gradient={
+              [
+                0,
+                -16719740,
+                0.4667,
+                -16719740,
+                0.5333,
+                -184491900,
+                0.6,
+                -654253948,
+                0.8667,
+                637591684,
+                0.9333,
+                167829636,
+                1,
+                57476,
+              ]
+            }
+            gradientTransform={null}
+            gradientUnits={0}
+            name="grad2"
+            rx="50%"
+            ry="50%"
+          />
+        </RNSVGDefs>
+        <RNSVGGroup
+          fill={
+            {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
+          opacity={0.25}
+        >
+          <RNSVGCircle
+            cx="10%"
+            cy="10%"
+            fill={
+              {
+                "brushRef": "grad0",
+                "type": 1,
+              }
+            }
+            propList={
+              [
+                "fill",
+              ]
+            }
+            r="224.73239436619718"
+          />
+          <RNSVGCircle
+            cx="95%"
+            cy="30%"
+            fill={
+              {
+                "brushRef": "grad1",
+                "type": 1,
+              }
+            }
+            propList={
+              [
+                "fill",
+              ]
+            }
+            r="238.7781690140845"
+          />
+          <RNSVGCircle
+            cx="-15%"
+            cy="100%"
+            fill={
+              {
+                "brushRef": "grad2",
+                "type": 1,
+              }
+            }
+            propList={
+              [
+                "fill",
+              ]
+            }
+            r="421.37323943661977"
+          />
+        </RNSVGGroup>
+      </RNSVGGroup>
+    </RNSVGSvgView>
+  </View>,
   <View
     style={
       [
@@ -7610,36 +9068,198 @@ exports[`SendScene2 2 spendTargets lock tiles 3`] = `
 
 exports[`SendScene2 Render SendScene 1`] = `
 [
-  <BVLinearGradient
-    colors={
+  <View
+    onLayout={[Function]}
+    style={
       [
-        4278585612,
-        4279971643,
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "backgroundColor": "#1a1a1a",
+        },
       ]
     }
-    endPoint={
-      {
-        "x": 1,
-        "y": 0,
-      }
-    }
-    locations={null}
-    startPoint={
-      {
-        "x": 0,
-        "y": 0,
-      }
-    }
-    style={
-      {
-        "bottom": 0,
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
+  >
+    <RNSVGSvgView
+      align="xMidYMid"
+      bbHeight="0"
+      bbWidth="0"
+      focusable={false}
+      height={0}
+      meetOrSlice={0}
+      minX={0}
+      minY={0}
+      style={
+        {
+          "backgroundColor": "transparent",
+          "borderWidth": 0,
+        }
       }
-    }
-  />,
+      vbHeight={0}
+      vbWidth={0}
+      width={0}
+    >
+      <RNSVGGroup
+        fill={
+          {
+            "payload": 4278190080,
+            "type": 0,
+          }
+        }
+      >
+        <RNSVGDefs>
+          <RNSVGRadialGradient
+            cx="50%"
+            cy="50%"
+            fx="50%"
+            fy="50%"
+            gradient={
+              [
+                0,
+                -1,
+                0.125,
+                -167772161,
+                0.25,
+                -637534209,
+                0.75,
+                654311423,
+                0.875,
+                184549375,
+                1,
+                16777215,
+              ]
+            }
+            gradientTransform={null}
+            gradientUnits={0}
+            name="grad0"
+            rx="50%"
+            ry="50%"
+          />
+          <RNSVGRadialGradient
+            cx="50%"
+            cy="50%"
+            fx="50%"
+            fy="50%"
+            gradient={
+              [
+                0,
+                -216279,
+                0.0588,
+                -216279,
+                0.1765,
+                -167988439,
+                0.29410000000000003,
+                -637750487,
+                0.7646999999999999,
+                654095145,
+                0.8824,
+                184333097,
+                1,
+                16560937,
+              ]
+            }
+            gradientTransform={null}
+            gradientUnits={0}
+            name="grad1"
+            rx="50%"
+            ry="50%"
+          />
+          <RNSVGRadialGradient
+            cx="50%"
+            cy="50%"
+            fx="50%"
+            fy="50%"
+            gradient={
+              [
+                0,
+                -16719740,
+                0.4667,
+                -16719740,
+                0.5333,
+                -184491900,
+                0.6,
+                -654253948,
+                0.8667,
+                637591684,
+                0.9333,
+                167829636,
+                1,
+                57476,
+              ]
+            }
+            gradientTransform={null}
+            gradientUnits={0}
+            name="grad2"
+            rx="50%"
+            ry="50%"
+          />
+        </RNSVGDefs>
+        <RNSVGGroup
+          fill={
+            {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
+          opacity={0.25}
+        >
+          <RNSVGCircle
+            cx="10%"
+            cy="10%"
+            fill={
+              {
+                "brushRef": "grad0",
+                "type": 1,
+              }
+            }
+            propList={
+              [
+                "fill",
+              ]
+            }
+            r="224.73239436619718"
+          />
+          <RNSVGCircle
+            cx="95%"
+            cy="30%"
+            fill={
+              {
+                "brushRef": "grad1",
+                "type": 1,
+              }
+            }
+            propList={
+              [
+                "fill",
+              ]
+            }
+            r="238.7781690140845"
+          />
+          <RNSVGCircle
+            cx="-15%"
+            cy="100%"
+            fill={
+              {
+                "brushRef": "grad2",
+                "type": 1,
+              }
+            }
+            propList={
+              [
+                "fill",
+              ]
+            }
+            r="421.37323943661977"
+          />
+        </RNSVGGroup>
+      </RNSVGGroup>
+    </RNSVGSvgView>
+  </View>,
   <View
     style={
       [
diff --git a/src/__tests__/scenes/__snapshots__/SettingsScene.test.tsx.snap b/src/__tests__/scenes/__snapshots__/SettingsScene.test.tsx.snap
index a2c086dd652..3b7ca034fa5 100644
--- a/src/__tests__/scenes/__snapshots__/SettingsScene.test.tsx.snap
+++ b/src/__tests__/scenes/__snapshots__/SettingsScene.test.tsx.snap
@@ -2,36 +2,198 @@
 
 exports[`MyComponent should render Locked SettingsOverview 1`] = `
 [
-  <BVLinearGradient
-    colors={
+  <View
+    onLayout={[Function]}
+    style={
       [
-        4278585612,
-        4279971643,
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "backgroundColor": "#1a1a1a",
+        },
       ]
     }
-    endPoint={
-      {
-        "x": 1,
-        "y": 0,
-      }
-    }
-    locations={null}
-    startPoint={
-      {
-        "x": 0,
-        "y": 0,
-      }
-    }
-    style={
-      {
-        "bottom": 0,
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
+  >
+    <RNSVGSvgView
+      align="xMidYMid"
+      bbHeight="0"
+      bbWidth="0"
+      focusable={false}
+      height={0}
+      meetOrSlice={0}
+      minX={0}
+      minY={0}
+      style={
+        {
+          "backgroundColor": "transparent",
+          "borderWidth": 0,
+        }
       }
-    }
-  />,
+      vbHeight={0}
+      vbWidth={0}
+      width={0}
+    >
+      <RNSVGGroup
+        fill={
+          {
+            "payload": 4278190080,
+            "type": 0,
+          }
+        }
+      >
+        <RNSVGDefs>
+          <RNSVGRadialGradient
+            cx="50%"
+            cy="50%"
+            fx="50%"
+            fy="50%"
+            gradient={
+              [
+                0,
+                -1,
+                0.125,
+                -167772161,
+                0.25,
+                -637534209,
+                0.75,
+                654311423,
+                0.875,
+                184549375,
+                1,
+                16777215,
+              ]
+            }
+            gradientTransform={null}
+            gradientUnits={0}
+            name="grad0"
+            rx="50%"
+            ry="50%"
+          />
+          <RNSVGRadialGradient
+            cx="50%"
+            cy="50%"
+            fx="50%"
+            fy="50%"
+            gradient={
+              [
+                0,
+                -216279,
+                0.0588,
+                -216279,
+                0.1765,
+                -167988439,
+                0.29410000000000003,
+                -637750487,
+                0.7646999999999999,
+                654095145,
+                0.8824,
+                184333097,
+                1,
+                16560937,
+              ]
+            }
+            gradientTransform={null}
+            gradientUnits={0}
+            name="grad1"
+            rx="50%"
+            ry="50%"
+          />
+          <RNSVGRadialGradient
+            cx="50%"
+            cy="50%"
+            fx="50%"
+            fy="50%"
+            gradient={
+              [
+                0,
+                -16719740,
+                0.4667,
+                -16719740,
+                0.5333,
+                -184491900,
+                0.6,
+                -654253948,
+                0.8667,
+                637591684,
+                0.9333,
+                167829636,
+                1,
+                57476,
+              ]
+            }
+            gradientTransform={null}
+            gradientUnits={0}
+            name="grad2"
+            rx="50%"
+            ry="50%"
+          />
+        </RNSVGDefs>
+        <RNSVGGroup
+          fill={
+            {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
+          opacity={0.25}
+        >
+          <RNSVGCircle
+            cx="10%"
+            cy="10%"
+            fill={
+              {
+                "brushRef": "grad0",
+                "type": 1,
+              }
+            }
+            propList={
+              [
+                "fill",
+              ]
+            }
+            r="224.73239436619718"
+          />
+          <RNSVGCircle
+            cx="95%"
+            cy="30%"
+            fill={
+              {
+                "brushRef": "grad1",
+                "type": 1,
+              }
+            }
+            propList={
+              [
+                "fill",
+              ]
+            }
+            r="238.7781690140845"
+          />
+          <RNSVGCircle
+            cx="-15%"
+            cy="100%"
+            fill={
+              {
+                "brushRef": "grad2",
+                "type": 1,
+              }
+            }
+            propList={
+              [
+                "fill",
+              ]
+            }
+            r="421.37323943661977"
+          />
+        </RNSVGGroup>
+      </RNSVGGroup>
+    </RNSVGSvgView>
+  </View>,
   <RCTScrollView
     contentContainerStyle={
       {
@@ -2855,36 +3017,198 @@ exports[`MyComponent should render Locked SettingsOverview 1`] = `
 
 exports[`MyComponent should render UnLocked SettingsOverview 1`] = `
 [
-  <BVLinearGradient
-    colors={
+  <View
+    onLayout={[Function]}
+    style={
       [
-        4278585612,
-        4279971643,
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "backgroundColor": "#1a1a1a",
+        },
       ]
     }
-    endPoint={
-      {
-        "x": 1,
-        "y": 0,
-      }
-    }
-    locations={null}
-    startPoint={
-      {
-        "x": 0,
-        "y": 0,
-      }
-    }
-    style={
-      {
-        "bottom": 0,
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
+  >
+    <RNSVGSvgView
+      align="xMidYMid"
+      bbHeight="0"
+      bbWidth="0"
+      focusable={false}
+      height={0}
+      meetOrSlice={0}
+      minX={0}
+      minY={0}
+      style={
+        {
+          "backgroundColor": "transparent",
+          "borderWidth": 0,
+        }
       }
-    }
-  />,
+      vbHeight={0}
+      vbWidth={0}
+      width={0}
+    >
+      <RNSVGGroup
+        fill={
+          {
+            "payload": 4278190080,
+            "type": 0,
+          }
+        }
+      >
+        <RNSVGDefs>
+          <RNSVGRadialGradient
+            cx="50%"
+            cy="50%"
+            fx="50%"
+            fy="50%"
+            gradient={
+              [
+                0,
+                -1,
+                0.125,
+                -167772161,
+                0.25,
+                -637534209,
+                0.75,
+                654311423,
+                0.875,
+                184549375,
+                1,
+                16777215,
+              ]
+            }
+            gradientTransform={null}
+            gradientUnits={0}
+            name="grad0"
+            rx="50%"
+            ry="50%"
+          />
+          <RNSVGRadialGradient
+            cx="50%"
+            cy="50%"
+            fx="50%"
+            fy="50%"
+            gradient={
+              [
+                0,
+                -216279,
+                0.0588,
+                -216279,
+                0.1765,
+                -167988439,
+                0.29410000000000003,
+                -637750487,
+                0.7646999999999999,
+                654095145,
+                0.8824,
+                184333097,
+                1,
+                16560937,
+              ]
+            }
+            gradientTransform={null}
+            gradientUnits={0}
+            name="grad1"
+            rx="50%"
+            ry="50%"
+          />
+          <RNSVGRadialGradient
+            cx="50%"
+            cy="50%"
+            fx="50%"
+            fy="50%"
+            gradient={
+              [
+                0,
+                -16719740,
+                0.4667,
+                -16719740,
+                0.5333,
+                -184491900,
+                0.6,
+                -654253948,
+                0.8667,
+                637591684,
+                0.9333,
+                167829636,
+                1,
+                57476,
+              ]
+            }
+            gradientTransform={null}
+            gradientUnits={0}
+            name="grad2"
+            rx="50%"
+            ry="50%"
+          />
+        </RNSVGDefs>
+        <RNSVGGroup
+          fill={
+            {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
+          opacity={0.25}
+        >
+          <RNSVGCircle
+            cx="10%"
+            cy="10%"
+            fill={
+              {
+                "brushRef": "grad0",
+                "type": 1,
+              }
+            }
+            propList={
+              [
+                "fill",
+              ]
+            }
+            r="224.73239436619718"
+          />
+          <RNSVGCircle
+            cx="95%"
+            cy="30%"
+            fill={
+              {
+                "brushRef": "grad1",
+                "type": 1,
+              }
+            }
+            propList={
+              [
+                "fill",
+              ]
+            }
+            r="238.7781690140845"
+          />
+          <RNSVGCircle
+            cx="-15%"
+            cy="100%"
+            fill={
+              {
+                "brushRef": "grad2",
+                "type": 1,
+              }
+            }
+            propList={
+              [
+                "fill",
+              ]
+            }
+            r="421.37323943661977"
+          />
+        </RNSVGGroup>
+      </RNSVGGroup>
+    </RNSVGSvgView>
+  </View>,
   <RCTScrollView
     contentContainerStyle={
       {
diff --git a/src/__tests__/scenes/__snapshots__/TransactionDetailsScene.test.tsx.snap b/src/__tests__/scenes/__snapshots__/TransactionDetailsScene.test.tsx.snap
index 3829a650bbd..c15d78c5232 100644
--- a/src/__tests__/scenes/__snapshots__/TransactionDetailsScene.test.tsx.snap
+++ b/src/__tests__/scenes/__snapshots__/TransactionDetailsScene.test.tsx.snap
@@ -2,36 +2,198 @@
 
 exports[`TransactionDetailsScene should render 1`] = `
 [
-  <BVLinearGradient
-    colors={
+  <View
+    onLayout={[Function]}
+    style={
       [
-        4278585612,
-        4279971643,
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "backgroundColor": "#1a1a1a",
+        },
       ]
     }
-    endPoint={
-      {
-        "x": 1,
-        "y": 0,
-      }
-    }
-    locations={null}
-    startPoint={
-      {
-        "x": 0,
-        "y": 0,
-      }
-    }
-    style={
-      {
-        "bottom": 0,
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
+  >
+    <RNSVGSvgView
+      align="xMidYMid"
+      bbHeight="0"
+      bbWidth="0"
+      focusable={false}
+      height={0}
+      meetOrSlice={0}
+      minX={0}
+      minY={0}
+      style={
+        {
+          "backgroundColor": "transparent",
+          "borderWidth": 0,
+        }
       }
-    }
-  />,
+      vbHeight={0}
+      vbWidth={0}
+      width={0}
+    >
+      <RNSVGGroup
+        fill={
+          {
+            "payload": 4278190080,
+            "type": 0,
+          }
+        }
+      >
+        <RNSVGDefs>
+          <RNSVGRadialGradient
+            cx="50%"
+            cy="50%"
+            fx="50%"
+            fy="50%"
+            gradient={
+              [
+                0,
+                -1,
+                0.125,
+                -167772161,
+                0.25,
+                -637534209,
+                0.75,
+                654311423,
+                0.875,
+                184549375,
+                1,
+                16777215,
+              ]
+            }
+            gradientTransform={null}
+            gradientUnits={0}
+            name="grad0"
+            rx="50%"
+            ry="50%"
+          />
+          <RNSVGRadialGradient
+            cx="50%"
+            cy="50%"
+            fx="50%"
+            fy="50%"
+            gradient={
+              [
+                0,
+                -216279,
+                0.0588,
+                -216279,
+                0.1765,
+                -167988439,
+                0.29410000000000003,
+                -637750487,
+                0.7646999999999999,
+                654095145,
+                0.8824,
+                184333097,
+                1,
+                16560937,
+              ]
+            }
+            gradientTransform={null}
+            gradientUnits={0}
+            name="grad1"
+            rx="50%"
+            ry="50%"
+          />
+          <RNSVGRadialGradient
+            cx="50%"
+            cy="50%"
+            fx="50%"
+            fy="50%"
+            gradient={
+              [
+                0,
+                -16719740,
+                0.4667,
+                -16719740,
+                0.5333,
+                -184491900,
+                0.6,
+                -654253948,
+                0.8667,
+                637591684,
+                0.9333,
+                167829636,
+                1,
+                57476,
+              ]
+            }
+            gradientTransform={null}
+            gradientUnits={0}
+            name="grad2"
+            rx="50%"
+            ry="50%"
+          />
+        </RNSVGDefs>
+        <RNSVGGroup
+          fill={
+            {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
+          opacity={0.25}
+        >
+          <RNSVGCircle
+            cx="10%"
+            cy="10%"
+            fill={
+              {
+                "brushRef": "grad0",
+                "type": 1,
+              }
+            }
+            propList={
+              [
+                "fill",
+              ]
+            }
+            r="224.73239436619718"
+          />
+          <RNSVGCircle
+            cx="95%"
+            cy="30%"
+            fill={
+              {
+                "brushRef": "grad1",
+                "type": 1,
+              }
+            }
+            propList={
+              [
+                "fill",
+              ]
+            }
+            r="238.7781690140845"
+          />
+          <RNSVGCircle
+            cx="-15%"
+            cy="100%"
+            fill={
+              {
+                "brushRef": "grad2",
+                "type": 1,
+              }
+            }
+            propList={
+              [
+                "fill",
+              ]
+            }
+            r="421.37323943661977"
+          />
+        </RNSVGGroup>
+      </RNSVGGroup>
+    </RNSVGSvgView>
+  </View>,
   <RCTScrollView
     contentContainerStyle={
       {
@@ -1569,36 +1731,198 @@ exports[`TransactionDetailsScene should render 1`] = `
 
 exports[`TransactionDetailsScene should render with negative nativeAmount and fiatAmount 1`] = `
 [
-  <BVLinearGradient
-    colors={
+  <View
+    onLayout={[Function]}
+    style={
       [
-        4278585612,
-        4279971643,
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "backgroundColor": "#1a1a1a",
+        },
       ]
     }
-    endPoint={
-      {
-        "x": 1,
-        "y": 0,
-      }
-    }
-    locations={null}
-    startPoint={
-      {
-        "x": 0,
-        "y": 0,
-      }
-    }
-    style={
-      {
-        "bottom": 0,
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
+  >
+    <RNSVGSvgView
+      align="xMidYMid"
+      bbHeight="0"
+      bbWidth="0"
+      focusable={false}
+      height={0}
+      meetOrSlice={0}
+      minX={0}
+      minY={0}
+      style={
+        {
+          "backgroundColor": "transparent",
+          "borderWidth": 0,
+        }
       }
-    }
-  />,
+      vbHeight={0}
+      vbWidth={0}
+      width={0}
+    >
+      <RNSVGGroup
+        fill={
+          {
+            "payload": 4278190080,
+            "type": 0,
+          }
+        }
+      >
+        <RNSVGDefs>
+          <RNSVGRadialGradient
+            cx="50%"
+            cy="50%"
+            fx="50%"
+            fy="50%"
+            gradient={
+              [
+                0,
+                -1,
+                0.125,
+                -167772161,
+                0.25,
+                -637534209,
+                0.75,
+                654311423,
+                0.875,
+                184549375,
+                1,
+                16777215,
+              ]
+            }
+            gradientTransform={null}
+            gradientUnits={0}
+            name="grad0"
+            rx="50%"
+            ry="50%"
+          />
+          <RNSVGRadialGradient
+            cx="50%"
+            cy="50%"
+            fx="50%"
+            fy="50%"
+            gradient={
+              [
+                0,
+                -216279,
+                0.0588,
+                -216279,
+                0.1765,
+                -167988439,
+                0.29410000000000003,
+                -637750487,
+                0.7646999999999999,
+                654095145,
+                0.8824,
+                184333097,
+                1,
+                16560937,
+              ]
+            }
+            gradientTransform={null}
+            gradientUnits={0}
+            name="grad1"
+            rx="50%"
+            ry="50%"
+          />
+          <RNSVGRadialGradient
+            cx="50%"
+            cy="50%"
+            fx="50%"
+            fy="50%"
+            gradient={
+              [
+                0,
+                -16719740,
+                0.4667,
+                -16719740,
+                0.5333,
+                -184491900,
+                0.6,
+                -654253948,
+                0.8667,
+                637591684,
+                0.9333,
+                167829636,
+                1,
+                57476,
+              ]
+            }
+            gradientTransform={null}
+            gradientUnits={0}
+            name="grad2"
+            rx="50%"
+            ry="50%"
+          />
+        </RNSVGDefs>
+        <RNSVGGroup
+          fill={
+            {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
+          opacity={0.25}
+        >
+          <RNSVGCircle
+            cx="10%"
+            cy="10%"
+            fill={
+              {
+                "brushRef": "grad0",
+                "type": 1,
+              }
+            }
+            propList={
+              [
+                "fill",
+              ]
+            }
+            r="224.73239436619718"
+          />
+          <RNSVGCircle
+            cx="95%"
+            cy="30%"
+            fill={
+              {
+                "brushRef": "grad1",
+                "type": 1,
+              }
+            }
+            propList={
+              [
+                "fill",
+              ]
+            }
+            r="238.7781690140845"
+          />
+          <RNSVGCircle
+            cx="-15%"
+            cy="100%"
+            fill={
+              {
+                "brushRef": "grad2",
+                "type": 1,
+              }
+            }
+            propList={
+              [
+                "fill",
+              ]
+            }
+            r="421.37323943661977"
+          />
+        </RNSVGGroup>
+      </RNSVGGroup>
+    </RNSVGSvgView>
+  </View>,
   <RCTScrollView
     contentContainerStyle={
       {
diff --git a/src/components/FioAddress/ConnectWallets.tsx b/src/components/FioAddress/ConnectWallets.tsx
index 4592d9ae0ce..7748d88e3a6 100644
--- a/src/components/FioAddress/ConnectWallets.tsx
+++ b/src/components/FioAddress/ConnectWallets.tsx
@@ -265,8 +265,6 @@ const getStyles = cacheStyles((theme: Theme) => ({
     color: theme.secondaryText
   },
   bottomSection: {
-    flex: 1,
-    backgroundColor: theme.backgroundGradientColors[1],
     padding: theme.rem(1)
   },
   btnDisabled: {
diff --git a/src/components/Main.tsx b/src/components/Main.tsx
index 423cf2f9d71..2194cd4f3d2 100644
--- a/src/components/Main.tsx
+++ b/src/components/Main.tsx
@@ -239,7 +239,7 @@ export const Main = () => {
       ...DefaultTheme,
       colors: {
         ...DefaultTheme.colors,
-        background: theme.backgroundGradientColors[0]
+        background: theme.background.color
       }
     }
   }, [theme])
diff --git a/src/components/buttons/MinimalButton.tsx b/src/components/buttons/MinimalButton.tsx
index 0c61b05a439..288350f63ab 100644
--- a/src/components/buttons/MinimalButton.tsx
+++ b/src/components/buttons/MinimalButton.tsx
@@ -95,7 +95,7 @@ const getStyles = cacheStyles((theme: Theme) => {
     },
     labelSelected: {
       ...labelCommon,
-      color: theme.backgroundGradientColors[0]
+      color: theme.background.color
     },
     labelDisabled: {
       ...labelCommon,
diff --git a/src/components/common/SceneWrapper.tsx b/src/components/common/SceneWrapper.tsx
index d775abaf44a..cb66647eb1f 100644
--- a/src/components/common/SceneWrapper.tsx
+++ b/src/components/common/SceneWrapper.tsx
@@ -3,16 +3,15 @@ import { useNavigation } from '@react-navigation/native'
 import * as React from 'react'
 import { useMemo } from 'react'
 import { Animated, ScrollView, StyleSheet, useWindowDimensions, View } from 'react-native'
-import LinearGradient from 'react-native-linear-gradient'
 import { EdgeInsets, useSafeAreaFrame, useSafeAreaInsets } from 'react-native-safe-area-context'
 
 import { useSelector } from '../../types/reactRedux'
 import { NavigationBase } from '../../types/routerTypes'
 import { maybeComponent } from '../hoc/maybeComponent'
-import { styled } from '../hoc/styled'
 import { NotificationView } from '../notification/NotificationView'
 import { useTheme } from '../services/ThemeContext'
 import { MAX_TAB_BAR_HEIGHT } from '../themed/MenuTabs'
+import { DotsBackground } from '../ui4/DotsBackground'
 import { KeyboardTracker } from './KeyboardTracker'
 
 export interface InsetStyles {
@@ -36,8 +35,8 @@ interface SceneWrapperProps {
   // to changes to the info.
   children: React.ReactNode | ((info: SceneWrapperInfo) => React.ReactNode)
 
-  // Settings for when using ScrollView
-  keyboardShouldPersistTaps?: 'always' | 'never' | 'handled'
+  // Adjusts the blurred dots background:
+  accentColor?: string
 
   // True if this scene should shrink to avoid the keyboard:
   avoidKeyboard?: boolean
@@ -51,6 +50,9 @@ interface SceneWrapperProps {
   // True if this scene has a bottom tab bar:
   hasTabs?: boolean
 
+  // Settings for when using ScrollView
+  keyboardShouldPersistTaps?: 'always' | 'never' | 'handled'
+
   // Padding to add inside the scene border:
   padding?: number
 
@@ -73,6 +75,7 @@ interface SceneWrapperProps {
  */
 export function SceneWrapper(props: SceneWrapperProps): JSX.Element {
   const {
+    accentColor,
     avoidKeyboard = false,
     children,
     hasHeader = true,
@@ -141,7 +144,7 @@ export function SceneWrapper(props: SceneWrapperProps): JSX.Element {
 
     return (
       <MaybeAnimatedView when={hasKeyboardAnimation} style={[styles.sceneContainer, layoutStyles, maybeInsetStyles, { maxHeight: keyboardAnimation, padding }]}>
-        <StyledLinearGradient colors={theme.backgroundGradientColors} end={theme.backgroundGradientEnd} start={theme.backgroundGradientStart} />
+        <DotsBackground accentColor={accentColor} />
         <MaybeScrollView
           when={scroll && !hasKeyboardAnimation}
           style={[layoutStyles, { padding }]}
@@ -186,14 +189,6 @@ const styles = StyleSheet.create({
   }
 })
 
-const StyledLinearGradient = styled(LinearGradient)({
-  position: 'absolute',
-  left: 0,
-  right: 0,
-  bottom: 0,
-  top: 0
-})
-
 const MaybeAnimatedView = maybeComponent(Animated.View)
 const MaybeScrollView = maybeComponent(ScrollView)
 const MaybeView = maybeComponent(View)
diff --git a/src/components/progress-indicators/LoadingSplashScreen.tsx b/src/components/progress-indicators/LoadingSplashScreen.tsx
index 3ad3e2ee0b3..4b89fb10cd1 100644
--- a/src/components/progress-indicators/LoadingSplashScreen.tsx
+++ b/src/components/progress-indicators/LoadingSplashScreen.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react'
-import { ActivityIndicator } from 'react-native'
-import LinearGradient from 'react-native-linear-gradient'
+import { ActivityIndicator, View } from 'react-native'
 
 import { styled } from '../hoc/styled'
 import { useTheme } from '../services/ThemeContext'
+import { DotsBackground } from '../ui4/DotsBackground'
 
 /**
  * This is not a scene component. It's purpose is to be used outside of the
@@ -14,13 +14,14 @@ import { useTheme } from '../services/ThemeContext'
 export const LoadingSplashScreen = () => {
   const theme = useTheme()
   return (
-    <StyledLinearGradient colors={theme.backgroundGradientColors} end={theme.backgroundGradientEnd} start={theme.backgroundGradientStart}>
+    <ViewContainer>
+      <DotsBackground />
       <ActivityIndicator color={theme.loadingIcon} size="large" />
-    </StyledLinearGradient>
+    </ViewContainer>
   )
 }
 
-const StyledLinearGradient = styled(LinearGradient)({
+const ViewContainer = styled(View)({
   flex: 1,
   alignItems: 'center',
   justifyContent: 'center'
diff --git a/src/components/scenes/CreateWalletSelectFiatScene.tsx b/src/components/scenes/CreateWalletSelectFiatScene.tsx
index 35cc2f3023d..a6a7a0a3c24 100644
--- a/src/components/scenes/CreateWalletSelectFiatScene.tsx
+++ b/src/components/scenes/CreateWalletSelectFiatScene.tsx
@@ -239,8 +239,7 @@ const getStyles = cacheStyles((theme: Theme) => ({
     width: theme.rem(2),
     height: theme.rem(2),
     borderRadius: theme.rem(1),
-    marginLeft: theme.rem(0.25),
-    backgroundColor: theme.backgroundGradientColors[1]
+    marginLeft: theme.rem(0.25)
   },
   instructionalText: {
     fontSize: theme.rem(0.75),
diff --git a/src/components/scenes/DefaultFiatSettingScene.tsx b/src/components/scenes/DefaultFiatSettingScene.tsx
index 0fec4dcd519..6eae537fd50 100644
--- a/src/components/scenes/DefaultFiatSettingScene.tsx
+++ b/src/components/scenes/DefaultFiatSettingScene.tsx
@@ -146,8 +146,7 @@ const getStyles = cacheStyles((theme: Theme) => ({
     width: theme.rem(2),
     height: theme.rem(2),
     borderRadius: theme.rem(1),
-    marginLeft: theme.rem(0.25),
-    backgroundColor: theme.backgroundGradientColors[1]
+    marginLeft: theme.rem(0.25)
   }
 }))
 
diff --git a/src/components/scenes/LoginScene.tsx b/src/components/scenes/LoginScene.tsx
index 209d2d8aa0d..ba57638b980 100644
--- a/src/components/scenes/LoginScene.tsx
+++ b/src/components/scenes/LoginScene.tsx
@@ -26,6 +26,7 @@ import { withServices } from '../hoc/withServices'
 import { showHelpModal } from '../modals/HelpModal'
 import { UpdateModal } from '../modals/UpdateModal'
 import { Airship, showError } from '../services/AirshipInstance'
+import { DotsBackground } from '../ui4/DotsBackground'
 import { LoadingScene } from './LoadingScene'
 
 // Sneak the BlurView over to the login UI:
@@ -183,6 +184,7 @@ export function LoginSceneComponent(props: Props) {
     <LoadingScene />
   ) : (
     <View style={styles.container} testID="edge: login-scene">
+      <DotsBackground />
       <LoginScreen
         key={String(counter)}
         accountOptions={accountOptions}
diff --git a/src/components/scenes/MigrateWalletCalculateFeeScene.tsx b/src/components/scenes/MigrateWalletCalculateFeeScene.tsx
index 1158f0e5dc8..038d741bfa2 100644
--- a/src/components/scenes/MigrateWalletCalculateFeeScene.tsx
+++ b/src/components/scenes/MigrateWalletCalculateFeeScene.tsx
@@ -243,13 +243,6 @@ const getStyles = cacheStyles((theme: Theme) => ({
   content: {
     flex: 1
   },
-  cryptoTypeLogo: {
-    width: theme.rem(2),
-    height: theme.rem(2),
-    borderRadius: theme.rem(1),
-    marginLeft: theme.rem(0.25),
-    backgroundColor: theme.backgroundGradientColors[1]
-  },
   instructionalText: {
     color: theme.primaryText,
     fontSize: theme.rem(0.75),
diff --git a/src/components/scenes/TransactionListScene.tsx b/src/components/scenes/TransactionListScene.tsx
index b6bc2fc24c1..c4b52d1e4f4 100644
--- a/src/components/scenes/TransactionListScene.tsx
+++ b/src/components/scenes/TransactionListScene.tsx
@@ -57,7 +57,8 @@ function TransactionListComponent(props: Props) {
   const [searchText, setSearchText] = React.useState('')
   const [assetStatuses, setAssetStatuses] = React.useState<AssetStatus[]>([])
   const [iconColor, setIconColor] = React.useState<string>()
-  const backgroundGradientColor = iconColor == null ? '#00000000' : `${iconColor}44`
+  const transparentBackground = `${theme.background.color}00`
+  const backgroundGradientColor = iconColor == null ? transparentBackground : `${iconColor}44`
 
   // Selectors:
   const exchangeDenom = useSelector(state => getExchangeDenomination(state, pluginId, currencyCode))
@@ -248,10 +249,15 @@ function TransactionListComponent(props: Props) {
   })
 
   return (
-    <SceneWrapper hasNotifications hasTabs>
+    <SceneWrapper accentColor={iconColor} hasNotifications hasTabs>
       {({ insetStyles }) => (
         <>
-          <LinearGradient colors={[backgroundGradientColor, '#00000000']} start={{ x: 0, y: 0 }} end={{ x: 0, y: 1 }} style={StyleSheet.absoluteFill} />
+          <LinearGradient
+            colors={[backgroundGradientColor, transparentBackground]}
+            start={{ x: 0, y: 0 }}
+            end={{ x: 0, y: 1 }}
+            style={StyleSheet.absoluteFill}
+          />
           {SHOW_FLIP_INPUT_TESTER ? (
             <ExchangedFlipInputTester />
           ) : (
diff --git a/src/components/ui4/DotsBackground.tsx b/src/components/ui4/DotsBackground.tsx
new file mode 100644
index 00000000000..09d7fa23c4b
--- /dev/null
+++ b/src/components/ui4/DotsBackground.tsx
@@ -0,0 +1,95 @@
+import * as React from 'react'
+import { LayoutChangeEvent, StyleSheet, View } from 'react-native'
+import { Circle, Defs, G, RadialGradient, Stop, Svg } from 'react-native-svg'
+
+import { useHandler } from '../../hooks/useHandler'
+import { ThemeDot } from '../../types/Theme'
+import { useTheme } from '../services/ThemeContext'
+
+interface Props {
+  accentColor?: string
+}
+
+export function DotsBackground(props: Props): JSX.Element {
+  const { accentColor } = props
+  const theme = useTheme()
+  const { blurRadius, color, dotOpacity, dots } = theme.background
+
+  const accentDots: ThemeDot[] = []
+  for (const dot of dots) {
+    if (accentColor == null || dot.accent === 'keep') {
+      accentDots.push(dot)
+    } else if (dot.accent == null) {
+      accentDots.push({ ...dot, color: accentColor })
+    }
+  }
+
+  const [{ width, height }, setLayout] = React.useState(cachedLayout)
+  const handleLayout = useHandler((event: LayoutChangeEvent) => {
+    cachedLayout = event.nativeEvent.layout
+    setLayout(event.nativeEvent.layout)
+  })
+
+  /**
+   * We are simulating the blur using a radial gradient,
+   * since it's cheaper and looks better.
+   *
+   * To do this, we slice a ring off the outside of each dot and
+   * replace it with the gradient. The sliced-off ring has a width of blurR,
+   * and the gradient ring has a width of 2 * blurR.
+   * This means the circle radius will expand by blurR.
+   *
+   * If the circle is smaller than blurR,
+   * then we can't slice off a big enough ring,
+   * so we reduce the opacity towards 0 to compensate.
+   */
+  function renderGradient(circle: ThemeDot, key: number): JSX.Element {
+    const innerR = (circle.r - blurRadius) / blurRadius
+    const totalR = 2 + Math.max(0, innerR)
+    const dimming = 1 + Math.min(0, innerR)
+
+    const stops = samples.map(([offset, opacity], key) => (
+      <Stop key={`stop${key}`} offset={percent((offset + totalR - 2) / totalR)} stopColor={circle.color} stopOpacity={opacity * dimming * dimming} />
+    ))
+    if (innerR > 0) {
+      stops.unshift(<Stop offset="0%" stopColor={circle.color} stopOpacity="1" />)
+    }
+
+    return (
+      <RadialGradient id={`grad${key}`} key={`grad${key}`} gradientUnits="objectBoundingBox" cx="50%" cy="50%" fx="50%" fy="50%" rx="50%" ry="50%">
+        {stops}
+      </RadialGradient>
+    )
+  }
+
+  function renderCircle(circle: ThemeDot, key: number): JSX.Element {
+    const innerR = circle.r - blurRadius
+    const totalR = 2 * blurRadius + Math.max(0, innerR)
+
+    return <Circle key={`dot${key}`} cx={circle.cx} cy={circle.cy} r={totalR} fill={`url(#grad${key})`} />
+  }
+
+  return (
+    <View style={[StyleSheet.absoluteFill, { backgroundColor: color }]} onLayout={handleLayout}>
+      <Svg width={width} height={height} viewBox={`0 0 ${width} ${height}`}>
+        <Defs>{accentDots.map(renderGradient)}</Defs>
+        <G opacity={dotOpacity}>{accentDots.map(renderCircle)}</G>
+      </Svg>
+    </View>
+  )
+}
+
+let cachedLayout = { width: 0, height: 0 }
+
+function percent(ratio: number): string {
+  return (100 * ratio).toFixed(2) + '%'
+}
+
+const samples = [
+  [0, 1],
+  [0.25, 0.96],
+  [0.5, 0.85],
+  [1.5, 0.15],
+  [1.75, 0.04],
+  [2, 0]
+]
diff --git a/src/theme/variables/edgeDark.ts b/src/theme/variables/edgeDark.ts
index d1dbeb84e01..eabb5044607 100644
--- a/src/theme/variables/edgeDark.ts
+++ b/src/theme/variables/edgeDark.ts
@@ -82,6 +82,11 @@ const palette = {
   learnMiddle: 'rgba(0, 81, 92, .44)',
   learnRight: 'rgba(0, 245, 155, .44)',
 
+  // Background:
+  backgroundBlack: '#1a1a1a',
+  backgroundGreen: '#00e084',
+  backgroundYellow: '#fcb329',
+
   // Button
   graySecondary: 'hsla(0, 0%, 100%, 0.20)',
 
@@ -127,10 +132,36 @@ export const edgeDark: Theme = {
   loadingIcon: palette.edgeMint,
 
   // Background
-  // backgroundGradientColors: [palette.navyAqua, palette.navyAquaDarker], // For vertical gradient
-  backgroundGradientColors: [palette.darkestNavy, palette.darkAqua],
-  backgroundGradientStart: { x: 0, y: 0 },
-  backgroundGradientEnd: { x: 1, y: 0 },
+  background: {
+    blurRadius: scale(80),
+    color: palette.backgroundBlack,
+    dotOpacity: 0.25,
+    dots: [
+      {
+        // Top-left:
+        accent: 'keep',
+        color: palette.white,
+        cx: '10%',
+        cy: '10%',
+        r: scale(80)
+      },
+      {
+        // Mid-right:
+        color: palette.backgroundYellow,
+        cx: '95%',
+        cy: '30%',
+        r: scale(90)
+      },
+      {
+        // Bottom-left:
+        accent: 'drop',
+        color: palette.backgroundGreen,
+        cx: '-15%',
+        cy: '100%',
+        r: scale(220)
+      }
+    ]
+  },
 
   // Camera Overlay
   cameraOverlayColor: palette.black,
diff --git a/src/theme/variables/edgeLight.ts b/src/theme/variables/edgeLight.ts
index 1483d44c949..f5ef80b4ef6 100644
--- a/src/theme/variables/edgeLight.ts
+++ b/src/theme/variables/edgeLight.ts
@@ -77,6 +77,10 @@ const palette = {
   learnMiddle: 'rgba(0, 81, 92, .44)',
   learnRight: 'rgba(0, 245, 155, .44)',
 
+  // Background
+  backgroundGreen: '#15cb7f',
+  backgroundPurple: '#7f15cb',
+
   // Button
   graySecondary: 'hsla(0, 0%, 100%, 0.20)',
 
@@ -122,9 +126,15 @@ export const edgeLight: Theme = {
   loadingIcon: palette.edgeBlue,
 
   // Background
-  backgroundGradientColors: [palette.lightestGray, palette.lightestGray],
-  backgroundGradientStart: { x: 0, y: 0 },
-  backgroundGradientEnd: { x: 0, y: 1 },
+  background: {
+    blurRadius: scale(80),
+    color: palette.lightestGray,
+    dotOpacity: 0.3,
+    dots: [
+      { color: palette.backgroundGreen, cx: '75%', cy: '25%', r: scale(175) },
+      { color: palette.backgroundPurple, cx: '25%', cy: '75%', r: scale(150), accent: 'keep' }
+    ]
+  },
 
   // Camera Overlay
   cameraOverlayColor: palette.gray,
diff --git a/src/theme/variables/testDark.ts b/src/theme/variables/testDark.ts
index 9806bdb4d12..11542a43458 100644
--- a/src/theme/variables/testDark.ts
+++ b/src/theme/variables/testDark.ts
@@ -82,6 +82,11 @@ const palette = {
   learnMiddle: 'rgba(0, 81, 92, .44)',
   learnRight: 'rgba(0, 245, 155, .44)',
 
+  // Background:
+  backgroundBlack: '#1a1a1a',
+  backgroundGreen: '#00e084',
+  backgroundYellow: '#fcb329',
+
   // Button
   graySecondary: 'hsla(0, 0%, 100%, 0.20)',
 
@@ -127,10 +132,36 @@ export const testDark: Theme = {
   loadingIcon: palette.edgeMint,
 
   // Background
-  // backgroundGradientColors: [palette.navyAqua, palette.navyAquaDarker], // For vertical gradient
-  backgroundGradientColors: [palette.darkestNavy, palette.darkAqua],
-  backgroundGradientStart: { x: 0, y: 0 },
-  backgroundGradientEnd: { x: 1, y: 0 },
+  background: {
+    blurRadius: scale(80),
+    color: palette.backgroundBlack,
+    dotOpacity: 0.25,
+    dots: [
+      {
+        // Top-left:
+        accent: 'keep',
+        color: palette.white,
+        cx: '10%',
+        cy: '10%',
+        r: scale(80)
+      },
+      {
+        // Mid-right:
+        color: palette.backgroundYellow,
+        cx: '95%',
+        cy: '30%',
+        r: scale(90)
+      },
+      {
+        // Bottom-left:
+        accent: 'drop',
+        color: palette.backgroundGreen,
+        cx: '-15%',
+        cy: '100%',
+        r: scale(220)
+      }
+    ]
+  },
 
   // Camera Overlay
   cameraOverlayColor: palette.black,
diff --git a/src/theme/variables/testLight.ts b/src/theme/variables/testLight.ts
index acce394bff9..904eb1656cb 100644
--- a/src/theme/variables/testLight.ts
+++ b/src/theme/variables/testLight.ts
@@ -77,6 +77,10 @@ const palette = {
   learnMiddle: 'rgba(0, 81, 92, .44)',
   learnRight: 'rgba(0, 245, 155, .44)',
 
+  // Background
+  backgroundGreen: '#15cb7f',
+  backgroundPurple: '#7f15cb',
+
   // Button
   graySecondary: 'hsla(0, 0%, 100%, 0.20)',
 
@@ -122,9 +126,15 @@ export const testLight: Theme = {
   loadingIcon: palette.edgeBlue,
 
   // Background
-  backgroundGradientColors: [palette.lightestGray, palette.lightestGray],
-  backgroundGradientStart: { x: 0, y: 0 },
-  backgroundGradientEnd: { x: 0, y: 1 },
+  background: {
+    blurRadius: scale(80),
+    color: palette.lightestGray,
+    dotOpacity: 0.3,
+    dots: [
+      { color: palette.backgroundGreen, cx: '75%', cy: '25%', r: scale(175) },
+      { color: palette.backgroundPurple, cx: '25%', cy: '75%', r: scale(150) }
+    ]
+  },
 
   // Camera Overlay
   cameraOverlayColor: palette.gray,
diff --git a/src/types/Theme.ts b/src/types/Theme.ts
index 1fb844dfc2f..5afc844cfb7 100644
--- a/src/types/Theme.ts
+++ b/src/types/Theme.ts
@@ -2,6 +2,17 @@ import { asNumber, asObject } from 'cleaners'
 
 export type ImageProp = { uri: string } | number
 
+export interface ThemeDot {
+  // The accent color will override the dot color when it is present.
+  // To change this behavior, use 'keep' to preserve the dot color or
+  // 'drop' to remove the dot completely:
+  accent?: 'keep' | 'drop'
+  color: string
+  cx: number | string
+  cy: number | string
+  r: number
+}
+
 interface ThemeGradientParams {
   colors: string[]
   start: GradientCoords
@@ -85,9 +96,12 @@ export interface Theme {
   loadingIcon: string
 
   // Background
-  backgroundGradientColors: string[]
-  backgroundGradientStart: { x: number; y: number }
-  backgroundGradientEnd: { x: number; y: number }
+  background: {
+    blurRadius: number
+    color: string // Never include an alpha here
+    dotOpacity: number
+    dots: ThemeDot[]
+  }
 
   // Camera Overlay
   cameraOverlayColor: string