Adds status and discovery wallet input

cmds/m1.js

@@ -1,5 +1,6 @@
 import { mutate } from "@onflow/fcl"
 import { yup, nope } from "../util"
+import { success, fail } from "../util"
 
 export const LABEL = "Mutate 1 (no args)"
 export const CMD = async () => {
@@ -13,6 +14,6 @@ export const CMD = async () => {
       }
     `,
     limit: 50,
-  }).then(yup("M-1"))
-    .catch(nope("M-1"))
+  }).then(() => success(LABEL))
+    .catch(() => fail(LABEL))
 }

cmds/m2.js

@@ -1,5 +1,6 @@
 import { mutate } from "@onflow/fcl"
 import { yup, nope } from "../util"
+import { success, fail } from "../util"
 
 export const LABEL = "Mutate 2 (args)"
 export const CMD = async () => {
@@ -22,6 +23,6 @@ export const CMD = async () => {
     ],
     limit: 50,
   })
-    .then(yup("M-1"))
-    .catch(nope("M-1"))
+    .then(() => success(LABEL))
+    .catch(() => fail(LABEL))
 }

cmds/q1.js

@@ -1,5 +1,6 @@
 import { query } from "@onflow/fcl"
 import { yup, nope } from "../util"
+import { success, fail } from "../util"
 
 export const LABEL = "Query 1 (no args)"
 export const CMD = async () => {
@@ -10,6 +11,6 @@ export const CMD = async () => {
         return 7
       }
     `,
-  }).then(yup("Q-1"))
-    .catch(nope("Q-1"))
+  }).then(() => success(LABEL))
+  .catch(() => fail(LABEL))
 }

cmds/q2.js

@@ -1,5 +1,6 @@
 import { query } from "@onflow/fcl"
 import { yup, nope } from "../util"
+import { success, fail } from "../util"
 
 export const LABEL = "Query 2 (args)"
 export const CMD = async () => {
@@ -14,6 +15,6 @@ export const CMD = async () => {
       arg("5", t.Int),
       arg("7", t.Int),
     ],
-  }).then(yup("Q-1"))
-    .catch(nope("Q-1"))
+  }).then(() => success(LABEL))
+  .catch(() => fail(LABEL))
 }

cmds/serialize.js

@@ -1,5 +1,6 @@
 import * as fcl from "@onflow/fcl"
 import { yup, nope } from "../util"
+import { success, fail } from "../util"
 
 export const LABEL = "Serialize"
 export const CMD = async () => {
@@ -17,6 +18,6 @@ export const CMD = async () => {
       fcl.authorizations([fcl.authz]),
       fcl.payer(fcl.authz),
     ])
-    .then(yup("US-1"))
-    .catch(nope("US-1"))
+    .then(() => success(LABEL))
+    .catch(() => fail(LABEL))
 }

cmds/us1.js

@@ -1,12 +1,13 @@
 import { currentUser } from "@onflow/fcl"
 import { Buffer } from "buffer"
 import { yup, nope } from "../util"
+import { success, fail } from "../util"
 
 export const LABEL = "User Sign 1 (No Verification)"
 export const CMD = async () => {
   const MSG = "FOO"
   return currentUser()
     .signUserMessage(Buffer.from(MSG).toString("hex"))
-    .then(yup("US-1"))
-    .catch(nope("US-1"))
+    .then(() => success(LABEL))
+    .catch(() => fail(LABEL))
 }

cmds/us2.js

@@ -1,5 +1,6 @@
 import * as fcl from "@onflow/fcl"
 import { Buffer } from "buffer"
+import { success, fail } from "../util"
 
 const toHexStr = str => {
   return Buffer.from(str).toString("hex")
@@ -18,8 +19,11 @@ export const CMD = async () => {
 
     return fcl.AppUtils.verifyUserSignatures(MSG, res, {
       fclCryptoContract,
-    }).then(console.log)
+    })
+      .then(success(LABEL))
+      .catch(fail(LABEL))
   } catch (error) {
     console.log(error)
+    return fail(LABEL)
   }
 }

package.json

@@ -10,7 +10,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@onflow/fcl": "^1.2.0",
+    "@onflow/fcl": "latest",
     "next": "12.1.5",
     "react": "18.0.0",
     "react-dom": "18.0.0"

pages/index.js

@@ -1,14 +1,21 @@
 import * as fcl from "@onflow/fcl"
-import { useState, useEffect } from "react"
+import { useState, useEffect, useRef } from "react"
 import "../flow/config"
 import { COMMANDS } from "../cmds"
 import useCurrentUser from "../hooks/use-current-user"
 import useConfig from "../hooks/use-config"
 
-const renderCommand = d => {
+const renderCommand = (d, setStatus) => {
   return (
     <li key={d.LABEL}>
-      <button onClick={d.CMD}>{d.LABEL}</button>
+      <button
+        onClick={async () => {
+          setStatus("pending...")
+          setStatus(await d.CMD())
+        }}
+      >
+        {d.LABEL}
+      </button>
     </li>
   )
 }
@@ -17,6 +24,8 @@ export default function Home() {
   const currentUser = useCurrentUser()
   const config = useConfig()
   const [services, setServices] = useState([])
+  const discoveryWalletInputRef = useRef(null)
+  const [status, setStatus] = useState(null)
 
   useEffect(() => {
     const fetchServices = async () =>
@@ -33,7 +42,8 @@ export default function Home() {
 
   return (
     <div>
-      <ul>{COMMANDS.map(renderCommand)}</ul>
+      <ul>{COMMANDS.map(cmd => renderCommand(cmd, setStatus))}</ul>
+      <pre>Status: {status}</pre>
       <div>
         {services?.map(service => (
           <button
@@ -44,6 +54,21 @@ export default function Home() {
           </button>
         ))}
       </div>
+      <div style={{ marginTop: "12px" }}>
+        <label for="manual-wallet">
+          Manually set "discovery.wallet" config:{" "}
+        </label>
+        <input ref={discoveryWalletInputRef} name="manual-wallet"></input>
+        <button
+          onClick={async () =>
+            await fcl
+              .config()
+              .put("discovery.wallet", discoveryWalletInputRef?.current?.value)
+          }
+        >
+          Set
+        </button>
+      </div>
       <pre>{JSON.stringify({ currentUser, config }, null, 2)}</pre>
     </div>
   )

util.js

@@ -3,3 +3,6 @@ export const nope = tag => d => (console.error(`Oh No!! [${tag}]`, d), d)
 export function serviceOfType(services = [], type) {
   return services.find(service => service.type === type)
 }
+
+export const success = q => `success - ${q}`
+export const fail = q => `fail - ${q}`