Rework for upload to Swarm

README.md

@@ -1,5 +1,5 @@
-### Starting blockpaste
-`yarn start:blockpaste`
+### Starting Swarm Bin
+`yarn start:swarmbin`
 
 ### Start playground
 `yarn start:playground`

config/webpack.config.dev.js

@@ -5,7 +5,7 @@ const path = require('path');
 const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
-const CopyWebpackPlugin = require('copy-webpack-plugin');
+const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
 const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
 const eslintFormatter = require('react-dev-utils/eslintFormatter');
@@ -249,10 +249,7 @@ module.exports = {
     // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
     // You can remove this if you don't use Moment.js:
     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
-    new CopyWebpackPlugin([{
-      from: 'node_modules/monaco-editor/min/vs',
-      to: 'vs',
-    }]),
+    new MonacoWebpackPlugin(),
   ],
   // Some libraries import Node modules but don't use them in the browser.
   // Tell Webpack to provide empty mocks for them so importing them works.

config/webpack.config.prod.js

@@ -3,7 +3,7 @@
 const autoprefixer = require('autoprefixer');
 const path = require('path');
 const webpack = require('webpack');
-const CopyWebpackPlugin = require('copy-webpack-plugin');
+const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const ManifestPlugin = require('webpack-manifest-plugin');
@@ -13,10 +13,10 @@ const eslintFormatter = require('react-dev-utils/eslintFormatter');
 const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 const paths = require('./paths');
 const getClientEnvironment = require('./env');
-
 // Webpack uses `publicPath` to determine where the app is being served from.
 // It requires a trailing slash, or the file assets will get an incorrect path.
-const publicPath = paths.servedPath;
+const publicPath = "https://swarm-gateways.net/bzz:/swarmbin.eth/";
+
 // Some apps do not use client-side routing with pushState.
 // For these, "homepage" can be set to "." to enable relative asset paths.
 const shouldUseRelativeAssetPaths = publicPath === './';
@@ -321,10 +321,7 @@ module.exports = {
     // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
     // You can remove this if you don't use Moment.js:
     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
-    new CopyWebpackPlugin([{
-      from: 'node_modules/monaco-editor/min/vs',
-      to: 'vs',
-    }]),
+    new MonacoWebpackPlugin(),
   ],
   // Some libraries import Node modules but don't use them in the browser.
   // Tell Webpack to provide empty mocks for them so importing them works.

package.json

