Ocean Protocol 💖 IPFS

+} diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..8edb07c --- /dev/null +++ b/src/index.html @@ -0,0 +1,13 @@ + + + + + + + Ocean Protocol 💖 IPFS + + +

+ + + diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..b3d0515 --- /dev/null +++ b/src/index.js @@ -0,0 +1,5 @@ +import React from 'react' +import ReactDOM from 'react-dom' +import App from './App' + +ReactDOM.render(, document.getElementById('root')) diff --git a/src/ipfs.js b/src/ipfs.js new file mode 100644 index 0000000..0004735 --- /dev/null +++ b/src/ipfs.js @@ -0,0 +1,35 @@ +import ipfsClient from 'ipfs-http-client' +import { ipfsNodeUri } from '../config' + +export async function saveToIpfs(files) { + const { hostname, port, protocol } = new URL(ipfsNodeUri) + + const ipfsConfig = { + protocol: protocol.replace(':', ''), + host: hostname, + port: port || '443' + } + + const ipfs = ipfsClient(ipfsConfig) + + const file = [...files][0] + let ipfsId + const fileDetails = { + path: file.name, + content: file + } + const options = { + wrapWithDirectory: true, + progress: prog => console.log(`received: ${prog}`) + } + + try { + const response = await ipfs.add(fileDetails, options) + + // CID of wrapping directory is returned last + ipfsId = `${response[response.length - 1].hash}/${fileDetails.path}` + return ipfsId + } catch (error) { + console.error(error.message) + } +} diff --git a/src/styles/_variables.css b/src/styles/_variables.css new file mode 100644 index 0000000..1067ee2 --- /dev/null +++ b/src/styles/_variables.css @@ -0,0 +1,51 @@ +:root { + --brand-white: #fff; + --brand-black: #141414; + --brand-pink: #ff4092; + --brand-purple: #7b1173; + --brand-violet: #e000cf; + --brand-blue: #11597b; + + --brand-grey: #41474e; + --brand-grey-light: #8b98a9; + --brand-grey-dark: #303030; + --brand-grey-lighter: #e2e2e2; + + --green: #5fb359; + --red: #d80606; + --orange: #b35f36; + --yellow: #eac146; + + --font-family-base: 'Sharp Sans', -apple-system, BlinkMacSystemFont, + 'Segoe UI', Helvetica, Arial, sans-serif; + --font-family-title: 'Sharp Sans Display', -apple-system, BlinkMacSystemFont, + 'Segoe UI', Helvetica, Arial, sans-serif; + --font-family-monospace: 'Fira Code', 'Fira Mono', Menlo, Monaco, Consolas, + 'Courier New', monospace; + + --font-size-root: 16px; + --font-size-base: 1rem; + --font-size-large: 1.2rem; + --font-size-small: 0.85rem; + --font-size-mini: 0.65rem; + --font-size-text: $font-size-base; + --font-size-label: $font-size-base; + --font-size-title: 1.4rem; + --font-size-h1: 3rem; + --font-size-h2: 1.7rem; + --font-size-h3: 1.4rem; + --font-size-h4: $font-size-large; + --font-size-h5: 1.1rem; + --font-weight-base: 500; + --font-weight-bold: 600; + --line-height: 1.6; + + --spacer: 2rem; + --page-frame: 0.75rem; + + --break-point--small: 640px; + --break-point--medium: 860px; + --break-point--large: 1140px; + --break-point--huge: 1400px; + --border-radius: 0.2rem; +} diff --git a/src/styles/global.css b/src/styles/global.css new file mode 100644 index 0000000..530846a --- /dev/null +++ b/src/styles/global.css @@ -0,0 +1,90 @@ +@import '../../node_modules/@oceanprotocol/typographies/css/ocean-typo.css'; +@import '_variables.css'; + +html, +body, +#root { + height: 100%; + max-height: calc(100vh - (var(--page-frame) * 2)); +} + +html { + height: 100%; + font-size: var(--font-size-root); +} + +body { + color: var(--brand-grey-light); + font-size: var(--font-size-base); + font-family: var(--font-family-base); + font-weight: var(--font-weight-base); + line-height: var(--line-height); + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + position: relative; + margin: 0; + text-align: center; +} + +@media screen and (min-width: 640px) { + body { + padding: var(--page-frame); + } +} + +a { + text-decoration: none; + color: var(--brand-pink); + transition: 0.2s ease-out; +} + +p { + margin: 0; + margin-bottom: calc(var(--spacer) / var(--line-height)); +} + +h1, +h2, +h3, +h4, +h5 { + font-family: var(--font-family-title); + color: var(--brand-white); + line-height: 1.2; + font-weight: var(--font-weight-bold); +} + +h1 { + font-size: var(--font-size-h1); +} + +h2 { + font-size: var(--font-size-h2); +} + +h3 { + font-size: var(--font-size-h3); +} + +h4 { + font-size: var(--font-size-h4); +} + +h5 { + font-size: var(--font-size-h5); +} + +figure, +img, +svg, +video, +audio, +embed, +canvas, +picture { + max-width: 100%; + height: auto; + margin: 0 auto; + display: block; +} diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 0000000..3eedeb6 --- /dev/null +++ b/webpack.config.js @@ -0,0 +1,68 @@ +const path = require('path') +const MiniCssExtractPlugin = require('mini-css-extract-plugin') +const CopyPlugin = require('copy-webpack-plugin') + +const defaultInclude = [path.resolve(__dirname, 'src')] +const isDevelopment = process.env.NODE_ENV !== 'production' + +module.exports = { + mode: isDevelopment ? 'development' : 'production', + entry: path.resolve(__dirname, 'src', 'index.js'), + output: { + path: path.resolve(__dirname, 'dist'), + filename: 'bundle.js' + }, + module: { + rules: [ + { + test: /\.(js|jsx)$/, + include: defaultInclude, + use: [ + { + loader: 'babel-loader', + options: { + presets: ['@babel/preset-env', '@babel/preset-react'], + plugins: ['@babel/plugin-proposal-class-properties'] + } + } + ] + }, + { + test: /\.css$/, + use: ['style-loader', 'css-loader'], + include: defaultInclude + }, + { + test: /\.(jpe?g|png|gif)$/, + use: ['file-loader?name=img/[name]__[hash:base64:5].[ext]'], + include: defaultInclude + }, + { + test: /\.svg$/, + use: [ + { + loader: '@svgr/webpack', + options: { + icon: true + } + } + ] + } + ] + }, + resolve: { + extensions: ['*', '.js', '.jsx'] + }, + node: { + fs: 'empty', + net: 'empty', + tls: 'empty' + }, + plugins: [ + new MiniCssExtractPlugin({ + filename: isDevelopment ? '[name].css' : '[name].[hash].css', + chunkFilename: isDevelopment ? '[id].css' : '[id].[hash].css' + }), + new CopyPlugin([{ from: './src/index.html', to: './', flatten: true }]) + ] +}