updates app link to ready wallet app and uses hook to open app (#196)

Co-authored-by: micbakos <michael.b@starkware.co>

Author: ZackAttax

frontend/app.config.ts

@@ -1,5 +1,6 @@
 import "ts-node/register";
 import { ExpoConfig } from "expo/config";
+import { WalletPresets } from "./constants/WalletPresets";
 
 const config: ExpoConfig = {
   name: "POW!",
@@ -18,6 +19,7 @@ const config: ExpoConfig = {
         "argentx",
         "argentmobile",
         "ready",
+        "ready-wallet",
         "braavos",
         "braavos-btc-straknet-wallet",
         "wc",
@@ -65,6 +67,12 @@ const config: ExpoConfig = {
     "expo-web-browser",
     "expo-audio",
     "./plugins/sentry.ts",
+    [
+      "./plugins/android-queries.ts",
+      {
+        packageNames: Object.values(WalletPresets).map((p) => p.androidPackage),
+      },
+    ],
   ],
   experiments: {
     typedRoutes: true,

frontend/app/components/claim-reward/SectionTitle.tsx

@@ -51,7 +51,6 @@ const styles = StyleSheet.create({
   title: {
     color: "#fff7ff",
     fontSize: 24,
-    fontWeight: "700",
     position: "absolute",
     left: 8,
     fontFamily: "Pixels",

frontend/app/hooks/useOpenApp.ts

@@ -0,0 +1,69 @@
+// useOpenApp.ts
+import { Linking, Platform } from "react-native";
+import { AppTarget } from "@/constants/WalletPresets";
+
+async function tryOpenUrls(urls: string[]) {
+  for (const url of urls) {
+    try {
+      const can = await Linking.canOpenURL(url);
+      if (can) {
+        await Linking.openURL(url);
+        return true;
+      } else {
+        console.warn("Cannot open url", url);
+      }
+    } catch (error) {
+      console.error(error);
+      // keep trying fallbacks
+    }
+  }
+  return false;
+}
+
+async function openStore(iosId?: string, androidPkg?: string) {
+  if (Platform.OS === "ios" && iosId) {
+    return Linking.openURL(`itms-apps://itunes.apple.com/app/id${iosId}`);
+  }
+  if (Platform.OS === "android" && androidPkg) {
+    return Linking.openURL(`market://details?id=${androidPkg}`);
+  }
+  return false;
+}
+
+/** Hook */
+export function useOpenApp() {
+  const openApp = async (target: AppTarget) => {
+    const {
+      iosSchemes,
+      androidSchemes,
+      universalLinks,
+      iosAppStoreId,
+      androidPackage,
+    } = target;
+
+    // 1) Try app schemes/intent first
+    const openedApp = await tryOpenUrls(
+      Platform.OS == "ios" ? iosSchemes : androidSchemes,
+    );
+
+    if (openedApp) return true;
+
+    // 2) If not installed, try opening the app store first
+    try {
+      const storeRes = await openStore(iosAppStoreId, androidPackage);
+      if (storeRes !== false) return true;
+    } catch {
+      // If store open fails, continue to universal links
+    }
+
+    // 3) As a final fallback, try universal links (web)
+    if (universalLinks.length > 0) {
+      const openedWeb = await tryOpenUrls(universalLinks);
+      if (openedWeb) return true;
+    }
+
+    return false;
+  };
+
+  return { openApp };
+}

frontend/app/pages/settings/ClaimReward.tsx

@@ -25,6 +25,8 @@ import { WalletButtonRow } from "../../components/claim-reward/WalletButtonRow";
 import { LoadingModal } from "../../components/claim-reward/LoadingModal";
 import { useEventManager } from "../../stores/useEventManager";
 import { InsufficientFundsModal } from "../../components/InsufficientFundsModal";
+import { useOpenApp } from "../../hooks/useOpenApp";
+import { WalletPresets } from "@/constants/WalletPresets";
 
 // Decode common Starknet u256/BigNumberish shapes using starknet helpers
 function decodeU256ToBigInt(raw: any): bigint | null {
@@ -69,6 +71,7 @@ const ClaimRewardSectionComponent: React.FC<ClaimRewardProps> = ({
   const { width } = useCachedWindowDimensions();
   const { notify } = useEventManager();
   const [showInsufficientFunds, setShowInsufficientFunds] = useState(false);
+  const { openApp } = useOpenApp();
 
   const handleBack = useCallback(() => {
     if (onBack) onBack();
@@ -188,62 +191,6 @@ const ClaimRewardSectionComponent: React.FC<ClaimRewardProps> = ({
     })();
   }, []);
 
-  const openReadyWallet = useCallback(async () => {
-    const scheme = "ready://open";
-    try {
-      await Linking.openURL(scheme);
-      return;
-    } catch (_e) {
-      if (__DEV__) {
-        console.debug("Failed to open READY wallet scheme");
-      }
-    }
-    try {
-      if (Platform.OS === "ios") {
-        await Linking.openURL(
-          "https://apps.apple.com/us/app/ready-earn-on-bitcoin-usdc/id1358741926",
-        );
-      } else {
-        const pkg = "im.argent.contractwalletclient";
-        const market = `market://details?id=${pkg}`;
-        const web = `https://play.google.com/store/apps/details?id=${pkg}`;
-        await Linking.openURL(market).catch(() => Linking.openURL(web));
-      }
-    } catch (_e) {
-      if (__DEV__) {
-        console.debug("Failed to open READY install link");
-      }
-    }
-  }, []);
-
-  const openBraavosWallet = useCallback(async () => {
-    const scheme = "braavos://open";
-    try {
-      await Linking.openURL(scheme);
-      return;
-    } catch (_e) {
-      if (__DEV__) {
-        console.debug("Failed to open BRAAVOS wallet scheme");
-      }
-    }
-    try {
-      if (Platform.OS === "ios") {
-        await Linking.openURL(
-          "https://apps.apple.com/us/app/braavos-wallet/id1636013523",
-        );
-      } else {
-        const pkg = "app.braavos.wallet";
-        const market = `market://details?id=${pkg}`;
-        const web = `https://play.google.com/store/apps/details?id=${pkg}`;
-        await Linking.openURL(market).catch(() => Linking.openURL(web));
-      }
-    } catch (_e) {
-      if (__DEV__) {
-        console.debug("Failed to open BRAAVOS install link");
-      }
-    }
-  }, []);
-
   const isValidAddress = /^0x[a-fA-F0-9]{63,64}$/.test(
     (debouncedInput || "").trim(),
   );
@@ -313,8 +260,8 @@ const ClaimRewardSectionComponent: React.FC<ClaimRewardProps> = ({
         <View style={styles.section}>
           <View style={styles.card}>
             <WalletButtonRow
-              onPressReady={openReadyWallet}
-              onPressBraavos={openBraavosWallet}
+              onPressReady={() => openApp(WalletPresets.readyWallet)}
+              onPressBraavos={() => openApp(WalletPresets.braavos)}
             />
             <Text style={styles.hintInline}>
               Open a wallet above and paste an address to receive your STRK.

frontend/constants/WalletPresets.ts

@@ -0,0 +1,33 @@
+export type AppTarget = {
+  iosSchemes: string[]; // e.g., ['braavos://']
+  androidSchemes: string[]; // e.g., ['braavos://']
+  universalLinks: string[]; // e.g., ['https://braavos.app/']
+  iosAppStoreId: string; // numbers only, e.g., '1636013523'
+  androidPackage: string; // e.g., 'app.braavos.wallet'
+};
+
+export const WalletPresets = {
+  braavos: {
+    iosSchemes: ["braavos://"],
+    androidSchemes: ["braavos://"],
+    universalLinks: ["https://braavos.app/"],
+    iosAppStoreId: "1636013523",
+    androidPackage: "app.braavos.wallet",
+  } satisfies AppTarget,
+
+  ready: {
+    iosSchemes: ["ready://", "argent://"],
+    androidSchemes: ["ready://", "argent://"],
+    universalLinks: ["https://www.ready.co/", "https://ready.co/"],
+    iosAppStoreId: "1358741926",
+    androidPackage: "im.argent.contractwalletclient",
+  } satisfies AppTarget,
+
+  readyWallet: {
+    iosSchemes: ["ready-wallet://"],
+    androidSchemes: ["ready-wallet://"],
+    universalLinks: ["https://www.ready.co/download-ready-wallet"],
+    iosAppStoreId: "6744935604",
+    androidPackage: "com.ready.wallet",
+  } satisfies AppTarget,
+};

frontend/plugins/android-queries.ts

@@ -0,0 +1,54 @@
+import configPlugins from "@expo/config-plugins";
+import {
+  AndroidManifest,
+  ConfigPlugin,
+  ExportedConfigWithProps,
+} from "expo/config-plugins";
+const { withAndroidManifest } = configPlugins;
+
+// Exported type from expo config;
+type PackageQuery = {
+  $: {
+    "android:name": string;
+  };
+};
+
+/**
+ * Adds the packageNames as queries for deep links to wallets to work
+ * https://developer.android.com/training/package-visibility/declaring#package-name
+ *
+ * @param config
+ * @param packageNames
+ */
+function setQueries(
+  config: ExportedConfigWithProps<AndroidManifest>,
+  packageNames: string[],
+): ExportedConfigWithProps<AndroidManifest> {
+  const packageQueries: PackageQuery[] = [];
+
+  for (const packageName of packageNames) {
+    packageQueries.push({
+      $: {
+        "android:name": packageName,
+      },
+    });
+  }
+
+  config.modResults.manifest.queries.push({
+    package: packageQueries,
+  });
+
+  return config;
+}
+
+type QueriesProps = {
+  packageNames: string[];
+};
+
+const withAndroidQueries: ConfigPlugin<QueriesProps> = (config, options) => {
+  return withAndroidManifest(config, async (config) => {
+    return setQueries(config, options.packageNames);
+  });
+};
+
+export default withAndroidQueries;