feat: add mobile universal link button (#186)

* feat: add mobile universal link button

* chore: move the button to white listed route

* fix: remove https from url param

* chore: add url input

* chore: improve link handling and wording

example/src/App.tsx

@@ -24,6 +24,7 @@ import { GetAddresses } from './components/bitcoin/GetAddresses.tsx';
 import { SendBtc } from './components/bitcoin/SendBtc';
 import EtchRunes from './components/EtchRunes';
 import MintRunes from './components/MintRunes';
+import { MobileUniversalLink } from './components/mobile/universalLink.tsx';
 import { NetworkSelector } from './components/NetworkSelector';
 import { SendSip10 } from './components/stacks/SendSip10';
 import { SendStx } from './components/stacks/SendStx';
@@ -49,6 +50,8 @@ const ConnectionContext = createContext<{
 
 const useConnectionContext = () => useContext(ConnectionContext);
 
+const whiteListedPaths = ['/mobile-universal-link'];
+
 function AppWithProviders({ children }: React.PropsWithChildren<{}>) {
   const queryClient = useQueryClient();
   const [network, setNetwork] = useLocalStorage<BitcoinNetworkType>(
@@ -60,6 +63,8 @@ function AppWithProviders({ children }: React.PropsWithChildren<{}>) {
 
   const isConnected = btcAddressInfo.length + stxAddressInfo.length > 0;
 
+  const isWhiteListedPath = whiteListedPaths.includes(window.location.pathname);
+
   const clearAppData = useCallback(() => {
     setBtcAddressInfo([]);
     setStxAddressInfo([]);
@@ -138,7 +143,7 @@ function AppWithProviders({ children }: React.PropsWithChildren<{}>) {
     [network, btcAddressInfo, stxAddressInfo, onDisconnect],
   );
 
-  if (!isConnected) {
+  if (!isConnected && !isWhiteListedPath) {
     return (
       <Container>
         <Header>
@@ -244,6 +249,7 @@ const router = createBrowserRouter(
       <Route index element={<WalletMethods />} />
       <Route path="bitcoin-methods" element={<BitcoinMethods />} />
       <Route path="stacks-methods" element={<StacksMethods />} />
+      <Route path="mobile-universal-link" element={<MobileUniversalLink />} />
       <Route path="*" element={<NoMatch />} />
     </Route>,
   ),

example/src/components/mobile/universalLink.tsx

@@ -0,0 +1,31 @@
+import { useState } from 'react';
+import { Button, Card, Input } from '../../App.styles';
+
+export function MobileUniversalLink() {
+  const [url, setUrl] = useState('wallet.xverse.app/explore');
+
+  const link = `https://connect.xverse.app/browser?url=${url}`;
+
+  const handleClick = () => {
+    window.open(link, '_blank', 'noopener,noreferrer');
+  };
+
+  return (
+    <Card>
+      <h3>Mobile App Universal Link</h3>
+      <div>
+        If Xverse app is installed, it will open the browser withing the app using the url param
+      </div>
+      <div>If Xverse app is not installed, it will prompt the user to install the app</div>
+      <div style={{ marginTop: 15, marginBottom: 15 }}>
+        <div>Url param</div>
+        <Input type="text" value={url} onChange={(e) => setUrl(e.target.value)} />
+      </div>
+      <div style={{ marginTop: 15, marginBottom: 15 }}>
+        <div>Full link</div>
+        <div>{link}</div>
+      </div>
+      <Button onClick={handleClick}>Use Universal Link</Button>
+    </Card>
+  );
+}

example/src/layouts/CollapseDesktop.tsx

@@ -40,6 +40,11 @@ export function CollapseDesktop({ children }: React.PropsWithChildren<{}>) {
             label: 'Stacks Methods',
             href: '/stacks-methods',
           },
+          {
+            icon: 'home',
+            label: 'Mobile Universal Link',
+            href: '/mobile-universal-link',
+          },
         ].map(({ label, href }) => (
           <NavLink key={href} href={href} label={label} />
         ))}