@@ -1,8 +1,9 @@
 {
-  "name": "eth-sandbox",
+  "name": "swarmbin",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@erebos/swarm": "^0.8.1",
     "autoprefixer": "7.1.1",
     "babel-core": "6.25.0",
     "babel-eslint": "7.2.3",
@@ -31,20 +32,22 @@
     "html-webpack-plugin": "2.29.0",
     "husky": "^0.14.3",
     "jest": "20.0.4",
-    "lint-staged": "^6.0.0",
+    "lint-staged": "^9.0.0",
     "lodash": "^4.17.4",
     "moment": "^2.20.1",
+    "monaco-editor-webpack-plugin": "^1.7.0",
     "object-assign": "4.1.1",
     "office-ui-fabric-react": "^5.37.0",
     "postcss-flexbugs-fixes": "3.0.0",
     "postcss-loader": "2.0.6",
     "prettier": "^1.10.2",
     "promise": "7.1.1",
+    "qs": "^6.7.0",
     "react": "^15.6.1",
     "react-dev-utils": "^3.0.2",
     "react-dom": "^15.6.1",
     "react-error-overlay": "^1.0.9",
-    "react-monaco-editor": "^0.13.0",
+    "react-monaco-editor": "0.26.2",
     "react-panelgroup": "^1.0.5",
     "react-router": "^3.0.2",
     "style-loader": "0.18.2",
@@ -58,18 +61,19 @@
     "whatwg-fetch": "2.0.3"
   },
   "scripts": {
-    "deploy:blockpaste": "node scripts/deploy-blockpaste",
+    "analyze": "source-map-explorer './build/static/js/*.js'",
+    "deploy:swarmbin": "node scripts/deploy-swarmbin",
     "deploy:playground": "node scripts/deploy-playground",
-    "deploy:all": "yarn deploy:blockpaste && yarn deploy:playground && yarn invalidate-cache",
+    "deploy:all": "yarn deploy:swarmbin && yarn deploy:playground && yarn invalidate-cache",
     "invalidate-cache": "node scripts/invalidate-cache",
     "lint": "eslint src",
     "lint:fix": "eslint src --fix",
     "start": "node scripts/start.js",
-    "start:blockpaste": "REACT_APP_ID=blockpaste REACT_APP_ROOT=src/index.blockpaste.js REACT_APP_INDEX_FILE=public/index.blockpaste.html yarn start",
+    "start:swarmbin": "REACT_APP_ID=swarmbin REACT_APP_ROOT=src/index.swarmbin.js REACT_APP_INDEX_FILE=public/index.swarmbin.html yarn start",
     "start:playground": "REACT_APP_ID=playground REACT_APP_ROOT=src/index.playground.js REACT_APP_INDEX_FILE=public/index.playground.html yarn start",
     "precommit": "lint-staged",
     "prettier": "prettier --write src",
-    "build:blockpaste": "REACT_APP_ID=blockpaste REACT_APP_ROOT=src/index.blockpaste.js REACT_APP_INDEX_FILE=public/index.blockpaste.html node scripts/build.js",
+    "build:swarmbin": "REACT_APP_ID=swarmbin REACT_APP_ROOT=src/index.swarmbin.js REACT_APP_INDEX_FILE=public/index.swarmbin.html node scripts/build.js",
     "build:playground": "REACT_APP_ID=playground REACT_APP_ROOT=src/index.playground.js REACT_APP_INDEX_FILE=public/index.playground.html node scripts/build.js",
     "test": "node scripts/test.js --env=jsdom"
   },

public/index.blockpaste.html → public/index.swarmbin.html

