Feature/UI updates (#148)

* Add new header with data

* layout header

* Add packages

* Add icons package

* Change out icon in service card

* Add margin bottom

* Convert cards

* size tweaks

* Fix name length issue

* Convert app.js file

* convert to div

* remove unused import

* Remove explainer component

* Convert flow header

* Remove app header two

* Update tests

* Update header for new header

* Fix tests

* Add developer message component

* Add test for networks

* Delete styled components

* Run lintfix

* Fix test

* Address PR feedback and convert some to ts

* Fix error

* Convert useFCL to ts

* Make css classes deterministic

* lintfix

Co-authored-by: Chase Fleming <1666730+chasefleming@users.noreply.github.com>

.babelrc

@@ -1,13 +1,4 @@
 {
   "presets": ["next/babel"],
-  "plugins": [
-    [
-      "styled-components",
-      {
-        "ssr": true,
-        "displayName": true,
-        "preprocess": false
-      }
-    ]
-  ]
+  "plugins": []
 }

components/DeveloperMessage.js

@@ -0,0 +1,27 @@
+import {
+  Alert,
+  AlertIcon,
+  AlertTitle,
+  AlertDescription,
+  Link,
+} from '@chakra-ui/react'
+import { ExternalLinkIcon } from '@chakra-ui/icons'
+
+export default function FlowHeader() {
+  return (
+    <Alert status="warning" marginBottom={3}>
+      <AlertIcon />
+      <AlertTitle>Missing Config</AlertTitle>
+      <AlertDescription>
+        See how to set your app title and icon{' '}
+        <Link
+          href="/~https://github.com/onflow/fcl-discovery/blob/master/README.md#configuration"
+          isExternal
+        >
+          here <ExternalLinkIcon mx="2px" />
+        </Link>
+        .
+      </AlertDescription>
+    </Alert>
+  )
+}

components/Discovery.js → components/Discovery.tsx

@@ -1,21 +1,12 @@
 import useSWR from 'swr'
-import styled from 'styled-components'
 import { sortByAddress } from '../helpers/services'
 import { LOCAL_STORAGE_KEYS, PATHS } from '../helpers/constants'
 import ServiceCard from './ServiceCard'
 import Header from './Headers/Header'
 import { useLocalStorage } from '../hooks/useLocalStorage'
 import { getUserAgent } from '../helpers/userAgent'
-
-const DiscoveryContainer = styled.div`
-  height: 100%;
-  width: 100%;
-  box-sizing: border-box;
-  overflow-y: auto;
-  padding: 5px 10px 20px 5px;
-`
-
-const ProvidersList = styled.div``
+import { Container, Stack } from '@chakra-ui/react'
+import { Service, Strategy } from '../types'
 
 const fetcher = (url, opts) => {
   return fetch(url, {
@@ -27,15 +18,25 @@ const fetcher = (url, opts) => {
   }).then(d => d.json())
 }
 
+type Props = {
+  network: string
+  appVersion: string
+  extensions: Service[]
+  walletInclude: string[]
+  clientServices: Service[]
+  supportedStrategies: Strategy[]
+  port: number
+}
+
 export const Discovery = ({
   network,
   appVersion,
   extensions,
   walletInclude,
   clientServices,
   supportedStrategies,
-  port
-}) => {
+  port,
+}: Props) => {
   const requestUrl = `/api${PATHS[network.toUpperCase()]}?discoveryType=UI`
   const { data, error } = useSWR(requestUrl, url =>
     fetcher(url, {
@@ -47,7 +48,7 @@ export const Discovery = ({
       clientServices, // TODO: maybe combine this with extensions except version support then needs to be fixed in later step
       supportedStrategies,
       network,
-      port
+      port,
     })
   )
   const [lastUsed, _] = useLocalStorage(LOCAL_STORAGE_KEYS.LAST_INSTALLED, null)
@@ -57,22 +58,21 @@ export const Discovery = ({
   if (error) return <div>Error Loading Data</div>
 
   return (
-    <DiscoveryContainer>
+    <Container paddingTop={5} paddingBottom={5}>
       <Header />
-      <ProvidersList>
+      <Stack spacing="12px">
         {services.length === 0 && <div>No Wallets Found</div>}
         {services.map((service, index) => {
           return (
             <ServiceCard
               key={service?.provider?.address ?? index}
-              isEnabled={Boolean(service.provider)}
               {...service.provider}
               service={service}
               lastUsed={service?.provider?.address === lastUsed}
             />
           )
         })}
-      </ProvidersList>
-    </DiscoveryContainer>
+      </Stack>
+    </Container>
   )
 }

components/Headers/AppHeader.js

@@ -1,55 +1,26 @@
-import styled from 'styled-components'
-import { COLORS } from '../../helpers/constants'
+import { Image, Text, Heading, HStack, Stack } from '@chakra-ui/react'
 import { useFCL } from '../../hooks/useFCL'
 
-const HeaderContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 10px 0;
-`
-
-const AppLogo = styled.img`
-  height: 5rem;
-  width: 5rem;
-  border-radius: 10%;
-  overflow: hidden;
-`
-
-const DefaultImgWrapper = styled.div`
-  height: 5rem;
-  width: 5rem;
-  background: ${COLORS.GREY_LIGHTER_TWO};
-  border-radius: 10%;
-  overflow: hidden;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`
-
-const DefaultImg = styled.img`
-  height: 4rem;
-  width: 4rem;
-`
-
-const ClientDomain = styled.div`
-  color: ${COLORS.SECONDARY};
-  margin-top: 5px;
-`
-
 export default function AppHeader() {
   const { appConfig, clientConfig } = useFCL()
+  const title = appConfig?.title ? `Connect to ${appConfig?.title}` : 'Connect'
 
   return (
-    <HeaderContainer>
-      {appConfig?.icon ? (
-        <AppLogo src={appConfig.icon} alt="Logo" />
-      ) : (
-        <DefaultImgWrapper>
-          <DefaultImg src="/images/default-img.svg" />
-        </DefaultImgWrapper>
-      )}
-      <ClientDomain>{clientConfig?.hostname}</ClientDomain>
-    </HeaderContainer>
+    <Stack marginBottom={25}>
+      <Heading as="h2" size="md">
+        {title}
+      </Heading>
+      <HStack>
+        {appConfig?.icon && (
+          <Image
+            src={appConfig.icon}
+            alt="Logo"
+            borderRadius={50}
+            boxSize="25px"
+          />
+        )}
+        <Text color="grey">{clientConfig?.hostname || 'Unknown'}</Text>
+      </HStack>
+    </Stack>
   )
 }

components/Headers/FlowHeader.js

@@ -1,41 +1,12 @@
-import styled from 'styled-components'
-
-const AppHeader = styled.div`
-  margin-bottom: 2rem;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-between;
-  flex-wrap: wrap;
-`
-
-const AppLogoWrapper = styled.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  flex-wrap: wrap;
-  margin-bottom: 8px;
-`
-
-const AppLogo = styled.img`
-  height: 3.5rem;
-`
-
-const AppTitle = styled.h2`
-  text-align: left;
-  color: #2a2825;
-  font-size: 1.2rem;
-`
+import { Center, Flex, Image, Text } from '@chakra-ui/react'
 
 export default function FlowHeader() {
   return (
-    <AppHeader>
-      <AppLogoWrapper>
-        <AppLogo src="/logo.svg" alt="Flow Logo" />
-      </AppLogoWrapper>
-      <AppTitle>Choose a Provider</AppTitle>
-    </AppHeader>
+    <Center>
+      <Flex flexDirection="column" alignItems="center" marginBottom={4}>
+        <Image src="/logo.svg" alt="Logo" w="140px" h="auto" marginBottom={3} />
+        <Text color="grey">Choose a Provider</Text>
+      </Flex>
+    </Center>
   )
 }

components/Headers/Header.js

@@ -1,12 +1,19 @@
 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 Explainer from '../Explainer'
+import { isTestnet as isTestnetFn } from '../../helpers/networks'
 
 export default function Header() {
-  const { appVersion } = useFCL()
+  const isTestnet = isTestnetFn()
+  const { appConfig, appVersion } = useFCL()
+  const isMissingConfig = !(appConfig?.icon && appConfig?.title)
+  const showDeveloperMessage =
+    isTestnet &&
+    isMissingConfig &&
+    isGreaterThanOrEqualToVersion(appVersion, SUPPORTED_VERSIONS.APP_CONFIG)
   const isAppHeaderSupported = isGreaterThanOrEqualToVersion(
     appVersion,
     SUPPORTED_VERSIONS.APP_CONFIG
@@ -17,7 +24,7 @@ export default function Header() {
       {isAppHeaderSupported ? (
         <>
           <AppHeader />
-          <Explainer />
+          {showDeveloperMessage && <DeveloperMessage />}
         </>
       ) : (
         <FlowHeader />

components/Headers/__tests__/AppHeader.test.js

@@ -8,6 +8,7 @@ describe('Component: AppHeader', () => {
     useFCL.mockImplementation(() => {
       return {
         appConfig: {
+          title: 'Test App',
           icon: 'test.png',
         },
         clientConfig: {
@@ -20,12 +21,16 @@ describe('Component: AppHeader', () => {
     expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('should render the default image in the component if no icon', () => {
+  test('should handle missing info and show unknown if no data', () => {
     useFCL.mockImplementation(() => {
       return {
         appConfig: {
+          title: null,
           icon: null,
         },
+        clientConfig: {
+          hostname: null,
+        },
       }
     })