+ >
+ const src: string
+ export default src
+}
+
+declare module 'ipfs-http-client'
diff --git a/src/Layout.module.css b/src/Layout.module.css
new file mode 100644
index 0000000..89cd1e0
--- /dev/null
+++ b/src/Layout.module.css
@@ -0,0 +1,17 @@
+@import './styles/_variables.css';
+
+.app {
+ padding: var(--spacer);
+ background: var(--brand-black);
+ height: 100%;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+}
+
+@media screen and (min-width: 640px) {
+ .app {
+ height: auto;
+ min-height: calc(100vh - (var(--page-frame) * 2) - (var(--spacer) * 2));
+ }
+}
diff --git a/src/Layout.tsx b/src/Layout.tsx
new file mode 100644
index 0000000..3f11597
--- /dev/null
+++ b/src/Layout.tsx
@@ -0,0 +1,26 @@
+import React from 'react'
+import Head from 'next/head'
+import Footer from './components/Footer'
+import styles from './Layout.module.css'
+import { title } from '../site.config'
+
+export default function Layout({
+ children,
+ pageTitle = title
+}: {
+ children: any
+ pageTitle?: string
+}) {
+ return (
+
+
+
{pageTitle}
+
+
+
+ {children}
+
+
+
+ )
+}
diff --git a/src/components/Add.css b/src/components/Add.module.css
similarity index 100%
rename from src/components/Add.css
rename to src/components/Add.module.css
diff --git a/src/components/Add.jsx b/src/components/Add.tsx
similarity index 79%
rename from src/components/Add.jsx
rename to src/components/Add.tsx
index a29ae67..b982048 100644
--- a/src/components/Add.jsx
+++ b/src/components/Add.tsx
@@ -1,15 +1,15 @@
import React, { useState } from 'react'
import { saveToIpfs } from '../ipfs'
-import { ipfsGateway } from '../../config'
+import { ipfsGateway } from '../../site.config'
import Dropzone from './Dropzone'
-import styles from './Add.css'
+import styles from './Add.module.css'
import Spinner from './Spinner'
export default function Add() {
- const [fileHash, setFileHash] = useState(null)
+ const [fileHash, setFileHash] = useState()
const [loading, setLoading] = useState(false)
- const handleCaptureFile = async files => {
+ const handleCaptureFile = async (files: File[]) => {
setLoading(true)
const cid = await saveToIpfs(files)
setFileHash(cid)
diff --git a/src/components/Dropzone.css b/src/components/Dropzone.module.css
similarity index 100%
rename from src/components/Dropzone.css
rename to src/components/Dropzone.module.css
diff --git a/src/components/Dropzone.jsx b/src/components/Dropzone.tsx
similarity index 75%
rename from src/components/Dropzone.jsx
rename to src/components/Dropzone.tsx
index f310ee6..d446121 100644
--- a/src/components/Dropzone.jsx
+++ b/src/components/Dropzone.tsx
@@ -1,15 +1,16 @@
import React, { useCallback } from 'react'
-import PropTypes from 'prop-types'
import { useDropzone } from 'react-dropzone'
-import styles from './Dropzone.css'
+import styles from './Dropzone.module.css'
-Dropzone.propTypes = {
- handleOnDrop: PropTypes.func.isRequired,
- disabled: PropTypes.bool,
- multiple: PropTypes.bool
-}
-
-export default function Dropzone({ handleOnDrop, disabled, multiple }) {
+export default function Dropzone({
+ handleOnDrop,
+ disabled,
+ multiple
+}: {
+ handleOnDrop(files: File[]): void
+ disabled?: boolean
+ multiple?: boolean
+}) {
const onDrop = useCallback(acceptedFiles => handleOnDrop(acceptedFiles), [
handleOnDrop
])
diff --git a/src/components/Footer.css b/src/components/Footer.module.css
similarity index 100%
rename from src/components/Footer.css
rename to src/components/Footer.module.css
diff --git a/src/components/Footer.jsx b/src/components/Footer.tsx
similarity index 85%
rename from src/components/Footer.jsx
rename to src/components/Footer.tsx
index d60901a..e936388 100644
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.tsx
@@ -1,6 +1,6 @@
import React from 'react'
-import { links } from '../../config'
-import styles from './Footer.css'
+import { links } from '../../site.config'
+import styles from './Footer.module.css'
export default function Footer() {
const year = new Date().getFullYear()
diff --git a/src/components/Spinner.css b/src/components/Spinner.module.css
similarity index 100%
rename from src/components/Spinner.css
rename to src/components/Spinner.module.css
diff --git a/src/components/Spinner.jsx b/src/components/Spinner.tsx
similarity index 72%
rename from src/components/Spinner.jsx
rename to src/components/Spinner.tsx
index 450fa1b..db98922 100644
--- a/src/components/Spinner.jsx
+++ b/src/components/Spinner.tsx
@@ -1,5 +1,5 @@
import React from 'react'
-import styles from './Spinner.css'
+import styles from './Spinner.module.css'
export default function Spinner() {
return
diff --git a/src/ipfs.js b/src/ipfs.ts
similarity index 81%
rename from src/ipfs.js
rename to src/ipfs.ts
index 0004735..053a56f 100644
--- a/src/ipfs.js
+++ b/src/ipfs.ts
@@ -1,7 +1,7 @@
import ipfsClient from 'ipfs-http-client'
-import { ipfsNodeUri } from '../config'
+import { ipfsNodeUri } from '../site.config'
-export async function saveToIpfs(files) {
+export async function saveToIpfs(files: File[]) {
const { hostname, port, protocol } = new URL(ipfsNodeUri)
const ipfsConfig = {
@@ -20,7 +20,7 @@ export async function saveToIpfs(files) {
}
const options = {
wrapWithDirectory: true,
- progress: prog => console.log(`received: ${prog}`)
+ progress: (prog: number) => console.log(`received: ${prog}`)
}
try {
diff --git a/src/pages/index.js b/src/pages/index.js
deleted file mode 100644
index ef37abe..0000000
--- a/src/pages/index.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react'
-import Head from 'next/head'
-
-import '@oceanprotocol/typographies/css/ocean-typo.css'
-import '../styles/global.css'
-import styles from './index.css'
-
-import Add from '../components/Add'
-import Logo from '@oceanprotocol/art/logo/logo-white.svg'
-import { title, description } from '../../config'
-import Footer from '../components/Footer'
-
-const Home = () => (
-
-
-
Ocean Protocol 💖 IPFS
-
-
-
-
-
-
-
-)
-
-export default Home
diff --git a/src/pages/index.css b/src/pages/index.module.css
similarity index 54%
rename from src/pages/index.css
rename to src/pages/index.module.css
index c691bc5..54ed679 100644
--- a/src/pages/index.css
+++ b/src/pages/index.module.css
@@ -1,38 +1,22 @@
@import '../styles/_variables.css';
-.app {
- padding: var(--spacer);
- background: var(--brand-black);
- height: 100%;
- display: flex;
- flex-wrap: wrap;
- justify-content: center;
-}
-
-@media screen and (min-width: 640px) {
- .app {
- height: auto;
- min-height: calc(100vh - (var(--page-frame) * 2) - (var(--spacer) * 2));
- }
-}
-
.header {
width: 100%;
margin-top: var(--spacer);
}
-.appTitle {
+.title {
margin-top: var(--spacer);
font-size: var(--font-size-h2);
}
@media screen and (min-width: 640px) {
- .appTitle {
+ .title {
font-size: var(--font-size-h1);
}
}
-.appDescription {
+.description {
font-size: var(--font-size-large);
color: var(--brand-grey-lighter);
max-width: 40rem;
@@ -40,7 +24,7 @@
margin-right: auto;
}
-.logo {
+.header svg {
width: 80px;
height: 80px;
}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
new file mode 100644
index 0000000..04e05d6
--- /dev/null
+++ b/src/pages/index.tsx
@@ -0,0 +1,27 @@
+import React from 'react'
+
+import '@oceanprotocol/typographies/css/ocean-typo.css'
+import '../styles/global.css'
+
+import Add from '../components/Add'
+import Logo from '@oceanprotocol/art/logo/logo-white.svg'
+import { title, description } from '../../site.config'
+import styles from './index.module.css'
+
+import Layout from '../Layout'
+
+const Home = () => (
+
+
+
+
+)
+
+export default Home
diff --git a/src/styles/global.css b/src/styles/global.css
index 3541c67..4b29059 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -2,7 +2,7 @@
html,
body,
-#root {
+#__next {
height: 100%;
max-height: calc(100vh - (var(--page-frame) * 2));
}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..42c842c
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,25 @@
+{
+ "compilerOptions": {
+ "allowJs": true,
+ "allowSyntheticDefaultImports": true,
+ "jsx": "preserve",
+ "lib": ["dom", "es2017"],
+ "module": "esnext",
+ "moduleResolution": "node",
+ "noEmit": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "preserveConstEnums": true,
+ "removeComments": false,
+ "skipLibCheck": true,
+ "sourceMap": true,
+ "strict": true,
+ "target": "esnext",
+ "forceConsistentCasingInFileNames": true,
+ "esModuleInterop": true,
+ "resolveJsonModule": true,
+ "isolatedModules": true
+ },
+ "exclude": ["node_modules"],
+ "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
+}