@@ -14,8 +14,8 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Blockpaste</title>
-
+    <title>SwarmBin</title>
+    <meta name="description" content="SwarmBin is a simple and secure way to share code snippets and pastes with others." />
     <script>
       (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
       (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

scripts/deploy-blockpaste.js

@@ -1,5 +1,5 @@
 let exec = require('child_process').exec
-let curl = `curl https://app.bitrise.io/app/d69fb12120c710f6/build/start.json --data '{"hook_info":{"type":"bitrise","build_trigger_token":"q04RgLEgC6F0D9GCBF8TyA"},"build_params":{"branch":"master","workflow_id":"deploy-blockpaste"},"triggered_by":"curl"}'`
+let curl = `curl https://app.bitrise.io/app/d69fb12120c710f6/build/start.json --data '{"hook_info":{"type":"bitrise","build_trigger_token":"q04RgLEgC6F0D9GCBF8TyA"},"build_params":{"branch":"master","workflow_id":"deploy-swarmbin"},"triggered_by":"curl"}'`
 
 exec(curl, function (err, stdout, stderr) {
   console.log('## Deployment result:', stdout, err)

src/BlockPaste.js → src/SwarmBin.js

@@ -12,22 +12,24 @@ import {
   encryptPayload,
   getPasteHash,
   generatePasteKey,
+  getPasteKey,
 } from './utils/pasteHelper'
 import { BZZRawGetAsync, BZZRawPostAsync } from './utils/swarm'
 // import { copyToClipboard } from './utils/copyToClipboard'
 import {
-  APP_BLOCKPASTE,
-  USER_OPTIONS_BLOCKPASTE,
-  PERSIST_DATA_BLOCKPASTE,
+  APP_SWARM_BIN,
+  PASTE_SWARM_BIN,
+  USER_OPTIONS_SWARM_BIN,
+  PERSIST_DATA_SWARM_BIN,
 } from './constants/app'
 import _ from 'lodash'
 
-import './BlockPaste.css'
+import './SwarmBin.css'
 import './Playground.css'
 
 const VERSION = 1
 
-class Blockpaste extends Component {
+class SwarmBin extends Component {
   state = {
     content: '',
     description: '',
@@ -38,7 +40,7 @@ class Blockpaste extends Component {
     mode: 'plaintext',
     pastePanelVisible: false,
     persistOn: true,
-    platform: APP_BLOCKPASTE,
+    platform: APP_SWARM_BIN,
     settingsPanelVisible: false,
     options: {
       selectOnLineNumbers: true,
@@ -50,13 +52,13 @@ class Blockpaste extends Component {
   }
 
   componentWillMount() {
-    if (localStorage[USER_OPTIONS_BLOCKPASTE]) {
+    if (localStorage[USER_OPTIONS_SWARM_BIN]) {
       this.setState({
-        options: JSON.parse(localStorage[USER_OPTIONS_BLOCKPASTE]),
+        options: JSON.parse(localStorage[USER_OPTIONS_SWARM_BIN]),
       })
     }
     this.setState({
-      persistOn: !(localStorage[PERSIST_DATA_BLOCKPASTE] === 'false'),
+      persistOn: !(localStorage[PERSIST_DATA_SWARM_BIN] === 'false'),
     })
   }
 
@@ -90,7 +92,7 @@ class Blockpaste extends Component {
     return [
       {
         key: 'title',
-        name: 'BLOCKPASTE',
+        name: 'SwarmBin',
         className: 'brand',
         onClick: () => window.location.replace(config.rootAddress),
       },
@@ -150,14 +152,18 @@ class Blockpaste extends Component {
       const hash = await BZZRawPostAsync(encryptedPayload)
       if (this.state.persistOn) {
         localStorage.setItem(
-          `blockpaste:paste:${createdAt}`,
+          `${PASTE_SWARM_BIN}:${createdAt}`,
           JSON.stringify({
             link: `${hash}#${key}`,
             createdAt,
           })
         )
       }
-      window.location.replace(`${config.rootAddress}/${hash}#${key}`)
+      window.history.replaceState(
+        null,
+        null,
+        `${config.rootAddress}/${hash}#${key}`
+      )
     } catch (err) {
       alert(
         `There was an error saving your snippet'.\nPlease check console logs.`
@@ -169,14 +175,17 @@ class Blockpaste extends Component {
   getData = async hash => {
     try {
       const payload = await BZZRawGetAsync(hash)
-      const decryptedData = decryptPayload(payload)
+      const body = await payload.text()
+      const decryptedData = decryptPayload(body)
 
       const { content, description, filename, mode } = decryptedData
       this.setState({ content, description, filename, mode })
     } catch (err) {
+      console.log(err)
       alert(
         `There was an error accessing path 'bzz:/${hash}'.\nPlease check console logs.`
       )
+      logger('## get data: ', err)
     }
   }
 
@@ -247,14 +256,14 @@ class Blockpaste extends Component {
 
   updateStoredOptions = () => {
     localStorage.setItem(
-      USER_OPTIONS_BLOCKPASTE,
+      USER_OPTIONS_SWARM_BIN,
       JSON.stringify(this.state.options)
     )
   }
 
   onPersistChanged = persistOn => {
     this.setState({ persistOn })
-    localStorage.setItem(PERSIST_DATA_BLOCKPASTE, String(persistOn))
+    localStorage.setItem(PERSIST_DATA_SWARM_BIN, String(persistOn))
   }
 
   render() {
@@ -306,4 +315,4 @@ class Blockpaste extends Component {
   }
 }
 
-export default Blockpaste
+export default SwarmBin

src/common/InfoPanel.js

@@ -10,11 +10,30 @@ class InfoPanel extends Component {
         isOpen={this.props.isOpen}
         type={PanelType.smallFluid}
         onDismiss={this.props.onDismiss}
-        headerText="BLOCKPASTE"
+        headerText=""
         closeButtonAriaLabel="Close"
       >
-        <div style={{ display: 'flex', flexDirection: 'column' }}>
-          <span>BLOCKPASTE, your platform for everything Ethereum.</span>
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            width: '50%',
+            fontSize: '1.25em',
+          }}
+        >
+          <p>
+            <strong>SwarmBin</strong> is a simple and secure way to share code
+            snippets and pastes with others.
+          </p>
+          <p>
+            Data is AES 256-bit encrypted and uploaded to{' '}
+            <a href="https://swarm.ethereum.org/" target="_blank">
+              Swarm
+            </a>. This project is modeled after ZeroBin, originally developed by{' '}
+            <a href="https://github.com/sebsauvage/ZeroBin">
+              Sébastien Sauvage
+            </a>.
+          </p>
           <div>
             <DefaultButton
               style={{ marginTop: 15 }}

src/common/PastePanel.js

@@ -7,18 +7,16 @@ import config from '../config'
 import moment from 'moment'
 
 import {
-  APP_BLOCKPASTE,
-  PASTE_BLOCKPASTE,
+  APP_SWARM_BIN,
+  PASTE_SWARM_BIN,
   PASTE_PLAYGROUND,
 } from '../constants/app'
 import './PastePanel.css'
 
 class PastePanel extends Component {
   getPastes = () => {
     const platfrom =
-      this.props.platform === APP_BLOCKPASTE
-        ? PASTE_BLOCKPASTE
-        : PASTE_PLAYGROUND
+      this.props.platform === APP_SWARM_BIN ? PASTE_SWARM_BIN : PASTE_PLAYGROUND
     let pastes = []
     for (let key in localStorage) {
       if (key.indexOf(platfrom) !== -1) {

src/config/index.js

@@ -1,20 +1,22 @@
-import { APP_BLOCKPASTE, APP_PLAYGROUND } from '../constants/app'
+import { APP_SWARM_BIN, APP_PLAYGROUND } from '../constants/app'
 
-const isBlockpaste = process.env.REACT_APP_ID === APP_BLOCKPASTE
+const isSwarmBin = process.env.REACT_APP_ID === APP_SWARM_BIN
 
 export default {
-  appId: isBlockpaste ? APP_BLOCKPASTE : APP_PLAYGROUND,
-  isBlockpaste,
+  appId: isSwarmBin ? APP_SWARM_BIN : APP_PLAYGROUND,
+  isSwarmBin,
   rootAddress:
     process.env.NODE_ENV === 'production'
-      ? isBlockpaste ? 'https://blockpaste.com' : 'https://play.blockpaste.com'
+      ? isSwarmBin
+        ? 'https://swarm-gateways.net/bzz:/swarmbin.eth'
+        : 'https://play.blockpaste.com'
       : 'http://localhost:3000',
   gethAddress:
     process.env.NODE_ENV === 'production'
       ? 'https://test.bzz.network/geth'
       : 'https://test.bzz.network/geth',
   swarmAddress:
     process.env.NODE_ENV === 'production'
-      ? 'https://test.bzz.network'
-      : 'https://test.bzz.network',
+      ? 'https://swarm-gateways.net'
+      : 'https://swarm-gateways.net',
 }

src/constants/app.js

@@ -1,8 +1,8 @@
-export const APP_BLOCKPASTE = 'blockpaste'
+export const APP_SWARM_BIN = 'swarmbin'
 export const APP_PLAYGROUND = 'playground'
-export const PASTE_BLOCKPASTE = 'blockpaste:paste:'
+export const PASTE_SWARM_BIN = 'swarmbin:paste:'
 export const PASTE_PLAYGROUND = 'playground:paste:'
-export const PERSIST_DATA_BLOCKPASTE = 'blockpaste:persistData'
+export const PERSIST_DATA_SWARM_BIN = 'swarmbin:persistData'
 export const PERSIST_DATA_PLAYGROUND = 'playground:persistData'
-export const USER_OPTIONS_BLOCKPASTE = 'blockpaste:userOptions'
+export const USER_OPTIONS_SWARM_BIN = 'swarmbin:userOptions'
 export const USER_OPTIONS_PLAYGROUND = 'playground:userOptions'

src/index.blockpaste.js → src/index.swarmbin.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import BlockPaste from './BlockPaste'
+import SwarmBin from './SwarmBin'
 
 // Register icons and pull the fonts from the default SharePoint cdn.
 import { initializeIcons } from '@uifabric/icons'
@@ -13,4 +13,4 @@ const logger = (...args) => {
 window.logger = logger
 
 // Render main application
-ReactDOM.render(<BlockPaste />, document.getElementById('root'))
+ReactDOM.render(<SwarmBin />, document.getElementById('root'))