feat: link

src/App.tsx

@@ -5,6 +5,7 @@ import { ZanoCompanionProvider } from "./companion";
 import { Connector } from "./Connector";
 import { CreateAlias } from "./CreateAlias";
 import { Credentials } from "./Credentials";
+import { DeepLinkTransfer } from "./DeepLinkTransfer";
 import { DeepLinkTransferLegacy } from "./DeepLinkTransferLegacy";
 import { IonicSwap } from "./IonicSwap";
 import { IonicSwapAccept } from "./IonicSwapAccept";
@@ -26,20 +27,24 @@ export const App = () => {
       </div>
       <div id="content">
         <ZanoCompanionProvider disableServerRequest verbose>
+          <div>Links</div>
+          <DeepLinkTransfer />
+          <DeepLinkTransferLegacy />
+          <div>Companion status</div>
           <Connector />
           <Credentials />
           <WalletBalance />
           <WalletData />
+          <Whitelist />
+          <div>Companion methods</div>
           <IonicSwap />
           <IonicSwapAccept />
           <IonicSwapInfo />
           <Transfer />
           <MultiTransfer />
           <RequestSign />
-          <Whitelist />
           <AliasDetails />
           <CreateAlias />
-          <DeepLinkTransferLegacy />
         </ZanoCompanionProvider>
       </div>
     </div>

src/DeepLinkTransfer.tsx

@@ -0,0 +1,32 @@
+import { BigNumber } from "bignumber.js";
+import { useCallback, useState } from "react";
+
+export const DeepLinkTransfer = () => {
+  const [link, setLink] = useState<string | null>(null);
+  const call = useCallback(() => {
+    const address = prompt("Whom do you send it?");
+    if (!address) return;
+    const assetId = prompt("What are you sending?");
+    const amount = BigNumber(prompt("How many?") ?? NaN);
+    const comment = prompt("Comment:") ?? undefined;
+    setLink(
+      `zano://transfer/?address=${address}${assetId ? `&asset_id=${assetId}` : ""}${amount.isNaN() ? "" : `&amount=${amount.toString(10)}`}${comment ? `&comment=${comment}` : ""}`,
+    );
+  }, []);
+  return (
+    <>
+      <button
+        onClick={() => {
+          void call();
+        }}
+      >
+        Create Transfer DeepLink
+      </button>
+      {link ? (
+        <a href={link}>
+          <button>Transfer DeepLink: {link}</button>
+        </a>
+      ) : null}
+    </>
+  );
+};

src/DeepLinkTransferLegacy.tsx

@@ -24,7 +24,7 @@ export const DeepLinkTransferLegacy = () => {
       </button>
       {link ? (
         <a href={link}>
-          <button>Legacy Transfer DeepLink</button>
+          <button>Legacy Transfer DeepLink: {link}</button>
         </a>
       ) : null}
     </>

src/button.css

@@ -1,8 +1,8 @@
-@import './theme.css';
+@import "./theme.css";
 
 :root {
   --button-foreground: var(--foreground);
-  --button-background: #1F8FEB;
+  --button-background: #1f8feb;
 }
 
 button {
@@ -22,3 +22,10 @@ button {
   font-size: 16px;
   font-weight: 600;
 }
+
+a:has(> button) {
+  display: flex;
+}
+a > button {
+  flex: 1;
+}