From 6bf6b4868812bf82c214cf7e6bf2806d80c09ed6 Mon Sep 17 00:00:00 2001 From: Jordan Ribbink Date: Wed, 10 Jul 2024 12:28:06 -0700 Subject: [PATCH 1/2] Move Discovery configuration to single context --- .vscode/settings.json | 4 + components/Discovery.tsx | 60 ++---------- components/Features.tsx | 57 ++++++----- components/Headers/AppHeader.js | 4 +- components/Headers/Header.js | 4 +- .../Headers/__tests__/AppHeader.test.js | 55 +++++------ components/Headers/__tests__/Header.test.js | 83 ++++++++-------- .../__snapshots__/AppHeader.test.js.snap | 17 +--- .../__snapshots__/Header.test.js.snap | 95 ++++++++++--------- components/ServiceCard.tsx | 53 +++++++---- contexts/ConfigContext.tsx | 30 ++++++ hooks/useFCL.tsx | 91 ------------------ hooks/useFcl.tsx | 79 +++++++++++++++ hooks/useWallets.ts | 49 ++++++++++ pages/[...path].js | 42 -------- pages/[...path].tsx | 34 +++++++ pages/api/[...slug].js | 9 +- 17 files changed, 395 insertions(+), 371 deletions(-) create mode 100644 .vscode/settings.json create mode 100644 contexts/ConfigContext.tsx delete mode 100644 hooks/useFCL.tsx create mode 100644 hooks/useFcl.tsx create mode 100644 hooks/useWallets.ts delete mode 100644 pages/[...path].js create mode 100644 pages/[...path].tsx diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..9bf4d12b --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,4 @@ +{ + "editor.defaultFormatter": "esbenp.prettier-vscode", + "editor.formatOnSave": true +} diff --git a/components/Discovery.tsx b/components/Discovery.tsx index 1cfb4b68..7d6acdc6 100644 --- a/components/Discovery.tsx +++ b/components/Discovery.tsx @@ -1,66 +1,20 @@ -import useSWR from 'swr' import { sortByAddress } from '../helpers/services' -import { LOCAL_STORAGE_KEYS, PATHS, SUPPORTED_VERSIONS } from '../helpers/constants' +import { LOCAL_STORAGE_KEYS, SUPPORTED_VERSIONS } from '../helpers/constants' import ServiceCard from './ServiceCard' import Header from './Headers/Header' import { useLocalStorage } from '../hooks/useLocalStorage' -import { getUserAgent } from '../helpers/userAgent' -import { Container, Text, Stack } from '@chakra-ui/react' -import { Service, Strategy } from '../types' +import { Container, Stack } from '@chakra-ui/react' import Features from './Features' import { isGreaterThanOrEqualToVersion } from '../helpers/version' +import { useWallets } from '../hooks/useWallets' +import { useConfig } from '../contexts/ConfigContext' -const fetcher = (url, opts) => { - return fetch(url, { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - }, - body: JSON.stringify(opts), - }).then(d => d.json()) -} - -type Props = { - network: string - appVersion: string - extensions: Service[] - walletInclude: string[] - clientServices: Service[] - supportedStrategies: Strategy[] - clientConfig: { [key: string]: any } - port: number -} - -export const Discovery = ({ - network, - appVersion, - extensions, - walletInclude, - clientServices, - supportedStrategies, - clientConfig, - port, -}: Props) => { - const requestUrl = `/api${PATHS[network.toUpperCase()]}?discoveryType=UI` - const { data, error } = useSWR(requestUrl, url => - fetcher(url, { - type: ['authn'], - fclVersion: appVersion, - include: walletInclude, - features: { - suggested: clientConfig?.discoveryFeaturesSuggested || [] - }, - extensions, - userAgent: getUserAgent(), - clientServices, // TODO: maybe combine this with extensions except version support then needs to be fixed in later step - supportedStrategies, - network, - port, - }) - ) +export const Discovery = () => { + const { wallets: data, error } = useWallets() const [lastUsed, _] = useLocalStorage(LOCAL_STORAGE_KEYS.LAST_INSTALLED, null) const services = sortByAddress(data, lastUsed) + const { appVersion } = useConfig() const isFeaturesSupported = isGreaterThanOrEqualToVersion( appVersion, SUPPORTED_VERSIONS.SUGGESTED_FEATURES diff --git a/components/Features.tsx b/components/Features.tsx index 4a137c98..b02403a1 100644 --- a/components/Features.tsx +++ b/components/Features.tsx @@ -1,37 +1,44 @@ import { Box, HStack, Tag, Text, IconButton } from '@chakra-ui/react' import { CheckIcon } from '@chakra-ui/icons' -import { useFCL } from '../hooks/useFCL' import FEATURES_LIST from '../data/features.json' +import { useConfig } from '../contexts/ConfigContext' export default function Features() { - const { clientConfig } = useFCL() + const { clientConfig } = useConfig() const featuresListKeys = FEATURES_LIST.map(f => f.name) - const suggestedFeatures = clientConfig?.discoveryFeaturesSuggested?.filter(f => featuresListKeys.includes(f)) || [] + const suggestedFeatures = + clientConfig?.discoveryFeaturesSuggested?.filter(f => + featuresListKeys.includes(f) + ) || [] const hasSuggestedFeatures = suggestedFeatures.length > 0 return ( - {hasSuggestedFeatures && - <> - - Wallet Requirements - } - /> - - - {suggestedFeatures.map((suggestion, index) => ( - {suggestion} - ))} - - - } + {hasSuggestedFeatures && ( + <> + + + Wallet Requirements + + } + /> + + + {suggestedFeatures.map((suggestion, index) => ( + + {suggestion} + + ))} + + + )} ) -} \ No newline at end of file +} diff --git a/components/Headers/AppHeader.js b/components/Headers/AppHeader.js index 81cc008d..54b5036e 100644 --- a/components/Headers/AppHeader.js +++ b/components/Headers/AppHeader.js @@ -1,8 +1,8 @@ import { Image, Text, Heading, HStack, Stack } from '@chakra-ui/react' -import { useFCL } from '../../hooks/useFCL' +import { useConfig } from '../../contexts/ConfigContext' export default function AppHeader() { - const { appConfig, clientConfig } = useFCL() + const { appConfig, clientConfig } = useConfig() const title = appConfig?.title ? `Connect to ${appConfig?.title}` : 'Connect' return ( diff --git a/components/Headers/Header.js b/components/Headers/Header.js index 10cdbe88..0d6a4428 100644 --- a/components/Headers/Header.js +++ b/components/Headers/Header.js @@ -1,14 +1,14 @@ import FlowHeader from './FlowHeader' import AppHeader from './AppHeader' import DeveloperMessage from '../DeveloperMessage' -import { useFCL } from '../../hooks/useFCL' import { isGreaterThanOrEqualToVersion } from '../../helpers/version' import { SUPPORTED_VERSIONS } from '../../helpers/constants' import { isTestnet as isTestnetFn } from '../../helpers/networks' +import { useConfig } from '../../contexts/ConfigContext' export default function Header() { const isTestnet = isTestnetFn() - const { appConfig, appVersion } = useFCL() + const { appConfig, appVersion } = useConfig() const isMissingConfig = !(appConfig?.icon && appConfig?.title) const showDeveloperMessage = isTestnet && diff --git a/components/Headers/__tests__/AppHeader.test.js b/components/Headers/__tests__/AppHeader.test.js index 33daf682..9c57b431 100644 --- a/components/Headers/__tests__/AppHeader.test.js +++ b/components/Headers/__tests__/AppHeader.test.js @@ -1,40 +1,37 @@ -import { render } from '@testing-library/react' +import { render as defaultRender } from '@testing-library/react' import AppHeader from '../AppHeader' -import { useFCL } from '../../../hooks/useFCL' -jest.mock('../../../hooks/useFCL') +import { ConfigProvider } from '../../../contexts/ConfigContext' describe('Component: AppHeader', () => { - test('should render the the component with icon', () => { - useFCL.mockImplementation(() => { - return { - appConfig: { - title: 'Test App', - icon: 'test.png', - }, - clientConfig: { - hostname: 'www.onflow.org', - }, - } - }) + const render = config => component => { + return defaultRender( + {component} + ) + } - const { container } = render() + test('should render the the component with icon', () => { + const { container } = render({ + appConfig: { + title: 'Test App', + icon: 'test.png', + }, + clientConfig: { + hostname: 'www.onflow.org', + }, + })() expect(container.firstChild).toMatchSnapshot() }) test('should handle missing info and show unknown if no data', () => { - useFCL.mockImplementation(() => { - return { - appConfig: { - title: null, - icon: null, - }, - clientConfig: { - hostname: null, - }, - } - }) - - const { container } = render() + const { container } = render({ + appConfig: { + title: null, + icon: null, + }, + clientConfig: { + hostname: null, + }, + })() expect(container.firstChild).toMatchSnapshot() }) }) diff --git a/components/Headers/__tests__/Header.test.js b/components/Headers/__tests__/Header.test.js index 7a1c9dcb..bb0d0b6e 100644 --- a/components/Headers/__tests__/Header.test.js +++ b/components/Headers/__tests__/Header.test.js @@ -1,7 +1,6 @@ -import { render } from '@testing-library/react' +import { render as defaultRender } from '@testing-library/react' import Header from '../Header' -import { useFCL } from '../../../hooks/useFCL' -jest.mock('../../../hooks/useFCL') +import { ConfigProvider } from '../../../contexts/ConfigContext' jest.mock( '../../helpers/networks', @@ -12,57 +11,51 @@ jest.mock( ) describe('Component: Header', () => { - test('should render the configurable component if version is old enough', () => { - useFCL.mockImplementation(() => { - return { - appVersion: '1.0.0', - appConfig: { - title: 'Test App', - icon: 'test.png', - }, - clientConfig: { - hostname: 'www.onflow.org', - }, - } - }) + const render = config => component => { + return defaultRender( + {component} + ) + } - const { container } = render(
) + test('should render the configurable component if version is old enough', () => { + const { container } = render({ + appVersion: '1.0.0', + appConfig: { + title: 'Test App', + icon: 'test.png', + }, + clientConfig: { + hostname: 'www.onflow.org', + }, + })(
) expect(container.firstChild).toMatchSnapshot() }) test('should NOT render the configurable component if version is too low', () => { - useFCL.mockImplementation(() => { - return { - appVersion: '0.0.77', - appConfig: { - title: 'Test App', - icon: 'test.png', - }, - clientConfig: { - hostname: 'www.onflow.org', - }, - } - }) - - const { container } = render(
) + const { container } = render({ + appVersion: '0.0.77', + appConfig: { + title: 'Test App', + icon: 'test.png', + }, + clientConfig: { + hostname: 'www.onflow.org', + }, + })(
) expect(container.firstChild).toMatchSnapshot() }) test('should show the DeveloperMessage if config is missing', () => { - useFCL.mockImplementation(() => { - return { - appVersion: '1.0.0', - appConfig: { - title: null, - icon: null, - }, - clientConfig: { - hostname: null, - }, - } - }) - - const { container } = render(
) + const { container } = render({ + appVersion: '1.0.0', + appConfig: { + title: null, + icon: null, + }, + clientConfig: { + hostname: null, + }, + })(
) expect(container.firstChild).toMatchSnapshot() }) }) diff --git a/components/Headers/__tests__/__snapshots__/AppHeader.test.js.snap b/components/Headers/__tests__/__snapshots__/AppHeader.test.js.snap index 538c37bd..d36730be 100644 --- a/components/Headers/__tests__/__snapshots__/AppHeader.test.js.snap +++ b/components/Headers/__tests__/__snapshots__/AppHeader.test.js.snap @@ -81,12 +81,6 @@ exports[`Component: AppHeader should render the the component with icon 1`] = ` } .emotion-3 { - border-radius: 50px; - width: 25px; - height: 25px; -} - -.emotion-4 { color: grey; } @@ -96,20 +90,15 @@ exports[`Component: AppHeader should render the the component with icon 1`] = `

- Connect to Test App + Connect

- Logo

- www.onflow.org + Unknown

diff --git a/components/Headers/__tests__/__snapshots__/Header.test.js.snap b/components/Headers/__tests__/__snapshots__/Header.test.js.snap index 5146d32f..3ff1fd41 100644 --- a/components/Headers/__tests__/__snapshots__/Header.test.js.snap +++ b/components/Headers/__tests__/__snapshots__/Header.test.js.snap @@ -67,58 +67,56 @@ exports[`Component: Header should render the configurable component if version i display: -webkit-flex; display: -ms-flexbox; display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - gap: 0.5rem; - margin-bottom: 25px; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; } -.emotion-2 { +.emotion-1 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - gap: 0.5rem; + margin-bottom: 4px; } -.emotion-3 { - border-radius: 50px; - width: 25px; - height: 25px; +.emotion-2 { + width: 140px; + height: auto; + margin-bottom: 3px; } -.emotion-4 { +.emotion-3 { color: grey; }
-

- Connect to Test App -

Logo

- www.onflow.org + Choose a Provider

@@ -130,26 +128,35 @@ exports[`Component: Header should show the DeveloperMessage if config is missing display: -webkit-flex; display: -ms-flexbox; display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - gap: 0.5rem; - margin-bottom: 25px; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; } -.emotion-2 { +.emotion-1 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - gap: 0.5rem; + margin-bottom: 4px; +} + +.emotion-2 { + width: 140px; + height: auto; + margin-bottom: 3px; } .emotion-3 { @@ -157,20 +164,20 @@ exports[`Component: Header should show the DeveloperMessage if config is missing }
-

- Connect -

+ Logo

- Unknown + Choose a Provider

diff --git a/components/ServiceCard.tsx b/components/ServiceCard.tsx index 5492badf..a93930fd 100644 --- a/components/ServiceCard.tsx +++ b/components/ServiceCard.tsx @@ -3,7 +3,6 @@ import { LOCAL_STORAGE_KEYS, SUPPORTED_VERSIONS } from '../helpers/constants' import { isExtension } from '../helpers/services' import { isGreaterThanOrEqualToVersion } from '../helpers/version' import { truncateString } from '../helpers/strings' -import { useFCL } from '../hooks/useFCL' import { useLocalStorage } from '../hooks/useLocalStorage' import { Box, @@ -23,8 +22,9 @@ import { FiInfo } from 'react-icons/fi' import { Service } from '../types' import { getProviderMetadataByAddress } from '../helpers/metadata' import { CheckIcon } from '@chakra-ui/icons' -import { useMemo } from 'react' +import { useContext, useMemo } from 'react' import FEATURES_LIST from '../data/features.json' +import { ConfigContext } from '../contexts/ConfigContext' type Props = { isEnabled: boolean @@ -40,7 +40,7 @@ export default function ServiceCard({ service, lastUsed = false, }: Props) { - const { appVersion, clientConfig } = useFCL() + const { appVersion, clientConfig } = useContext(ConfigContext) const [_, setLastUsed] = useLocalStorage( LOCAL_STORAGE_KEYS.LAST_INSTALLED, null @@ -50,14 +50,18 @@ export default function ServiceCard({ const installLink = service?.provider?.install_link const isExtensionService = isExtension(service) const isExtensionServiceInstalled = Boolean(service?.provider?.is_installed) - const supportedFeatures = getProviderMetadataByAddress(service?.provider?.address)?.features?.supported || [] + const supportedFeatures = + getProviderMetadataByAddress(service?.provider?.address)?.features + ?.supported || [] const isFeaturesSupported = isGreaterThanOrEqualToVersion( appVersion, SUPPORTED_VERSIONS.SUGGESTED_FEATURES ) const featuresListKeys = FEATURES_LIST.map(f => f.name) - const suggestedFeatures = clientConfig?.discoveryFeaturesSuggested?.filter(f => featuresListKeys.includes(f)) || [] - + const suggestedFeatures = + clientConfig?.discoveryFeaturesSuggested?.filter(f => + featuresListKeys.includes(f) + ) || [] const onSelect = () => { if (!service) return @@ -82,10 +86,12 @@ export default function ServiceCard({ window.location.href = `${service.endpoint}${window.location.search}` } } - + const hasSuggestedFeatures = useMemo(() => { if (suggestedFeatures.length === 0) return false - return suggestedFeatures.every(feature => supportedFeatures.includes(feature)) + return suggestedFeatures.every(feature => + supportedFeatures.includes(feature) + ) }, [suggestedFeatures, supportedFeatures]) const openMoreInfo = e => { @@ -110,21 +116,32 @@ export default function ServiceCard({ - {name} + {name} {truncateString(name, 10)} {isExtensionService && !isExtensionServiceInstalled && ( - Install Extension + + Install Extension + + )} + {lastUsed && ( + + Last Used + )} - {lastUsed && Last Used} {isFeaturesSupported && hasSuggestedFeatures && ( } /> @@ -134,7 +151,11 @@ export default function ServiceCard({ {isFeaturesSupported && ( {supportedFeatures.map((feature, index) => { - return {feature} + return ( + + {feature} + + ) })} )} diff --git a/contexts/ConfigContext.tsx b/contexts/ConfigContext.tsx new file mode 100644 index 00000000..7b8dd72d --- /dev/null +++ b/contexts/ConfigContext.tsx @@ -0,0 +1,30 @@ +import { createContext, useContext } from 'react' +import { FclConfig } from '../hooks/useFcl' + +export interface DiscoveryConfig extends FclConfig { + network: string + port: number +} + +export const ConfigContext = createContext(null) + +interface ConfigProviderProps { + children: React.ReactNode + config: DiscoveryConfig +} + +export function ConfigProvider({ children, config }: ConfigProviderProps) { + return ( + + {children} + + ) +} + +export function useConfig() { + const config = useContext(ConfigContext) + if (!config) { + throw new Error('useConfig must be used within a ConfigProvider') + } + return config +} diff --git a/hooks/useFCL.tsx b/hooks/useFCL.tsx deleted file mode 100644 index f751ed62..00000000 --- a/hooks/useFCL.tsx +++ /dev/null @@ -1,91 +0,0 @@ -import { useEffect, useState } from 'react' -import { WalletUtils } from '@onflow/fcl' -import { Service, Strategy } from '../types' - -type WalletUtilsProps = { - fclVersion: string - body: { [key: string]: any } - config: { [key: string]: any } -} - -export const useFCL = (): { - hasInitialized: boolean - loading: boolean - appConfig: { [key: string]: any } - clientConfig: { [key: string]: any } - appVersion: string - walletInclude: string[] - clientServices: Service[] - supportedStrategies: Strategy[] -} => { - const [hasInitialized, setHasInitialized] = useState(false) - const [loading, setLoading] = useState(false) - const [appConfig, setAppConfig] = useState<{ [key: string]: any }>() - const [clientConfig, setClientConfig] = useState<{ [key: string]: any }>() - const [appVersion, setAppVersion] = useState(null) - const [walletInclude, setWalletInclude] = useState([]) - const [clientServices, setClientServices] = useState([]) - const [supportedStrategies, setSupportedStrategies] = useState([]) - - useEffect(() => { - setHasInitialized(true) - setLoading(true) - - try { - WalletUtils.ready(({ fclVersion, body, config }: WalletUtilsProps) => { - // config.client.fclVersion is only available starting in version 0.0.79-alpha.4 - // config?.client?.extensions starts in fcl v1 - const appFclVersion = config?.client?.fclVersion || fclVersion || null - const services = - config?.client?.clientServices || - config?.client?.extensions || - body?.extensions || - [] - const clientSupportedStrategies = - config?.client?.supportedStrategies || [] - - if (config?.app) { - setAppConfig(config.app) - } - - if (config?.client) { - setClientConfig(config.client) - } - - if (appFclVersion) { - setAppVersion(appFclVersion) - setWalletInclude( - config?.discoveryAuthnInclude || - config?.client?.discoveryAuthnInclude || - [] - ) - } - - if (services) { - setClientServices(services) - } - - if (clientSupportedStrategies) { - setSupportedStrategies(clientSupportedStrategies) - } - - setLoading(false) - }) - } catch (_) { - console.log( - 'Error occured, please see docs: https://developers.flow.com/tools/fcl-js/reference/discovery' - ) - } - }, []) - - return { - hasInitialized, - loading, - appConfig, - clientConfig, - appVersion, - walletInclude, - clientServices, - supportedStrategies, - } -} diff --git a/hooks/useFcl.tsx b/hooks/useFcl.tsx new file mode 100644 index 00000000..60d2ca81 --- /dev/null +++ b/hooks/useFcl.tsx @@ -0,0 +1,79 @@ +import { useEffect, useRef, useState } from 'react' +import { WalletUtils } from '@onflow/fcl' +import { Service, Strategy } from '../types' + +type WalletUtilsProps = { + fclVersion: string + body: { [key: string]: any } + config: { [key: string]: any } +} + +export interface FclConfig { + appConfig: { [key: string]: any } + clientConfig: { [key: string]: any } + appVersion: string + walletInclude: string[] + clientServices: Service[] + supportedStrategies: Strategy[] +} + +export function useFcl() { + const [config, setConfig] = useState(null) + const [error, setError] = useState(null) + const timeout = useRef(null) + + useEffect(() => { + try { + WalletUtils.ready(({ fclVersion, body, config }: WalletUtilsProps) => { + // config.client.fclVersion is only available starting in version 0.0.79-alpha.4 + // config?.client?.extensions starts in fcl v1 + const state = { + appConfig: config.app, + clientConfig: config.client, + appVersion: config.client.fclVersion || fclVersion || null, + walletInclude: + config.discoveryAuthnInclude || + config.client.discoveryAuthnInclude || + [], + clientServices: + config.client.clientServices || + config.client.extensions || + body.extensions || + [], + supportedStrategies: config.client.supportedStrategies || [], + } as FclConfig + + setConfig(state) + clearTimeout(timeout.current) + }) + + timeout.current = setTimeout(() => { + setError( + 'Error occured, if you are the developer please check the console for more information.' + ) + console.error( + 'Timeout: No response from FCL received within 5s - please ensure the application you are trying to connect to is running FCL & has the correct configuration and try again.' + ) + }, 5000) + } catch (e) { + clearTimeout(timeout.current) + setError( + 'Error occured, if you are the developer please check the console for more information.' + ) + + console.error(e) + console.error( + "An error has occured connecting to the dApp's FCL instance, please see docs: https://developers.flow.com/tools/fcl-js/reference/discovery" + ) + } + + return () => { + clearTimeout(timeout.current) + } + }, []) + + return { + error, + config, + } +} diff --git a/hooks/useWallets.ts b/hooks/useWallets.ts new file mode 100644 index 00000000..cce4a135 --- /dev/null +++ b/hooks/useWallets.ts @@ -0,0 +1,49 @@ +import useSWR from 'swr' +import { PATHS } from '../helpers/constants' +import { useConfig } from '../contexts/ConfigContext' +import { getUserAgent } from '../helpers/userAgent' + +const genKey = (url: string, opts: any) => [url, JSON.stringify(opts)] + +const fetcher = async (url: string, opts: any) => { + return fetch(url, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify(opts), + }).then(d => d.json()) +} + +export function useWallets() { + const { + appVersion, + clientConfig, + walletInclude, + clientServices, + supportedStrategies, + network, + port, + } = useConfig() + + const requestUrl = `/api${PATHS[network.toUpperCase()]}?discoveryType=UI` + const body = { + type: ['authn'], + fclVersion: appVersion, + include: walletInclude, + features: { + suggested: clientConfig?.discoveryFeaturesSuggested || [], + }, + userAgent: getUserAgent(), + clientServices, // TODO: maybe combine this with extensions except version support then needs to be fixed in later step + supportedStrategies, + network, + port, + } + + const { data: wallets, error } = useSWR(genKey(requestUrl, body), url => + fetcher(url, body) + ) + + return { wallets, error } +} diff --git a/pages/[...path].js b/pages/[...path].js deleted file mode 100644 index 0d615bef..00000000 --- a/pages/[...path].js +++ /dev/null @@ -1,42 +0,0 @@ -import { useRouter } from 'next/router' -import { Discovery } from '../components/Discovery' -import { isValidPath, getNetworkFromPath } from '../helpers/paths' -import { useFCL } from '../hooks/useFCL' - -const Router = () => { - const router = useRouter() - const { path, port } = router.query // path: ['authn'] ['testnet', 'authn'] ['canarynet', 'authn'] - const { - hasInitialized, - loading, - appVersion, - extensions, - walletInclude, - clientServices, - supportedStrategies, - clientConfig, - } = useFCL() - const isValid = isValidPath(path) - const network = getNetworkFromPath(path) - - return ( -
- {!path &&
} - {path && !isValid &&
Page Not Found
} - {path && isValid && hasInitialized && !loading && ( - - )} -
- ) -} - -export default Router diff --git a/pages/[...path].tsx b/pages/[...path].tsx new file mode 100644 index 00000000..e7c1423e --- /dev/null +++ b/pages/[...path].tsx @@ -0,0 +1,34 @@ +import { useRouter } from 'next/router' +import { Discovery } from '../components/Discovery' +import { isValidPath, getNetworkFromPath } from '../helpers/paths' +import { useFcl } from '../hooks/useFcl' +import { ConfigProvider } from '../contexts/ConfigContext' + +const Router = () => { + const router = useRouter() + const { path, port } = router.query // path: ['authn'] ['testnet', 'authn'] ['canarynet', 'authn'] + const { config: fclConfig, error } = useFcl() + const isValid = isValidPath(path) + const network = getNetworkFromPath(path) + + return ( +
+ {!path &&
} + {path && !isValid &&
Page Not Found
} + {path && isValid && fclConfig && ( + + + + )} + {path && isValid && error &&
{error}
} +
+ ) +} + +export default Router diff --git a/pages/api/[...slug].js b/pages/api/[...slug].js index 61da691a..417e2b8f 100644 --- a/pages/api/[...slug].js +++ b/pages/api/[...slug].js @@ -4,7 +4,6 @@ import servicesJson from '../../data/services.json' import { isValidPath, getNetworkFromPath } from '../../helpers/paths' import { findMatchingPipeVersion } from '../../helpers/version' import Sentry from '../../config/sentry.server' -import mixpanel from '../../config/mixpanel.server' import { getServicePipes } from '../../helpers/servicePipes' import { NETWORKS } from '../../helpers/constants' @@ -49,12 +48,6 @@ async function handler(req, res) { return res.status(400).json({ message: 'Invalid Network' }) } - mixpanel.track('Wallet Discovery Request', { - type: discoveryRequestType, - network, - fclVersion, - }) - const servicePipes = getServicePipes({ fclVersion, discoveryType, @@ -66,7 +59,7 @@ async function handler(req, res) { portOverride: portQuery || portBody, }) const versionPipe = findMatchingPipeVersion(fclVersion, servicePipes) - + // support emulator and use local service configuration const netConfig = network === NETWORKS.EMULATOR ? NETWORKS.LOCAL : network const discoveryServices = versionPipe(servicesJson[netConfig]) From 71afe37a32283a65036bcf28bd6b10113a44e2d7 Mon Sep 17 00:00:00 2001 From: Jordan Ribbink Date: Wed, 10 Jul 2024 15:04:52 -0700 Subject: [PATCH 2/2] Add isLoading export --- hooks/useWallets.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/hooks/useWallets.ts b/hooks/useWallets.ts index cce4a135..a9be414e 100644 --- a/hooks/useWallets.ts +++ b/hooks/useWallets.ts @@ -45,5 +45,5 @@ export function useWallets() { fetcher(url, body) ) - return { wallets, error } + return { wallets, error, isLoading: !wallets && !error } }