Fix onboarding UX and improve extension performance

packages/app-extension/src/app/Router.tsx

@@ -22,6 +22,7 @@ import {
 } from "@coral-xyz/tamagui";
 import { useRecoilValue } from "recoil";
 
+import { PopupLoadingSkeleton } from "../components/common/LoadingSkeleton";
 import { Unlocked } from "../components/Unlocked";
 import { refreshFeatureGates } from "../gates/FEATURES";
 
@@ -156,9 +157,9 @@ function FullApp() {
     }
   }, [allUsers, hasRedirected]);
 
-  // Don't render anything while we're checking for users or redirecting
+  // Show loading skeleton while we're checking for users or redirecting
   if (allUsers === null || allUsers.length === 0) {
-    return null;
+    return <PopupLoadingSkeleton />;
   }
 
   return <Unlocked />;

packages/app-extension/src/components/Onboarding/pages/CreateOrImportWallet.tsx

@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { useTranslation } from "@coral-xyz/i18n";
 import {
   BpPrimaryButton,
@@ -12,6 +13,8 @@ export const CreateOrImportWallet = ({
   onNext: (data: any) => void;
 }) => {
   const { t } = useTranslation();
+  const [showAdvanced, setShowAdvanced] = useState(false);
+
   return (
     <YStack gap={40}>
       <div style={{ textAlign: "center" }}>
@@ -43,6 +46,25 @@ export const CreateOrImportWallet = ({
           label={t("import_wallet")}
           onPress={() => onNext({ action: "import" })}
         />
+
+        {/* Advanced section */}
+        <YStack gap={12} mt={8}>
+          <StyledText
+            color="$baseTextMedEmphasis"
+            textAlign="center"
+            cursor="pointer"
+            onPress={() => setShowAdvanced(!showAdvanced)}
+            hoverStyle={{ opacity: 0.8 }}
+          >
+            {showAdvanced ? "▲" : "▼"} {t("advanced")}
+          </StyledText>
+          {showAdvanced ? <BpSecondaryButton
+            label={t("with_secret_key.import")}
+            onPress={() =>
+                onNext({ action: "import", keyringType: "mnemonic" })
+              }
+            /> : null}
+        </YStack>
       </YStack>
     </YStack>
   );

packages/app-extension/src/components/Onboarding/pages/OnboardAccount.tsx

@@ -139,9 +139,7 @@ export const OnboardAccount = ({
     ...(keyringType === "mnemonic" || keyringType === "ledger"
       ? // X1 blockchain is auto-selected, skip blockchain selector
         [
-          ...(keyringType === "ledger" ||
-          action === "import" ||
-          action === "create"
+          ...(keyringType === "ledger" || action === "import"
             ? [
               <ImportWallets
                 allowMultiple

packages/app-extension/src/gates/FEATURES.ts

@@ -71,11 +71,10 @@ export const refreshFeatureGates = async (background: ChannelAppUiClient) => {
 };
 
 async function fetchAndUpdateFeatureGates(background: ChannelAppUiClient) {
+  // X1 Wallet: Disable Backpack API feature gates to avoid 404 errors and improve load times
+  // All features are enabled by default via buildFullFeatureGatesMap with empty gates
   try {
-    const res = await fetch(`${FEATURE_GATE_URL}/gates`);
-    const json = await res.json();
-    if (!json.gates) throw new Error(json.message);
-    const gates = buildFullFeatureGatesMap(json.gates);
+    const gates = buildFullFeatureGatesMap({});
 
     // Cache the gates for future use
     cacheFeatureGates(gates);
@@ -85,8 +84,6 @@ async function fetchAndUpdateFeatureGates(background: ChannelAppUiClient) {
       params: [gates],
     });
   } catch (e) {
-    console.warn(
-      `Error while refreshing feature gates, falling back to defaults`
-    );
+    console.warn(`Error while setting feature gates, falling back to defaults`);
   }
 }

packages/app-extension/src/index.tsx

@@ -1,5 +1,17 @@
 const startTime = Date.now();
 
+// Suppress React Native BackHandler warning in web environment
+const originalConsoleWarn = console.warn;
+console.warn = (...args) => {
+  if (
+    typeof args[0] === "string" &&
+    args[0].includes("BackHandler is not supported on web")
+  ) {
+    return; // Suppress this specific warning
+  }
+  originalConsoleWarn.apply(console, args);
+};
+
 import { lazy, Suspense } from "react";
 import { createRoot } from "react-dom/client";
 import { BACKPACK_FEATURE_POP_MODE, openPopupWindow } from "@coral-xyz/common";

packages/app-extension/src/refactor/screens/Unlocked/Settings/WalletAddBackpackRecoveryPhraseScreen.tsx

@@ -29,7 +29,7 @@ function Container({
     <ImportMnemonic
       blockchain={blockchain}
       ledger={false}
-      inputMnemonic={false}
+      inputMnemonic
     />
   );
 }

packages/recoil/src/atoms/secure-client/userClientAtoms.ts

@@ -120,12 +120,17 @@ export const rawSecureUserAtom = atom<
       if (!isMobile) {
         const localCopyJSON = window.localStorage.getItem("secureUser");
         if (localCopyJSON) {
-          const localCopy = JSON.parse(localCopyJSON);
-          // remove local copy after reading so we wont get stuck in stale data.
-          window.localStorage.removeItem("secureUser");
-
-          setSelf(localCopy);
-          updateUser().catch((e) => {});
+          try {
+            const localCopy = JSON.parse(localCopyJSON);
+            // Don't remove local copy immediately - keep it for fast subsequent loads
+            // It will be overwritten with fresh data when updateUser() completes
+            setSelf(localCopy);
+            updateUser().catch((e) => {});
+          } catch (e) {
+            // If cached data is corrupted, remove it and fetch fresh
+            window.localStorage.removeItem("secureUser");
+            fetchInitialValue();
+          }
         } else {
           fetchInitialValue();
         }