Add HTTP/POST backchannel support (#198)

.env.development

@@ -1,6 +1,3 @@
-# FCL Dev Wallet Base URL
-BASE_URL=http://localhost:8701
-
 # The FCL Dev Wallet requires a single account to use as a base/starting point.
 # This account will be used to create and manage other accounts.
 # We recommend to use the service account defined in the flow.json file your emulator is using.

.env.example

@@ -1,6 +1,3 @@
-# FCL Dev Wallet Base URL
-BASE_URL=http://localhost:8701
-
 # The FCL Dev Wallet requires a single account to use as a base/starting point.
 # This account will be used to create and manage other accounts.
 # We recommend to use the service account definied in the flow.json file your emulator is using.

.gitignore

@@ -36,4 +36,4 @@ yarn-error.log*
 .vercel
 
 .idea
-/.env
+/.env

components/AccountForm.tsx

@@ -72,6 +72,7 @@ export default function AccountForm({
             onSubmitComplete(address)
           }
         } catch (error) {
+          throw error
           // TODO: Fix error string
           // setErrors([error])
           setSubmitting(false)

components/AccountsListItem.tsx

@@ -9,7 +9,7 @@ import {chooseAccount} from "src/accountAuth"
 import {formattedBalance} from "src/balance"
 import {Flex, Themed} from "theme-ui"
 import {SXStyles} from "types"
-import useConfig from "hooks/useConfig"
+import {getBaseUrl} from "src/utils"
 
 const styles: SXStyles = {
   accountListItem: {
@@ -107,7 +107,7 @@ export default function AccountsListItem({
       app: {title},
     },
   } = connectedAppConfig
-  const {baseUrl} = useConfig()
+  const baseUrl = getBaseUrl()
 
   const [scopes, setScopes] = useState<Set<string>>(new Set(account.scopes))
   const {data: accountData} = useAccount(account.address)

components/Dialog.tsx

@@ -6,6 +6,7 @@ import {useRef} from "react"
 import {Box, Button} from "theme-ui"
 import {SXStyles} from "types"
 import ExpandCollapseButton from "./ExpandCollapseButton"
+import {getBaseUrl, isBackchannel, updatePollingSession} from "src/utils"
 
 export const styles: SXStyles = {
   dialog: {
@@ -90,8 +91,23 @@ export default function Dialog({
   root?: boolean
   children: React.ReactNode
 }) {
+  const baseUrl = getBaseUrl()
   const closeButtonRef = useRef<HTMLButtonElement>(null)
-  const onClose = () => WalletUtils.close()
+  const onClose = () => {
+    const declineResponse = {
+      f_type: "PollingResponse",
+      f_vsn: "1.0.0",
+      status: "DECLINED",
+      reason: "User declined",
+      data: null,
+    }
+
+    if (isBackchannel()) {
+      updatePollingSession(baseUrl, declineResponse)
+    } else {
+      WalletUtils.sendMsgToFCL("FCL:VIEW:RESPONSE", declineResponse)
+    }
+  }
   const {isExpanded, setCodePreview} = useAuthzContext()
 
   return (

contexts/AuthnRefreshContext.tsx

@@ -1,6 +1,6 @@
 import React, {createContext, useEffect, useState} from "react"
-import {WalletUtils} from "@onflow/fcl"
 import {parseScopes} from "src/scopes"
+import {useFclData} from "hooks/useFclData"
 
 type AuthnRefreshContextType = {
   address: string
@@ -17,13 +17,14 @@ export function AuthnRefreshContextProvider({
 }: {
   children: React.ReactNode
 }) {
+  const fclData: any = useFclData()
   const [value, setValue] = useState<any>(null)
 
   useEffect(() => {
-    function callback(data: any) {
-      const {timestamp, appDomainTag} = data.body
+    if (fclData) {
+      const {timestamp, appDomainTag} = fclData.body
 
-      const service = data.service
+      const service = fclData.service
       const address = service?.data?.address
       const keyId = service?.data?.keyId
       const scopes = new Set(parseScopes(service?.params?.scopes))
@@ -36,9 +37,7 @@ export function AuthnRefreshContextProvider({
         appDomainTag,
       })
     }
-
-    WalletUtils.ready(callback)
-  }, [])
+  }, [fclData])
 
   return (
     <AuthnRefreshContext.Provider value={value}>

contexts/AuthzContext.tsx

@@ -2,8 +2,8 @@ import * as fcl from "@onflow/fcl"
 import useAccounts from "hooks/useAccounts"
 import {ConnectedAppConfig} from "hooks/useConnectedAppConfig"
 import {Account} from "src/accounts"
-import React, {createContext, useEffect, useMemo, useState} from "react"
-import {WalletUtils} from "@onflow/fcl"
+import React, {createContext, useMemo, useState} from "react"
+import {useFclData} from "hooks/useFclData"
 
 type AuthzReadyData = {
   type: string
@@ -92,19 +92,15 @@ export const AuthzContext = createContext<AuthzContextType>({
 })
 
 export function AuthzContextProvider({children}: {children: React.ReactNode}) {
-  const [signable, setSignable] = useState<AuthSignable | null>(null)
+  const signable = useFclData<AuthSignable>({
+    transformFrontchannel: (data: AuthzReadyData) => {
+      return data.body
+    },
+  })
   const [codePreview, setCodePreview] = useState<CodePreview | null>(null)
 
   const {data: accountsData} = useAccounts()
 
-  useEffect(() => {
-    function callback(data: AuthzReadyData) {
-      setSignable(data.body)
-    }
-
-    WalletUtils.ready(callback)
-  }, [])
-
   const accounts = useMemo(() => {
     if (!accountsData) return {}
     const hash: Record<string, Account> = {}

contexts/ConfigContext.tsx

@@ -4,7 +4,6 @@ import {Spinner} from "../components/Spinner"
 
 interface RuntimeConfig {
   flowAvatarUrl: string
-  baseUrl: string
   contractFungibleToken: string
   contractFlowToken: string
   contractFUSD: string
@@ -20,7 +19,6 @@ interface RuntimeConfig {
 
 const defaultConfig = {
   flowAvatarUrl: process.env.flowAvatarUrl || "",
-  baseUrl: process.env.baseUrl || "",
   contractFungibleToken: process.env.contractFungibleToken || "",
   contractFlowToken: process.env.contractFlowToken || "",
   contractFUSD: process.env.contractFUSD || "",

go.mod

@@ -2,4 +2,27 @@ module github.com/onflow/fcl-dev-wallet
 
 go 1.18
 
-require github.com/joho/godotenv v1.4.0
+require (
+	github.com/gorilla/mux v1.8.0
+	github.com/joho/godotenv v1.4.0
+	github.com/spf13/cobra v1.7.0
+	github.com/spf13/viper v1.16.0
+)
+
+require (
+	github.com/fsnotify/fsnotify v1.6.0 // indirect
+	github.com/hashicorp/hcl v1.0.0 // indirect
+	github.com/inconshreveable/mousetrap v1.1.0 // indirect
+	github.com/magiconair/properties v1.8.7 // indirect
+	github.com/mitchellh/mapstructure v1.5.0 // indirect
+	github.com/pelletier/go-toml/v2 v2.0.8 // indirect
+	github.com/spf13/afero v1.9.5 // indirect
+	github.com/spf13/cast v1.5.1 // indirect
+	github.com/spf13/jwalterweatherman v1.1.0 // indirect
+	github.com/spf13/pflag v1.0.5 // indirect
+	github.com/subosito/gotenv v1.4.2 // indirect
+	golang.org/x/sys v0.8.0 // indirect
+	golang.org/x/text v0.9.0 // indirect
+	gopkg.in/ini.v1 v1.67.0 // indirect
+	gopkg.in/yaml.v3 v3.0.1 // indirect
+)