oceanprotocol/market
1
0
Fork 0
mirror of https://github.com/oceanprotocol/market.git synced 2024-12-02 05:57:29 +01:00
Code Releases Activity

add providers with wrapRootElement

Browse Source
This commit is contained in:
Matthias Kretschmann 2020-07-01 18:57:10 +02:00
parent ff949c6a67
commit 6f711db290
Signed by: m
GPG Key ID: 606EEEF3C479A91F
6 changed files with 47 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
gatsby-browser.js
View File

@ -1,5 +1,8 @@
import wrapPageElementWithStyles from './src/helpers/wrapPageElement' import wrapPageElementWithStyles from './src/helpers/wrapPageElement'
import wrapRootElementWithProviders from './src/helpers/wrapRootElement'
export const wrapPageElement = wrapPageElementWithStyles export const wrapPageElement = wrapPageElementWithStyles
export const wrapRootElement = wrapRootElementWithProviders
// IntersectionObserver polyfill for gatsby-image (Safari, IE) // IntersectionObserver polyfill for gatsby-image (Safari, IE)
if (typeof window.IntersectionObserver === 'undefined') { if (typeof window.IntersectionObserver === 'undefined') {

3
gatsby-ssr.js
View File

@ -1,2 +1,5 @@
import wrapPageElementWithStyles from './src/helpers/wrapPageElement' import wrapPageElementWithStyles from './src/helpers/wrapPageElement'
import wrapRootElementWithProviders from './src/helpers/wrapRootElement'
export const wrapPageElement = wrapPageElementWithStyles export const wrapPageElement = wrapPageElementWithStyles
export const wrapRootElement = wrapRootElementWithProviders

38
src/components/Layout.tsx
View File

@ -5,8 +5,6 @@ import Footer from './organisms/Footer'
import PageHeader from './molecules/PageHeader' import PageHeader from './molecules/PageHeader'
import styles from './Layout.module.css' import styles from './Layout.module.css'
import Seo from './atoms/Seo' import Seo from './atoms/Seo'
import { Web3Provider, OceanProvider, Config } from '@oceanprotocol/react'
import { config } from '../config/ocean'
export interface LayoutProps { export interface LayoutProps {
children: ReactNode children: ReactNode
@ -24,27 +22,23 @@ export default function Layout({
noPageHeader noPageHeader
}: LayoutProps): ReactElement { }: LayoutProps): ReactElement {
return ( return (
<Web3Provider> <div className={styles.app}>
<OceanProvider config={config as Config}> <Helmet>
<div className={styles.app}> <link rel="icon" href="/icons/icon-96x96.png" />
<Helmet> <link rel="apple-touch-icon" href="icons/icon-256x256.png" />
<link rel="icon" href="/icons/icon-96x96.png" /> <meta name="theme-color" content="#ca2935" />
<link rel="apple-touch-icon" href="icons/icon-256x256.png" /> </Helmet>
<meta name="theme-color" content="#ca2935" />
</Helmet>
<Seo title={title} description={description} uri={uri} /> <Seo title={title} description={description} uri={uri} />
<Header /> <Header />
<main className={styles.main}> <main className={styles.main}>
{title && !noPageHeader && ( {title && !noPageHeader && (
<PageHeader title={title} description={description} /> <PageHeader title={title} description={description} />
)} )}
{children} {children}
</main> </main>
<Footer /> <Footer />
</div> </div>
</OceanProvider>
</Web3Provider>
) )
} }

9
src/components/organisms/AssetList.tsx
View File

@ -6,6 +6,7 @@ import Pagination from '../molecules/Pagination'
import { updateQueryStringParameter } from '../../utils' import { updateQueryStringParameter } from '../../utils'
import styles from './AssetList.module.css' import styles from './AssetList.module.css'
import { MetaDataMarket } from '../../@types/MetaData' import { MetaDataMarket } from '../../@types/MetaData'
import { DDO } from '@oceanprotocol/squid'
declare type AssetListProps = { declare type AssetListProps = {
queryResult: QueryResult queryResult: QueryResult
@ -38,10 +39,10 @@ const AssetList: React.FC<AssetListProps> = ({ queryResult }) => {
<> <>
<div className={styles.assetList}> <div className={styles.assetList}>
{queryResult.results && {queryResult.results &&
queryResult.results.map((ddo) => { queryResult.results.map((ddo: DDO) => {
const { attributes }: MetaDataMarket = ddo.findServiceByType( const { attributes }: MetaDataMarket = new DDO(
'metadata' ddo
) ).findServiceByType('metadata')
return ( return (
<AssetTeaser <AssetTeaser

8
src/helpers/wrapPageElement.tsx
View File

@ -1,8 +1,10 @@
import React, { ReactElement } from 'react' import React, { ReactElement } from 'react'
import Styles from '../global/Styles' import Styles from '../global/Styles'
const wrapPageElement = ({ element }: { element: ReactElement }) => ( const wrapPageElement = ({
<Styles>{element}</Styles> element
) }: {
element: ReactElement
}): ReactElement => <Styles>{element}</Styles>
export default wrapPageElement export default wrapPageElement

15
src/helpers/wrapRootElement.tsx Normal file
View File

@ -0,0 +1,15 @@
import React, { ReactElement } from 'react'
import { Web3Provider, OceanProvider, Config } from '@oceanprotocol/react'
import { config } from '../config/ocean'
const wrapRootElement = ({
element
}: {
element: ReactElement
}): ReactElement => (
<Web3Provider>
<OceanProvider config={config as Config}>{element}</OceanProvider>
</Web3Provider>
)
export default wrapRootElement