├── .gitignore
├── public
    ├── avatar.png
    ├── favicon.ico
    ├── unknown.png
    ├── bitpicpreview.png
    ├── favicon-16x16.png
    ├── favicon-32x32.png
    ├── apple-touch-icon.png
    ├── android-chrome-192x192.png
    ├── android-chrome-512x512.png
    ├── index.html
    ├── show.ejs
    ├── about.html
    └── upload.html
├── package.json
├── README.md
├── planarium.js
└── planaria.js


/.gitignore:
--------------------------------------------------------------------------------
1 | .env
2 | tape.txt
3 | chain
4 | files
5 | db
6 | node_modules
7 | 


--------------------------------------------------------------------------------
/public/avatar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/interplanaria/gridbitpic/HEAD/public/avatar.png


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/interplanaria/gridbitpic/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/unknown.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/interplanaria/gridbitpic/HEAD/public/unknown.png


--------------------------------------------------------------------------------
/public/bitpicpreview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/interplanaria/gridbitpic/HEAD/public/bitpicpreview.png


--------------------------------------------------------------------------------
/public/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/interplanaria/gridbitpic/HEAD/public/favicon-16x16.png


--------------------------------------------------------------------------------
/public/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/interplanaria/gridbitpic/HEAD/public/favicon-32x32.png


--------------------------------------------------------------------------------
/public/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/interplanaria/gridbitpic/HEAD/public/apple-touch-icon.png


--------------------------------------------------------------------------------
/public/android-chrome-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/interplanaria/gridbitpic/HEAD/public/android-chrome-192x192.png


--------------------------------------------------------------------------------
/public/android-chrome-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/interplanaria/gridbitpic/HEAD/public/android-chrome-512x512.png


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "gridbitpic",
 3 |   "version": "0.0.1",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "author": "",
10 |   "license": "ISC",
11 |   "dependencies": {
12 |     "bitpic": "0.0.2",
13 |     "bitquery": "^0.3.138",
14 |     "cors": "^2.8.5",
15 |     "ejs": "^3.0.1",
16 |     "express": "^4.17.1",
17 |     "gridplanaria": "0.1.9",
18 |     "mingo": "^2.4.0",
19 |     "neonplanaria": "0.0.41"
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # bitpic
 2 | 
 3 | > Your own avatar on bitcoin, forever.
 4 | 
 5 | ![bitpic](public/avatar.png)
 6 | 
 7 | bitpic is a protocol for hosting and using Paymail avatars on the Bitcoin blockchain.
 8 | 
 9 | **You can think of it as [Gravatar](https://en.gravatar.com/), but for Bitcoin.**
10 | 
11 | - Instead of using a normal email address, Bitpic uses [Paymail](https://bsvalias.org/) address.
12 | - Instead of storing the imagess and the image database on a proprietary server, it stores it on the Bitcoin blockchain.
13 | - The images are 100% stored on the Bitcoin blockchain, signed by Paymail user identity public key. Images signed with invalid signature are not indexed.
14 | 
15 | Learn more about how it works here: [How Bitpic Works](https://bitpic.network/about)
16 | 
17 | # Install
18 | 
19 | ## 1. Install Bitcoin
20 | 
21 | Download Bitcoin node. 
22 | 
23 | [Download Bitcoin](https://github.com/bitcoin-sv/bitcoin-sv/releases)
24 | 
25 | ## 1. Install Docker
26 | 
27 | Bitpic uses Docker. Install Docker first.
28 | 
29 | [Install Docker](https://docs.docker.com/v17.09/engine/installation/#supported-platforms)
30 | 
31 | ## 2. Clone this repository
32 | 
33 | ```
34 | git clone https://github.com/interplanaria/bitpic.git
35 | ```
36 | 
37 | # Usage
38 | 
39 | ## 1. Run crawler
40 | 
41 | The [gridplanaria.js](gridplanaria.js) file is the bitcoin crawler.
42 | 
43 | ```
44 | node gridplanaria
45 | ```
46 | 
47 | You may want to run it in the background by using [pm2](https://pm2.keymetrics.io/) or similar ways.
48 | 
49 | 
50 | ## 2. Run the web app + api
51 | 
52 | The [planarium.js](planarium.js) file is the user facing website and api endpoint. 
53 | 
54 | This file powers everything you see at [https://bitpic.network](https://bitpic.network) and [https://bitpic.network/query](https://bitpic.network/query).
55 | 
56 | ```
57 | node planarium
58 | ```
59 | 
60 | Again, you may want to run it in the background by using [pm2](https://pm2.keymetrics.io/) or similar ways.
61 | 


--------------------------------------------------------------------------------
/planarium.js:
--------------------------------------------------------------------------------
 1 | const { planarium, planaria } = require('neonplanaria')
 2 | const bitquery = require('bitquery')
 3 | const express = require('express')
 4 | const fs = require('fs')
 5 | const ejs = require('ejs')
 6 | const cors = require('cors')
 7 | const id = "bitpic"
 8 | var template;
 9 | fs.readFile("public/show.ejs", "utf-8", (err, str) => {
10 |   console.log("str = ", str)
11 |   template = ejs.compile(str);
12 | })
13 | planarium.start({
14 |   name: "bitpic",
15 |   port: 3004,
16 |   onstart: async function() {
17 |     let db = await bitquery.init({ url: "mongodb://localhost:27017", address: id });
18 |     return { db: db };
19 |   },
20 |   onquery: function(e) {
21 |     let code = Buffer.from(e.query, 'base64').toString()
22 |     let req = JSON.parse(code)
23 |     if (req.q && req.q.find) {
24 |       e.core.db.read(id, req).then(function(result) {
25 |         e.res.json(result)
26 |       })
27 |     } else {
28 |       e.res.json([])
29 |     }
30 |   },
31 |   custom: function (e) {
32 |     e.app.use(express.static('public'))
33 |     e.app.set('view engine', 'ejs');
34 |     e.app.use(cors())
35 |     e.app.get('/', (req, res) => {
36 |       res.sendFile(process.cwd() + "/public/index.html")
37 |     })
38 |     e.app.get('/about', (req, res) => {
39 |       res.sendFile(process.cwd() + "/public/about.html")
40 |     })
41 |     e.app.get('/upload', (req, res) => {
42 |       res.sendFile(process.cwd() + "/public/upload.html")
43 |     })
44 |     e.app.get('/me/:paymail', (req, res) => {
45 |       // user avatar landing page
46 |       res.set('Content-Type', 'text/html');
47 |       console.log(req.url)
48 |       let url = req.originalUrl
49 |       let r = template({
50 |         paymail: req.params.paymail,
51 |       })
52 |       res.send(Buffer.from(r))
53 |     })
54 |     e.app.get('/u/:paymail', (req, res) => {
55 |       // avatar serve
56 |       res.setHeader("Content-Type","image/jpeg");
57 |       let filename = process.cwd() + "/files/" + req.params.paymail
58 |       fs.access(filename, (err) => {
59 |         if (err) {
60 |           if (req.query.d) {
61 |             res.redirect(req.query.d)
62 |             return;
63 |           } else {
64 |             filename = process.cwd() + "/public/unknown.png"
65 |           }
66 |         }
67 |         let filestream = fs.createReadStream(filename)
68 |         filestream.on("error", function(e) {
69 |           res.status(500).send(e.message);
70 |         });
71 |         filestream.pipe(res);
72 |       })
73 |     })
74 |     e.app.get('/exists/:paymail', (req, res) => {
75 |       // 'exists'
76 |       let filename = process.cwd() + "/files/" + req.params.paymail
77 |       fs.access(filename, (err) => {
78 |         if (err) {
79 |           res.send("0")
80 |         } else {
81 |           res.send("1")
82 |         }
83 |       })
84 |     })
85 |   },
86 | })
87 | 


--------------------------------------------------------------------------------
/planaria.js:
--------------------------------------------------------------------------------
  1 | const Planaria = require('gridplanaria')
  2 | const MongoClient = require('mongodb')
  3 | const mingo = require('mingo')
  4 | const path = require('path')
  5 | const bitpic = require('bitpic')
  6 | const fs = require('fs')
  7 | var db;
  8 | const save = function(tx) {
  9 |   let hash = tx.tx.h;
 10 |   let ps = tx.out.map(function(out) {
 11 |     return new Promise(function(resolve, reject) {
 12 |       let buf = null
 13 |       let content
 14 |       if (out.tape.length > 2) {
 15 |         if (out.tape[1].cell[1].lb && typeof out.tape[1].cell[1].lb === 'string') {
 16 |           buf = Buffer.from(out.tape[1].cell[1].lb, 'base64');
 17 |         } else if (out.tape[1].cell[1].b && typeof out.tape[1].cell[1].b === 'string') {
 18 |           buf = Buffer.from(out.tape[1].cell[1].b, 'base64');
 19 |         }
 20 |         fs.writeFile(process.cwd() + '/files/' + out.tape[2].cell[1].s, buf, function(er) {
 21 |           if (er) {
 22 |             console.log("Error = ", er)
 23 |             reject()
 24 |           } else {
 25 |             resolve(out.tape[2].cell[1].s)
 26 |           }
 27 |         })
 28 |       } else {
 29 |         resolve(null)
 30 |       }
 31 |     })
 32 |   })
 33 |   return Promise.all(ps)
 34 | }
 35 | const connect = function(cb) {
 36 |   MongoClient.connect("mongodb://localhost:27017", {useNewUrlParser: true}, function(err, client) {
 37 |     if (err) {
 38 |       console.log("retrying...")
 39 |       setTimeout(function() {
 40 |         connect(cb);
 41 |       }, 1000)
 42 |     } else {
 43 |       let id = "bitpic"
 44 |       db = client.db(id)
 45 |       cb();
 46 |     }
 47 |   })
 48 | }
 49 | const planaria = new Planaria();
 50 | var _filter = new mingo.Query({
 51 |   "out.tape.cell.s": "18pAqbYqhzErT6Zk3a5dwxHtB9icv8jH2p"
 52 | })
 53 | planaria.start({
 54 |   filter: {
 55 |     //"from": 609000,
 56 |     "from": 609341,
 57 |     "host": {
 58 |       rpc: { user: "root", pass: "bitcoin" }
 59 |     },
 60 |     "l": {
 61 |       filter: (e) => {
 62 |         let matched = (
 63 |           e.out[0].tape.length > 2 &&
 64 |           e.out[0].tape[2] &&
 65 |           e.out[0].tape[2].cell[0] &&
 66 |           e.out[0].tape[2].cell[0].s === "18pAqbYqhzErT6Zk3a5dwxHtB9icv8jH2p" ) ||
 67 |           (
 68 |             e.out.length > 1 &&
 69 |             e.out[1].tape.length > 2 &&
 70 |             e.out[1].tape[2] &&
 71 |             e.out[1].tape[2].cell[0] &&
 72 |             e.out[1].tape[2].cell[0].s === "18pAqbYqhzErT6Zk3a5dwxHtB9icv8jH2p"
 73 |           )
 74 |         if (matched) console.log("Matched", JSON.stringify(e,null,2))
 75 |         return matched
 76 |       }
 77 |     }
 78 |   },
 79 |   onmempool: async function(e) {
 80 |     console.log("E = ", e)
 81 |     let valid = await bitpic.verify(e.tx, { format: "bob" })
 82 |     if (valid) {
 83 |       let paymails = await save(e.tx)
 84 |       let paymail = paymails.filter((p) => {
 85 |         return p
 86 |       })
 87 |       console.log("delete u")
 88 |       try {
 89 |         await db.collection("u").deleteMany({
 90 |           "out.tape.cell.s": {
 91 |             "$in": paymail
 92 |           }
 93 |         })
 94 |         console.log("delete c")
 95 |         await db.collection("c").deleteMany({
 96 |           "out.tape.cell.s": {
 97 |             "$in": paymail
 98 |           }
 99 |         })
100 |         console.log("insert u", e.tx)
101 |         await db.collection("u").insertMany([e.tx])
102 |         console.log("Inserted u")
103 |       } catch (e) {
104 |         console.log("Error", e)
105 |       }
106 |     } else {
107 |       console.log("Invalid format", e.tx.tx.h)
108 |     }
109 |   },
110 |   onblock: function(e) {
111 |     console.log("onblock")
112 |     return new Promise((resolve, reject) => {
113 |       let txArrayStream = e.tx(100) // Get a stream of transaction arrays
114 |       console.time("block " + e.header.height)
115 |       txArrayStream.on("data", async (txArray) => {
116 |         txArrayStream.pause();
117 | 
118 |         let invalidTxs = [];
119 |         for(let i=0; i<txArray.length; i++) {
120 |           let valid = await bitpic.verify(txArray[i], { format: "bob" })
121 |           if (valid) {
122 |             let paymails = await save(txArray[i])
123 |             let paymail = paymails.filter((p) => {
124 |               return p
125 |             })
126 |             await db.collection("c").deleteMany({
127 |               "out.tape.cell.s": {
128 |                 "$in": paymail
129 |               }
130 |             })
131 |           } else {
132 |             console.log("Invalid format", txArray[i].tx.h)
133 |             invalidTxs.push(txArray[i].tx.h)
134 |           }
135 |         }
136 |         if (invalidTxs.length > 0) {
137 |           console.log("Filtering invalid txs...", invalidTxs)
138 |           txArray = txArray.filter((tx) => {
139 |             return invalidTxs.includes(tx.tx.h)
140 |           })
141 |         }
142 |         let paymailSet = new Set();
143 |         let dedupTxArray = [];
144 |         for(let i=txArray.length-1; i>=0; i--) {
145 |           let tx = txArray[i];
146 |           let paymail = tx.out[0].tape[2].cell[1].s
147 |           console.log("FOund paymail", paymail)
148 |           if (!paymailSet.has(paymail)) {
149 |             dedupTxArray.push(tx) 
150 |           }
151 |           paymailSet.add(paymail)
152 |         }
153 |         txArray = dedupTxArray.reverse()
154 |         console.log("inserting", txArray.length)
155 |         try {
156 |           await db.collection("c").insertMany(txArray) // insert each batch
157 |         } catch (err) {
158 |           console.log("Error = ", err)
159 |         }
160 |         console.log("inserted")
161 |         txArrayStream.resume();
162 |       })
163 |       .on("end", () => {
164 |         console.log("block End", e.header.height)
165 |         db.collection("u").deleteMany({}).then(() => {
166 |           console.timeEnd("block " + e.header.height)
167 |           resolve()
168 |         })
169 |       })
170 |     })
171 |   },
172 |   onstart: function(e) {
173 |     return new Promise(async function(resolve, reject) {
174 |       if (!e.tape.self.start) {
175 |         await planaria.exec("docker", ["pull", "mongo:4.0.4"])
176 |         await planaria.exec("docker", ["run", "-d", "-p", "27017-27019:27017-27019", "-v", process.cwd() + "/db:/data/db", "mongo:4.0.4"])
177 |       }
178 |       if (!fs.existsSync(process.cwd() + "/files")) {
179 |         fs.mkdirSync(process.cwd() + "/files")
180 |       }
181 |       connect(async () => {
182 |         console.log("creating index")
183 |         await db.collection("c").createIndex({"tx.h": 1}, { unique: true})
184 |         await db.collection("c").createIndex({"blk.i": 1})
185 |         await db.collection("c").createIndex({"out.tape.cell.s": 1})
186 |         await db.collection("u").createIndex({"tx.h": 1}, { unique: true})
187 |         await db.collection("u").createIndex({"out.tape.cell.s": 1})
188 |         console.log("created index")
189 |         if (e.tape.self.start) {
190 |           await db.collection("c").deleteMany({
191 |             "blk.i": { "$gt": e.tape.self.end }
192 |           })
193 |           resolve()
194 |         } else {
195 |           resolve();
196 |         }
197 |       })
198 |     })
199 |   },
200 | })
201 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
  1 | <html>
  2 | <head>
  3 | <meta name="viewport" content="width=device-width, initial-scale=1">
  4 | <meta name="twitter:card" content="summary_large_image" />
  5 | <meta name="twitter:creator" content="@_unwriter" />
  6 | <meta name="twitter:title" content="bitpic" />
  7 | <meta name="twitter:description" content="Your own avatar on bitcoin, forever." />
  8 | <meta name="twitter:image" content="https://bitpic.network/bitpicpreview.png" />
  9 | <meta property="og:url" content="https://bitpic.network" />
 10 | <meta property="og:type"   content="website" />
 11 | <meta property="og:title" content="bitpic" />
 12 | <meta property="og:description" content="Your Avatar, Forever on Bitcoin." />
 13 | <meta property="og:image" content="https://bitpic.network/bitpicpreview.png" />
 14 | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.4/croppie.min.css" integrity="sha256-/n6IXDwJAYIh7aLVfRBdduQfdrab96XZR+YjG42V398=" crossorigin="anonymous" />
 15 | <link href="https://fonts.googleapis.com/css?family=Roboto:400,900&display=swap" rel="stylesheet">
 16 | <style>
 17 | body {
 18 |   overflow-wrap: break-word;
 19 |   word-wrap: break-word;
 20 |   -ms-word-break: break-all;
 21 |   word-break: break-word;
 22 | 
 23 |   text-align: center;
 24 |   margin: 0;
 25 |   /*
 26 |   background: #20232a;
 27 |   */
 28 |   /*
 29 |   background: #003B74;
 30 |   */
 31 |   /*
 32 |   background: #35459E;
 33 |   */
 34 |   font-family: 'Roboto', sans-serif;
 35 | }
 36 | code {
 37 |   overflow-wrap: break-word;
 38 |   word-wrap: break-word;
 39 |   -ms-word-break: break-all;
 40 |   word-break: break-word;
 41 | }
 42 | header {
 43 | /*
 44 |   background: rgba(0,0,0,0.9);
 45 |   */
 46 |   padding: 20px;
 47 |   text-align: center;
 48 |   margin-bottom: 10px;
 49 | }
 50 | header a {
 51 |   text-decoration: none;
 52 |   font-weight: 900;
 53 |   color: rgba(0,0,0,0.8);
 54 |   font-family: 'Roboto', sans-serif;
 55 |   font-size: 30px;
 56 | }
 57 | .btn {
 58 |   background: rgba(0,0,0,0.8);
 59 |   color: white;
 60 |   font-size: 10px;
 61 |   font-weight: 400;
 62 |   padding: 5px 10px;
 63 |   width: 45px;
 64 |   display: inline-block;
 65 |   margin: 10px 0;
 66 |   border-radius: 2px;
 67 |   font-family: Menlo, monaco, Courier;
 68 | }
 69 | .upload {
 70 |   text-transform: uppercase;
 71 |   text-align: center;
 72 |   cursor: pointer;
 73 |   display: block;
 74 |   margin: 0 auto;
 75 |   font-family: Menlo, monaco, Courier;
 76 |   padding: 30px;
 77 |   box-sizing: border-box;
 78 |   font-size: 12px;
 79 |   text-decoration: none;
 80 |   max-width: 800px;
 81 |   color: gray;
 82 |   border: 1px dashed silver;
 83 | }
 84 | .container {
 85 |   color: rgba(0,0,0,0.8);
 86 |   max-width: 800px;
 87 |   margin: 0 auto;
 88 |   box-sizing: border-box;
 89 | }
 90 | .container h3 {
 91 |   text-align: left;
 92 |   padding: 30px 10px 0;
 93 |   margin: 0;
 94 | }
 95 | .item {
 96 |   text-align: left;
 97 |   align-items: center;
 98 |   display: flex;
 99 |   background: rgba(0,0,0,0.02);
100 |   text-decoration: none;
101 |   padding: 10px;
102 |   margin: 5px 0;
103 |   font-size: 14px;
104 |   color: rgba(0,0,0,0.8);
105 | }
106 | .item:hover {
107 |   opacity: 0.7;
108 | }
109 | .item a {
110 |   color: rgba(0,0,0,0.4);
111 | }
112 | .card > * {
113 |   margin: 10px 0;
114 | }
115 | .item img {
116 |   width: 60px;
117 |   margin-right: 20px;
118 |   border-radius: 30px;
119 | }
120 | .small {
121 |   font-size: 14px;
122 |   padding: 10px;
123 |   color: gray;
124 | }
125 | .name {
126 |   font-weight: 900;
127 | }
128 | td {
129 |   font-size: 13px;
130 |   min-width: 30px;
131 |   padding: 0 0 5px 0;
132 | }
133 | .url {
134 |   font-weight: 400;
135 |   color: rgba(0,0,0,0.4);
136 | }
137 | img.avatar {
138 |   width: 80px;
139 |   margin-bottom: 10px;
140 | }
141 | .confirmed.empty, .unconfirmed.empty {
142 |   padding: 20px;
143 |   margin: 10px;
144 |   background: rgba(0,0,0,0.02);
145 | }
146 | .unconfirmed {
147 |   font-size: 12px;
148 |   color: gray;
149 | }
150 | .footer {
151 |   margin-top: 50px;
152 |   background: rgba(0,0,0,0.8);
153 |   color: white;
154 |   padding: 80px;
155 |   font-size: 12px;
156 | }
157 | .footer a {
158 |   color: rgba(255,255,255,0.7);
159 | }
160 | </style>
161 | <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
162 | <script>
163 | document.addEventListener("DOMContentLoaded", () => {
164 |   var query = {
165 |     "v": 3,
166 |     "q": {
167 |       "find": {},
168 |       "project": {
169 |         "out.tape.cell.s": 1, "tx.h": 1
170 |       },
171 |       "sort": {
172 |         "blk.i": -1
173 |       },
174 |       "limit": 100
175 |     }
176 |   }
177 |   var b64 = btoa(JSON.stringify(query));
178 |   var url = document.location.protocol + "//" + document.location.host + "/q/" + b64;
179 | 
180 |   var header = {
181 |     headers: { key: "1KJPjd3p8khnWZTkjhDYnywLB2yE1w5BmU" }
182 |   };
183 | 
184 |   fetch(url, header).then(function(r) {
185 |     return r.json()
186 |   }).then(function(r) {
187 |     if (r.u && r.u.length > 0) {
188 |       document.querySelector(".container .unconfirmed").innerHTML = r.u.map((u) => {
189 |         let username = u.out[0].tape[2].cell[1].s
190 |         let txid = u.tx.h;
191 |         return "<a class='item' href='" + document.location.protocol + "//" + document.location.host + "/me/" + username + "'>" +
192 |           "<img src='" + document.location.protocol + "//" + document.location.host + "/u/" + username + "'>" + 
193 |           "<div class='card'>" + 
194 |             "<div class='name'>" + username + "</div>" +
195 |             "<div class='url'>" + document.location.protocol + "//" + document.location.host + "/u/" + username + "</div>" + 
196 |           "</div>" + 
197 |         "</a>"
198 |       }).join("")
199 |     } else {
200 |       document.querySelector(".container .unconfirmed").innerHTML = "empty"
201 |       document.querySelector(".container .unconfirmed").classList.add("empty")
202 |     }
203 |     document.querySelector(".container .confirmed").innerHTML = r.c.map((u) => {
204 |       let username = u.out[0].tape[2].cell[1].s
205 |       let txid = u.tx.h;
206 |       return "<a class='item' href='" + document.location.protocol + "//" + document.location.host + "/me/" + username + "'>" +
207 |         "<img src='" + document.location.protocol + "//" + document.location.host + "/u/" + username + "'>" + 
208 |         "<div class='card'>" + 
209 |           "<div class='name'>" + username + "</div>" +
210 |           "<div class='url'>" + document.location.protocol + "//" + document.location.host + "/u/" + username + "</div>" + 
211 |         "</div>" + 
212 |       "</a>"
213 |     }).join("")
214 |   })
215 | 
216 | })
217 | </script>
218 | </head>
219 | <body>
220 | <header>
221 |   <a href='/'>
222 |   <img src='/avatar.png' class='avatar'>
223 |   <br>
224 |   bitpic
225 |   </a>
226 |   <div class='small'>Your own avatar on bitcoin, forever.</div>
227 |   <a class='btn' href='/about'>About</a>
228 |   <a class='btn' href='/query/ewogICJ2IjogMywKICAicSI6IHsKICAgICJmaW5kIjoge30sCiAgICAicHJvamVjdCI6IHsKICAgICAgIm91dC50YXBlLmNlbGwucyI6IDEsICJ0eC5oIjogMQogICAgfSwKICAgICJsaW1pdCI6IDEwCiAgfQp9'>API</a>
229 |   <a class='btn' href='https://github.com/interplanaria/gridbitpic'>GitHub</a>
230 |   <a class='btn' href='https://twitter.com/_unwriter'>Twitter</a>
231 | </header>
232 | <a href='/upload' class='upload'><i class="fas fa-upload"></i> click to upload yourself</a>
233 | <div class='container'>
234 |   <h3>Unconfirmed</h3>
235 |   <div class='unconfirmed'></div>
236 |   <h3>Confirmed</h3>
237 |   <div class='confirmed'></div>
238 | </div>
239 | <div class='footer'>
240 |   powered by <a href='https://grid.planaria.network'>grid planaria</a>
241 | </div>
242 | </body>
243 | </html>
244 | 


--------------------------------------------------------------------------------
/public/show.ejs:
--------------------------------------------------------------------------------
  1 | <html>
  2 | <head>
  3 | <meta name="viewport" content="width=device-width, initial-scale=1">
  4 | <meta name="twitter:card" content="summary" />
  5 | <meta name="twitter:title" content="<%=paymail%>'s bitpic" />
  6 | <meta name="twitter:description" content="Your own avatar on bitcoin, forever." />
  7 | <meta name="twitter:image" content="https://bitpic.network/u/<%=paymail%>" />
  8 | <meta property="og:url" content="https://bitpic.network/me/<%=paymail%>" />
  9 | <meta property="og:type"   content="website" />
 10 | <meta property="og:title" content="<%=paymail%>'s bitpic" />
 11 | <meta property="og:description" content="Your Avatar, Forever on Bitcoin." />
 12 | <meta property="og:image" content="https://bitpic.network/u/<%=paymail%>" />
 13 | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.4/croppie.min.css" integrity="sha256-/n6IXDwJAYIh7aLVfRBdduQfdrab96XZR+YjG42V398=" crossorigin="anonymous" />
 14 | <link href="https://fonts.googleapis.com/css?family=Roboto:400,900&display=swap" rel="stylesheet">
 15 | <style>
 16 | body {
 17 |   overflow-wrap: break-word;
 18 |   word-wrap: break-word;
 19 |   -ms-word-break: break-all;
 20 |   word-break: break-word;
 21 | 
 22 |   text-align: center;
 23 |   margin: 0;
 24 |   /*
 25 |   background: #20232a;
 26 |   */
 27 |   /*
 28 |   background: #003B74;
 29 |   */
 30 |   /*
 31 |   background: #35459E;
 32 |   */
 33 |   font-family: 'Roboto', sans-serif;
 34 | }
 35 | code {
 36 |   overflow-wrap: break-word;
 37 |   word-wrap: break-word;
 38 |   -ms-word-break: break-all;
 39 |   word-break: break-word;
 40 | }
 41 | header {
 42 | /*
 43 |   background: rgba(0,0,0,0.9);
 44 |   */
 45 |   padding: 20px;
 46 |   text-align: center;
 47 |   margin-bottom: 10px;
 48 | }
 49 | header a {
 50 |   text-decoration: none;
 51 |   font-weight: 900;
 52 |   color: rgba(0,0,0,0.8);
 53 |   font-family: 'Roboto', sans-serif;
 54 |   font-size: 30px;
 55 | }
 56 | .btn {
 57 |   background: rgba(0,0,0,0.8);
 58 |   color: white;
 59 |   font-size: 11px;
 60 |   font-weight: 400;
 61 |   padding: 5px 10px;
 62 |   width: 70px;
 63 |   display: inline-block;
 64 |   margin: 10px 0;
 65 |   border-radius: 2px;
 66 |   font-family: Menlo, monaco, Courier;
 67 | }
 68 | .upload {
 69 |   text-transform: uppercase;
 70 |   text-align: center;
 71 |   cursor: pointer;
 72 |   display: block;
 73 |   margin: 0 auto;
 74 |   font-family: Menlo, monaco, Courier;
 75 |   padding: 30px;
 76 |   box-sizing: border-box;
 77 |   font-size: 12px;
 78 |   text-decoration: none;
 79 |   max-width: 800px;
 80 |   color: gray;
 81 |   border: 1px dashed silver;
 82 | }
 83 | .container {
 84 |   color: rgba(0,0,0,0.8);
 85 |   max-width: 600px;
 86 |   margin: 0 auto;
 87 |   box-sizing: border-box;
 88 | }
 89 | .container h3 {
 90 |   text-align: left;
 91 |   padding: 30px 10px 0;
 92 |   margin: 0;
 93 | }
 94 | .item {
 95 |   text-align: left;
 96 |   align-items: center;
 97 |   display: flex;
 98 |   background: rgba(0,0,0,0.02);
 99 |   text-decoration: none;
100 |   padding: 10px;
101 |   margin: 10px 0;
102 |   font-size: 14px;
103 |   color: rgba(0,0,0,0.8);
104 | }
105 | .item a {
106 |   color: rgba(0,0,0,0.4);
107 | }
108 | .card > * {
109 |   margin: 10px 0;
110 | }
111 | .item img {
112 |   width: 100px;
113 |   margin-right: 20px;
114 | }
115 | .small {
116 |   font-size: 14px;
117 |   padding: 10px;
118 |   color: gray;
119 | }
120 | .name {
121 |   font-weight: 900;
122 | }
123 | td {
124 |   font-size: 13px;
125 |   min-width: 30px;
126 |   padding: 0 0 5px 0;
127 | }
128 | .url {
129 |   font-weight: 400;
130 |   color: rgba(0,0,0,0.4);
131 | }
132 | img.avatar {
133 |   width: 80px;
134 |   margin-bottom: 10px;
135 | }
136 | .container > * {
137 |   display: block;
138 |   width: 100%;
139 | }
140 | .paymail {
141 |   background: rgba(0,0,0,0.8);
142 |   font-size: 12px;
143 |   padding: 5px;
144 |   color: rgba(255,255,255,0.9);
145 |   text-align: left;
146 |   display: block;
147 |   border: none;
148 |   outline: none;
149 |   flex-grow: 1;
150 | }
151 | .line label {
152 |   padding: 0 5px;
153 |   font-size: 12px;
154 |   color: gold;
155 | }
156 | .line {
157 |   background: rgba(0,0,0,0.8);
158 |   align-items: center;
159 |   display: flex;
160 |   margin: 10px 0 0 0;
161 |   box-sizing: border-box;
162 |   padding: 10px 12px 0;
163 | }
164 | .copy {
165 |   color: black;
166 |   margin: 0;
167 |   border-radius: 0;
168 |   border: 1px solid gold;
169 |   background: gold;
170 | }
171 | #txid {
172 |   color: rgba(0,0,0,0.4);
173 |   font-size: 12px;
174 |   text-align: right;
175 |   overflow-wrap: break-word;
176 |   word-wrap: break-word;
177 |   -ms-word-break: break-all;
178 |   word-break: break-word;
179 |   padding: 0 5px;
180 |   box-sizing: border-box;
181 | }
182 | #share {
183 |   background: gold;
184 |   text-align: left;
185 |   margin-bottom: 50px;
186 | }
187 | #share .subtitle {
188 |   font-size: 12px;
189 |   padding: 10px;
190 | }
191 | #share h2 {
192 |   margin: 0;
193 |   padding: 10px 10px 0;
194 | }
195 | #share .field {
196 |   display: flex;
197 |   padding: 10px;
198 |   box-sizing: border-box;
199 | }
200 | #share .field textarea { 
201 |   flex-grow: 1;
202 |   font-size: 14px;
203 |   padding: 10px;
204 |   outline: none;
205 |   background: rgba(255,255,255,0.3);
206 |   border: none;
207 |   height: 100px;
208 | }
209 | #share .field button {
210 |   margin: 0 !important;
211 |   display: block;
212 |   border: none !important;
213 | }
214 | .hidden {
215 |   display: none !important;
216 | }
217 | .container img {
218 |   border: 12px solid rgba(0,0,0,0.8);
219 |   box-sizing: border-box;
220 | }
221 | .info {
222 |   display: flex;
223 | }
224 | .info a {
225 |   font-size: 12px;
226 |   color: rgba(0,0,0,0.4);
227 | }
228 | .flexible {
229 |   flex-grow: 1;
230 | }
231 | </style>
232 | <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
233 | <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>
234 | <script src="https://unpkg.com/popper.js@1"></script>
235 | <script src="https://unpkg.com/tippy.js@5"></script>
236 | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tippy.js/3.4.1/themes/google.css" integrity="sha256-9mJWDU9w0AFNC+rL6qT40FuwFllwPmAHae2J4iIyzgc=" crossorigin="anonymous" />
237 | <script>
238 | document.addEventListener("DOMContentLoaded", () => {
239 |   document.querySelector(".paymail").value = document.location.protocol + "//" + document.location.host + "/u/<%=paymail%>"
240 |   var clipboard = new ClipboardJS('.copy');
241 |   tippy('#copy', {
242 |     trigger: 'click',
243 |     content: "Copied to clipboard!"
244 |   });
245 | 
246 |   var query = {
247 |     "v": 3,
248 |     "q": {
249 |       "find": {
250 |         "$and": [{
251 |           "out.tape.cell.s": "<%=paymail%>"
252 |         }, {
253 |           "out.tape.cell.s": "18pAqbYqhzErT6Zk3a5dwxHtB9icv8jH2p"
254 |         }]
255 |       },
256 |       "project": {
257 |         "tx.h": 1
258 |       },
259 |       "limit": 10
260 |     }
261 |   }
262 |   console.log("query = ", query)
263 |   var b64 = btoa(JSON.stringify(query));
264 |   var url = document.location.protocol + "//" + document.location.host + "/q/" + b64;
265 | 
266 |   var header = {
267 |     headers: { key: "1KJPjd3p8khnWZTkjhDYnywLB2yE1w5BmU" }
268 |   };
269 | 
270 |   fetch(url, header).then(function(r) {
271 |     return r.json()
272 |   }).then(function(r) {
273 |     console.log('r', r)
274 |     let items = [].concat(r.u ? r.u : []).concat(r.c ? r.c : []);
275 |     let txids = items.map((t) => {
276 |       return t.tx.h
277 |     })
278 |     if (txids.length > 0) {
279 |       let txid = txids[0];
280 |       document.querySelector("#txid").innerHTML = "view transaction"
281 |       document.querySelector("#txid").setAttribute("href", "https://whatsonchain.com/tx/" + txid);
282 |     }
283 |   })
284 |   if (document.location.hash) {
285 |     let h = document.location.hash.slice(1)
286 |     if (h === 'share') {
287 |       let text = "Here's my universal avatar hosted on Bitcoin! " + document.location.protocol + "//" + document.location.host + "/me/<%=paymail%>"
288 |       document.querySelector("#share").classList.remove("hidden")
289 |       document.querySelector("#share textarea").value = text;
290 |       document.querySelector("#share .action").addEventListener("click", (e) => {
291 |         let t = encodeURI(document.querySelector("#share textarea").value)
292 |         window.open("https://twitter.com/intent/tweet?text=" + t)
293 |       })
294 |     }
295 |   }
296 | 
297 | })
298 | </script>
299 | </head>
300 | <body>
301 | <header>
302 |   <a href='/'>
303 |   <img src='/avatar.png' class='avatar'>
304 |   <br>
305 |   bitpic
306 |   </a>
307 |   <div class='small'>Your own avatar on bitcoin, forever.</div>
308 |   <a class='btn' href='/about'>How to Use</a>
309 | </header>
310 | <div class='container'>
311 |   <div id='share' class='hidden'>
312 |     <h2>Success!</h2>
313 |     <div class='subtitle'>Share your bitpic with your friends</div>
314 |     <div class='field'>
315 |       <textarea></textarea>
316 |       <button class='action btn'>
317 |         Share
318 |       </button>
319 |     </div>
320 |   </div>
321 |   <div class='info'>
322 |     <a href='/upload#<%=paymail%>'><i class='fa fa-edit'></i> update</a>
323 |     <div class='flexible'></div>
324 |     <a id='txid' target="_blank"></a>
325 |   </div>
326 |   <div class='line'>
327 |     <label>Image URL:</label>
328 |     <input id='paymail' class='paymail' type='text'>
329 |     <button id='copy' class='copy btn' data-clipboard-target="#paymail">
330 |       copy
331 |     </button>
332 |   </div>
333 |   <img src='/u/<%=paymail%>'>
334 | </div>
335 | </body>
336 | </html>
337 | 


--------------------------------------------------------------------------------
/public/about.html:
--------------------------------------------------------------------------------
  1 | <html>
  2 | <head>
  3 | <meta name="viewport" content="width=device-width, initial-scale=1">
  4 | <meta name="twitter:card" content="summary_large_image" />
  5 | <meta name="twitter:creator" content="@_unwriter" />
  6 | <meta name="twitter:title" content="bitpic" />
  7 | <meta name="twitter:description" content="Your own avatar on bitcoin, forever." />
  8 | <meta name="twitter:image" content="https://bitpic.network/bitpicpreview.png" />
  9 | <meta property="og:url" content="https://bitpic.network/about" />
 10 | <meta property="og:type"   content="website" />
 11 | <meta property="og:title" content="bitpic" />
 12 | <meta property="og:description" content="Your own avatar on bitcoin, forever." />
 13 | <meta property="og:image" content="https://bitpic.network/bitpicpreview.png" />
 14 | <link href="https://fonts.googleapis.com/css?family=Roboto:400,900&display=swap" rel="stylesheet">
 15 | <style>
 16 | body {
 17 |   text-align: center;
 18 |   margin: 0;
 19 |   font-family: 'Roboto', sans-serif;
 20 |   color: rgba(0,0,0,0.7);
 21 | }
 22 | code, a {
 23 |   overflow-wrap: break-word;
 24 |   word-wrap: break-word;
 25 |   -ms-word-break: break-all;
 26 |   word-break: break-word;
 27 | }
 28 | h1, h2, h3 {
 29 |   font-family: 'Roboto', sans-serif;
 30 |   font-weight: 900;
 31 |   color: rgba(0,0,0,0.7);
 32 | }
 33 | h2 {
 34 |   font-size: 30px;
 35 | }
 36 | h3 {
 37 |   font-size: 20px;
 38 | }
 39 | header {
 40 |   padding: 20px;
 41 |   text-align: center;
 42 |   margin-bottom: 10px;
 43 | }
 44 | header a {
 45 |   text-decoration: none;
 46 |   font-weight: 900;
 47 |   color: rgba(0,0,0,0.8);
 48 |   font-family: 'Roboto', sans-serif;
 49 |   font-size: 30px;
 50 | }
 51 | .small {
 52 |   font-size: 14px;
 53 |   padding: 10px;
 54 |   color: gray;
 55 | }
 56 | .container {
 57 |   font-size: 12px;
 58 |   font-family: Menlo, monaco, Courier;
 59 | }
 60 | .container {
 61 |   max-width: 800px;
 62 |   text-align: left;
 63 |   margin: 0 auto;
 64 |   background: rgba(0,0,0,0.03);
 65 |   padding: 20px;
 66 | }
 67 | img.full {
 68 |   width: 100%;
 69 | }
 70 | pre {
 71 |   background: rgba(0,0,0,0.8);
 72 |   color: white;
 73 |   padding: 10px;
 74 | }
 75 | code {
 76 |   background: rgba(0,0,0,0.8);
 77 |   color: white;
 78 |   padding: 0 2px;
 79 | }
 80 | hr {
 81 |   border-top: 1px solid rgba(0,0,0,0.1);
 82 |   border-bottom: none;
 83 |   margin: 50px 0;
 84 |   background: none;
 85 | }
 86 | img.avatar {
 87 |   width: 80px;
 88 |   margin-bottom: 10px;
 89 | }
 90 | img.small {
 91 |   height: 50px;
 92 |   padding: 0;
 93 |   display: block;
 94 |   margin: 10px;
 95 |   border: 1px solid silver;
 96 | }
 97 | img.pic {
 98 |   width: 100px;
 99 |   margin: 10px 0;
100 |   border: 1px solid silver;
101 | }
102 | li {
103 |   margin: 10px 0;
104 | }
105 | </style>
106 | </head>
107 | <body>
108 | <header>
109 |   <a href='/'>
110 |   <img src='/avatar.png' class='avatar'>
111 |   <br>
112 |   bitpic
113 |   </a>
114 |   <div class='small'>Your own avatar on bitcoin, forever.</div>
115 | </header>
116 | <div class='container'>
117 | <h2>What is Bitpic?</h2>
118 | <p>bitpic is a protocol for hosting and using Paymail avatars on the Bitcoin blockchain.</p>
119 | <p><b>You can think of it as <a href='https://en.gravatar.com/'>Gravatar</a>, but for Bitcoin.</b></p>
120 | <ul>
121 |   <li>Instead of using a normal email address, Bitpic uses <a href='https://bsvalias.org/'>Paymail</a> address.</li>
122 |   <li>Instead of storing the imagess and the image database on a proprietary server, it stores it on the Bitcoin blockchain.</li>
123 |   <li>Bitpic is open and distributed. Anyone can run a bitpic node. <a href='https://github.com/interplanaria/gridbitpic'>GitHub</a></li>
124 |   <li>The images are 100% stored on the Bitcoin blockchain, signed by Paymail user identity public key. Images signed with invalid signature are not indexed.</li>
125 | </ul>
126 | <br>
127 | <h3>Step 1. Upload avatar to Bitcoin</h3>
128 | <p>Create a Bitcoin transaction which uploads a signed image using the Bitpic protocol.</p>
129 | <p>
130 | <pre>
131 | OP_0
132 | OP_RETURN
133 | 19HxigV4QyBv3tHpQVcUEQyq1pzZVdoAut
134 |   [FILE Binary]
135 |   image/jpeg
136 |   binary
137 | |
138 | 18pAqbYqhzErT6Zk3a5dwxHtB9icv8jH2p
139 |   [Paymail]
140 |   [Pubkey]
141 |   [Sig]
142 | </pre>
143 | </p>
144 | <br>
145 | <p>Here's an example:</p>
146 | <p><a href='https://bitpic.network/query/ewogICJ2IjogMywKICAicSI6IHsKICAgICJmaW5kIjoge30sCiAgICAicHJvamVjdCI6IHsKICAgICAgIm91dC50YXBlLmNlbGwucyI6IDEKICAgIH0sCiAgICAibGltaXQiOiAxMAogIH0KfQ=='>Bitpic Transaction Explorer</a></p>
147 | <br>
148 | <p>Here's Bitcom Terminal (Bterm) for bitpic:</p>
149 | <p><a href='https://bterm.network/#address=18pAqbYqhzErT6Zk3a5dwxHtB9icv8jH2p'>Bterm</a></p>
150 | <br>
151 | <h3>Step 2. Use</h3>
152 | <p>Once uploaded, you can use the image from anywhere, simply by referencing: <code>https://bitpic.network/u/[Paymail]</code><p>
153 | <p>Here's an example:</p>
154 | <a href='https://bitpic.network/u/644@moneybutton.com'>
155 | <code>https://bitpic.network/u/644@moneybutton.com</code>
156 | <br>
157 | <img src='https://bitpic.network/u/644@moneybutton.com' class='pic'>
158 | </a>
159 | <br>
160 | <br>
161 | <h3>Step 3. Update</h3>
162 | <p>Bitpic is a Planaria node which implements a mutable database and file system.</p>
163 | <p>This means whenever you upload a new avatar, your bitpic address will be updated to serve the newly uploaded avatar image.</p>
164 | <hr>
165 | <h2>How does it work?</h2>
166 | <p>Bitpic is powered by <a href='https://grid.planaria.network'>Planaria</a>, a Bitcoin crawler which indexes Bitcoin transactions in realtime into a database.
167 | <br><br>
168 | <img class='full' src='https://docs.planaria.network/archi.png'>
169 | <hr>
170 | <h2>Why use Bitpic?</h2>
171 | <ol>
172 |   <li><b>Your avatar forever:</b> Paymail providers and wallet providers may disappear in hundreds of years, but your Bitpic avatar will never go away because it's on the blockchain. If you post something tied to your Paymail, you probably want the avatar to show up forever even after thousands of years. Bitpic allows that, because Bitpic is an infinite state machine powered by <a href='https://grid.planaria.network'>Planaria</a>.</li>
173 |   <li><b>App developers: No need to roll your own avatar system:</b> As an application developer, you don't need to build a user avatar system from scratch. Just start using the avatar by referencing <code>https://bitpic.network/u/[Paymail]</code>! If an avatar doesn't exist for that paymail address, you will instead see the default image. For example, here's what <code>https://bitpic.network/u/invalid@invalid.com</code> looks like:
174 | <br>
175 |   <a href='/u/invalid@invalid.com'>
176 |   <img src='/u/invalid@invalid.com' class='pic'>
177 |   </a>
178 |   </li>
179 |   <li><b>100% Open:</b> Bitpic is open source and powered by <a href='https://grid.planaria.network'>Planaria</a>, which means anybody can run their own Bitpic Planaria node to operate the avatar system. In fact, you don't even have to use the <code>https://bitpic.network/u/[Paymail]</code> if you run your own Bitpic node!</li>
180 |   <li><b>Interoperable and Permissionless:</b> If you are an app developer or a wallet company, you only need to worry about implementing Bitpic on your side. You don't need to ask other wallets or applications for permission to use their avatars tied to their paymails, because the avatars are served from the single source of truth: the Bitcoin blockchain.</li>
181 | </ol>
182 | <hr>
183 | <h2>How to use Bitpic</h2>
184 | <h3>1. For users</h3>
185 | <p>Once you upload your avatar to the blockchain, you can use it from anywhere. For example you can embed your Bitpic in your website simply with an HTML tag: <code>&lt;img src="https://bitpic.network/u/&lt;YOUR_PAYMAIL&gt;"&gt;</code></p>
186 | <h3>2. For app developers</h3>
187 | <p><b>No need to roll your own avatar system:</b> As an app developer, you don't need to roll your own custom avatar system. Bitpic is an avatar owned by the user through Paymail. Outsource your Avatar system to the Bitcoin blockchain.</p>
188 | <p><b>Uploading Avatars:</b> Allowing your users to upload avatars is also easy. Whenever you need to allow your user to upload avatars, all you need to do is to send them to the <a href='https://bitpic.network/upload'>Bitpic upload interface</a>.</p>
189 | <p><b>100% Customizable:</b> The Bitpic upload interface is a server-less application made up of static HTML and JavaScript. Which means, if are a wallet provider, or an app developer, and you want your own custom Avatar uploading UI within your app, you can easily do so. Just take a look at the frontend code at <a href='/upload'>Upload page</a>, and build your own version which creates transactions that follow the protocol. Then you can run your own Bitpic planaria node, or simply use the default <code>bitpic.network</code> URL. Just make sure to say "Powered by Bitpic", so people know where they're uploading to.</p>
190 | <hr>
191 | <h2>Highlights</h2>
192 | <h3>1. Powered by Planaria</h3>
193 | <p>Bitpic is powered by <a href ='https://grid.planaria.network'>Planaria</a>. The Bitpic planaria node creates a mutable database which updates the image tied to a paymail address.</p>
194 | <h3>2. 100% Open and Portable</h3>
195 | <p>Anyone can run a Bitpic avatar node because:</p>
196 | <ol>
197 |   <li>The avatar files are fully stored on-chain</li>
198 |   <li>Bitpic is powered by <a href='https://grid.planaria.network'>Planaria</a></li>
199 |   <li>The Bitpic Planaria node is open source</li>
200 |   <li>The entire Bitpic frontend is open source</li>
201 | </ol>
202 | <hr>
203 | <h2>Endpoints</h2>
204 | <ol>
205 |   <li><code>/u/&lt;paymail&gt;</code> the image url you can embed in your apps. Example: <a href='https://bitpic.network/u/644@moneybutton.com'>https://bitpic.network/u/644@moneybutton.com</a></li>
206 |   <li><code>/exists/&lt;paymail&gt;</code> returns "1" if the paymail has an associated bitpic avatar. returns "0" if it doesn't exist yet.. Example: <a href='https://bitpic.network/exists/644@moneybutton.com'>https://bitpic.network/exists/644@moneybutton.com</a></li>
207 | </ol>
208 | <hr>
209 | <h2 id='default'>Default Image</h2>
210 | <p>By default Bitpic returns a fixed default image if an image doesn't yet exist for the corresponding paymail address. Here's what it looks like:</p>
211 | <img src='https://bitpic.network/u/fake@fake.com' class='pic'>
212 | <p>However it is possible to specify your own default image when the image doesn't load. You can do this by adding a <code>d=&lt;default image url&gt;</code> parameter at the end. Here's an example:</p>
213 | <p><code>https://bitpic.network/u/fake@fake.com?d=https://thumbs.gfycat.com/ExhaustedSaneAngwantibo-small.gif</code></p>
214 | <p><img src='https://bitpic.network/u/fake@fake.com?d=https://thumbs.gfycat.com/ExhaustedSaneAngwantibo-small.gif' class='pic'></p>
215 | </div>
216 | </body>
217 | </html>
218 | 


--------------------------------------------------------------------------------
/public/upload.html:
--------------------------------------------------------------------------------
  1 | <html>
  2 | <head>
  3 | <meta name="viewport" content="width=device-width, initial-scale=1">
  4 | <meta name="twitter:card" content="summary_large_image" />
  5 | <meta name="twitter:creator" content="@_unwriter" />
  6 | <meta name="twitter:title" content="bitpic" />
  7 | <meta name="twitter:description" content="Your own avatar on bitcoin, forever." />
  8 | <meta name="twitter:image" content="https://bitpic.network/bitpicpreview.png" />
  9 | <meta property="og:url" content="https://bitpic.network/upload" />
 10 | <meta property="og:type"   content="website" />
 11 | <meta property="og:title" content="bitpic" />
 12 | <meta property="og:description" content="Your own avatar on bitcoin, forever." />
 13 | <meta property="og:image" content="https://bitpic.network/bitpicpreview.png" />
 14 | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.4/croppie.min.css" integrity="sha256-/n6IXDwJAYIh7aLVfRBdduQfdrab96XZR+YjG42V398=" crossorigin="anonymous" />
 15 | <link href="https://fonts.googleapis.com/css?family=Roboto:400,900&display=swap" rel="stylesheet">
 16 | 
 17 | <style>
 18 | body {
 19 |   text-align: center;
 20 |   margin: 0;
 21 |   /*
 22 |   background: #20232a;
 23 |   */
 24 |   /*
 25 |   background: #35459E;
 26 |   */
 27 |   /*
 28 |   background: #003B74;
 29 |   */
 30 |   font-family: 'Roboto', sans-serif;
 31 | }
 32 | code {
 33 |   overflow-wrap: break-word;
 34 |   word-wrap: break-word;
 35 |   -ms-word-break: break-all;
 36 |   word-break: break-word;
 37 | }
 38 | .control input[type="file"] , .control button{
 39 |   position: absolute;
 40 |   left: 0;
 41 |   opacity: 0;
 42 |   top: 0;
 43 |   bottom: 0;
 44 |   width: 100%;
 45 |   cursor: pointer;
 46 | }
 47 | .control div {
 48 |   position: absolute;
 49 |   top: 0;
 50 |   bottom: 0;
 51 |   width: 100%;
 52 |   display: flex;
 53 |   align-items: center;
 54 |   justify-content: center;
 55 |   /*
 56 |   border: 1px solid rgba(255,255,255,0.7);
 57 |   */
 58 |   background: rgba(0,0,0,0.8);
 59 |   border-radius: 50px;
 60 |   color: white;
 61 | }
 62 | .control {
 63 |   cursor: pointer;
 64 |   font-family: Menlo, monaco, Courier;
 65 |   font-size: 12px;
 66 |   display: block;
 67 |   margin: 10px auto;
 68 |   position: relative;
 69 |   height: 50px;
 70 |   width: 200px;
 71 | }
 72 | .hidden {
 73 |   display: none !important;
 74 | }
 75 | #btns a {
 76 |   text-decoration: none;
 77 |   font-family: 'Roboto', sans-serif;
 78 |   font-size: 30px;
 79 | }
 80 | /*
 81 | .cr-boundary {
 82 |   background: white;
 83 | }
 84 | */
 85 | #resizer {
 86 |   height: auto !important;
 87 | }
 88 | #btns {
 89 |   align-items: center;
 90 | }
 91 | #btns > label {
 92 |   /*
 93 |   border: 1px solid black;
 94 |   background: rgba(0,0,0,0.05);
 95 |   */
 96 | }
 97 | .btn {
 98 |   background: rgba(0,0,0,0.8);
 99 |   color: white;
100 |   font-size: 10px;
101 |   font-weight: 400;
102 |   padding: 5px 10px;
103 |   display: inline-block;
104 |   margin: 10px 0;
105 |   border-radius: 2px;
106 |   font-family: Menlo, monaco, Courier;
107 |   cursor: pointer;
108 | }
109 | header {
110 | /*
111 |   background: rgba(0,0,0,0.9);
112 |   */
113 |   color: rgba(0,0,0,0.8);
114 |   padding: 20px;
115 |   text-align: center;
116 |   margin-bottom: 10px;
117 | }
118 | header a {
119 |   text-decoration: none;
120 |   color: rgba(0,0,0,0.8);
121 |   font-family: 'Roboto', sans-serif;
122 |   font-weight: 900;
123 |   font-size: 30px;
124 | }
125 | #button .small {
126 |   color: white;
127 |   font-family: Menlo, monaco, Courier;
128 |   padding: 10px;
129 |   font-size: 12px;
130 | }
131 | #mb {
132 |   background: rgba(0,0,0,0.3);
133 |   margin: 10px;
134 |   border-radius: 50px;
135 | }
136 | #file-zone {
137 |   margin-top: 50px;
138 | }
139 | 
140 | 
141 | .lds-ring {
142 |   position: relative;
143 | }
144 | .lds-ring div {
145 |   box-sizing: border-box;
146 |   display: block;
147 |   position: absolute;
148 |   width: 32px;
149 |   height: 32px;
150 |   margin: 8px;
151 |   border: 8px solid #fff;
152 |   border-radius: 50%;
153 |   animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
154 |   border-color: #fff transparent transparent transparent;
155 | }
156 | .lds-ring div:nth-child(1) {
157 |   animation-delay: -0.45s;
158 | }
159 | .lds-ring div:nth-child(2) {
160 |   animation-delay: -0.3s;
161 | }
162 | .lds-ring div:nth-child(3) {
163 |   animation-delay: -0.15s;
164 | }
165 | @keyframes lds-ring {
166 |   0% {
167 |     transform: rotate(0deg);
168 |   }
169 |   100% {
170 |     transform: rotate(360deg);
171 |   }
172 | }
173 | .subtitle {
174 |   font-size: 14px;
175 |   padding: 10px;
176 |   color: gray;
177 | }
178 | img.avatar {
179 |   width: 80px;
180 |   margin-bottom: 10px;
181 | }
182 | img.current {
183 |   border: 1px solid rgba(0,0,0,0.1);
184 | }
185 | .relay iframe {
186 |   margin-top: -3px;
187 | }
188 | .relay .lds-ring div {
189 |   margin: 0 2px;
190 | }
191 | </style>
192 | <script type="text/javascript" src="https://unpkg.com/bsv@1.0.0/bsv.min.js"></script>
193 | <script src="https://www.moneybutton.com/moneybutton.js"></script>
194 | <script src="https://one.relayx.io/relayone.js"></script>
195 | <script src='https://unpkg.com/datapay'></script>
196 | <script src='https://unpkg.com/databutton'></script>
197 | <script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
198 | <script src='https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.4/croppie.min.js'></script>
199 | <script src="https://bundle.run/buffer@5.4.3"></script>
200 | <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/browser-image-compression@1.0.0/dist/browser-image-compression.js"></script>
201 | <script>
202 | var resizer = (url, cb) => {
203 |   var el = document.querySelector("#resizer")
204 |   var resize = new Croppie(el, {
205 |     viewport: { width: 400, height: 400 },
206 |     boundary: { width: 600, height: 600 },
207 |     showZoomer: true,
208 | //          enableResize: true,
209 | //    enableOrientation: true,
210 | //    mouseWheelZoom: 'ctrl'
211 |   });
212 |   resize.bind({ url: url });
213 |   document.querySelector("#done").addEventListener("click", (e) => {
214 |     console.log("click")
215 |     resize.result({
216 |       type: 'blob',
217 |       format: "jpeg"
218 |     }).then(function(blob) {
219 |       console.log(blob)
220 |       cb(blob)
221 |     })
222 |     return false;
223 |   })
224 | }
225 | 
226 | var convertBlob = (blob, type, callback) => {
227 |   return new Promise((resolve, reject) => {
228 |     let canvas = document.createElement('CANVAS')
229 |     canvas.style.display = 'none'
230 |     let ctx = canvas.getContext('2d')
231 |     console.log("wihe = ", canvas.width, canvas.height);
232 | 
233 | 
234 |     let image = new Image()
235 |     image.src = URL.createObjectURL(blob)
236 |     image.onload = function(){
237 |       canvas.width = image.width
238 |       canvas.height = image.height
239 |       ctx.drawImage(image, 0, 0)
240 |       let result = dataURItoBlob(canvas.toDataURL(type, 0.7))
241 |       if(callback) {
242 |         callback(result)
243 |       } else {
244 |         resolve(result)
245 |       }
246 |     }
247 |   })
248 | }
249 | var dataURItoBlob = (dataURI) => {
250 |   var byteString = atob(dataURI.split(',')[1]);
251 |   var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]
252 |   var ab = new ArrayBuffer(byteString.length);
253 |   var ia = new Uint8Array(ab);
254 |   for (var i = 0; i < byteString.length; i++) {
255 |     ia[i] = byteString.charCodeAt(i);
256 |   }
257 |   var blob = new Blob([ab], {type: mimeString});
258 |   return blob;
259 | }
260 | var renderImage = (blob) => {
261 |   console.log('renderImage compressedFile instanceof Blob', blob instanceof Blob); // true
262 |   console.log(`compressedFile size ${blob.size / 1024 / 1024} MB`); // smaller than maxSizeMB
263 | 
264 |   var img = document.createElement("img");
265 |   var img = new Image();
266 |   img.onload = function(){
267 |     // Draw image to CANVAS
268 |     var canvas_e = document.querySelector("canvas#final")
269 |     canvas_e.classList.remove("hidden");
270 |     var ctx = canvas_e.getContext("2d");
271 | 
272 |     ctx.drawImage(img, 0, 0);
273 |     console.log(img.width, img.height)
274 | 
275 |     var MAX_WIDTH = 800;
276 |     var MAX_HEIGHT = 600;
277 |     var width = img.width;
278 |     var height = img.height;
279 | 
280 |     if (width > height) {
281 |       if (width > MAX_WIDTH) {
282 |         height *= MAX_WIDTH / width;
283 |         width = MAX_WIDTH;
284 |       }
285 |     } else {
286 |       if (height > MAX_HEIGHT) {
287 |         width *= MAX_HEIGHT / height;
288 |         height = MAX_HEIGHT;
289 |       }
290 |     }
291 |     canvas_e.width = width;
292 |     canvas_e.height = height;
293 |     ctx.drawImage(img, 0, 0, width, height);
294 | 
295 | 
296 |   };
297 |   img.onerror = function(e){
298 |     console.log('Error during loading image:', e);
299 |   };
300 |   img.src = window.URL.createObjectURL(blob);
301 | }
302 | var pickProvider = (cb) => {
303 |   const p = document.querySelector("#provider-picker")
304 |   p.classList.remove("hidden")
305 |   document.querySelector("#pick-moneybutton").addEventListener("click", () => {p.classList.add("hidden"); cb("moneybutton")})
306 |   document.querySelector("#pick-relay").addEventListener("click", () => {p.classList.add("hidden"); cb("relay")})
307 | }
308 | var readBlob = (blob, cb) => {
309 |   var reader = new FileReader();
310 |   reader.addEventListener('load', function(event) {
311 |     var file = event.target.result
312 |     file = buffer.Buffer.from(file)
313 |     cb(file)
314 |   })
315 |   reader.readAsArrayBuffer(blob)
316 | }
317 | var listenForTx = (txid, paymail) => {
318 |   var current_query = {
319 |     v: 3,
320 |     q: {
321 |       find: { "tx.h": txid },
322 |       limit: 1
323 |     }
324 |   };
325 |   var b64 = btoa(JSON.stringify(current_query))
326 |   var current_url = 'https://genesis.bitdb.network/s/1FnauZ9aUH2Bex6JzdcV4eNX7oLSSEbxtN/'+b64
327 |   var bitsocket = new EventSource(current_url)
328 |   bitsocket.onmessage = function(ee) {
329 |     var m = JSON.parse(ee.data)
330 |     console.log("m = ", m)
331 |     if (m.type === 'u') {
332 |       let tx = m.data[0].tx.h
333 |       location.href = "/me/" + m.data[0].out[0].s8 + "#share"
334 |     }
335 |   }
336 |   setTimeout(() => {
337 |     location.href = "/me/" + paymail + "#share"
338 |   }, 3000)
339 | }
340 | var buildRelayTx = (blob) => {
341 |   readBlob(blob, (file) => {
342 |     // parrot mb styling
343 |     document.querySelector('#mb').style = "position: relative;display: inline-block;width: 140px;height: 34px;"
344 |     document.querySelector('#mb').classList.add('relay')
345 | 
346 |     let s = bsv.Script.buildSafeDataOut([
347 |       "19HxigV4QyBv3tHpQVcUEQyq1pzZVdoAut", // B://
348 |       file,
349 |       "image/jpeg",
350 |       "binary"
351 |     ])
352 | 
353 |     relayone.render(document.querySelector("#mb"), {
354 |       label: 'sign',
355 |       outputs: [{
356 |         amount: '0',
357 |         currency: 'BSV',
358 |         script: s.toASM(),
359 |         signatures: ['BITPIC']
360 |       }],
361 |       onLoad: function() {
362 |         console.log("Load")
363 |         setTimeout(function() {
364 |           document.querySelector(".lds-ring").classList.add("hidden");
365 |         }, 1000)
366 |       },
367 |       onPayment: (payment) => {
368 |         console.log(payment)
369 |         listenForTx(payment.txid, payment.paymail)
370 |       }
371 |     })
372 |   })
373 | }
374 | var buildMoneyButtonTx = (blob) => {
375 |   readBlob(blob, (file) => {
376 |     let hex = Array.prototype.map.call(file, x => ('00' + x.toString(16)).slice(-2)).join('');
377 | 
378 |     let hash = bsv.crypto.Hash.sha256(buffer.Buffer.from(hex, 'hex')).toString('hex')
379 | 
380 |     console.log("name = ", name)
381 |     console.log("file = ", file)
382 |     console.log("hex = ", hex)
383 |     console.log("hash = ", hash)
384 | 
385 |     let s = bsv.Script.buildSafeDataOut([
386 |       "19HxigV4QyBv3tHpQVcUEQyq1pzZVdoAut", // B://
387 |       file,
388 |       "image/jpeg",
389 |       "binary",
390 |       "|",
391 |       "18pAqbYqhzErT6Zk3a5dwxHtB9icv8jH2p", // Bitface
392 |       '#{paymail}',
393 |       '#{pubkey}',
394 |       '#{sig}'
395 |     ])
396 | 
397 |     console.log("s = ", s)
398 |     console.log("asm = ", s.toASM())
399 | 
400 |     moneyButton.render(document.querySelector("#mb"), {
401 |       label: 'sign',
402 |       outputs: [{
403 |         amount: '0',
404 |         currency: 'BSV',
405 |         script: s.toASM()
406 |       }],
407 |       cryptoOperations: [
408 |         {
409 |           name: 'sig',
410 |           method: 'sign',
411 |           data: hash,
412 |           dataEncoding: 'hex',
413 |           key: 'identity', // default value
414 |           algorithm: 'bitcoin-signed-message' // default value
415 |         },
416 |         {
417 |           name: 'pubkey',
418 |           method: 'public-key',
419 |           key: 'identity' // default value
420 |         },
421 |         {
422 |           name: 'paymail',
423 |           method: 'paymail'
424 |         }
425 |       ],
426 |       onLoad: function() {
427 |         console.log("Load")
428 |         setTimeout(function() {
429 |           document.querySelector(".lds-ring").classList.add("hidden");
430 |         }, 1000)
431 |       },
432 |       onPayment: (payment) => {
433 |         let cryptoOperations = payment.cryptoOperations
434 |         console.log(`User signature for their content is ${cryptoOperations[0].value},
435 |           the public key used is ${cryptoOperations[1].value}
436 |           the paymail of the user is ${cryptoOperations[2].value},
437 |           and everything was broadcasted in the tx: ${payment.txid}`)
438 |           console.log(payment)
439 |           listenForTx(payment.txid, cryptoOperations[2].value)
440 |       }
441 |     })
442 |   });
443 | }
444 | document.addEventListener("DOMContentLoaded", function(e) {
445 |   var fileEl = document.querySelector("#file")
446 |   fileEl.onchange = function(e) {
447 |     document.querySelector("img.current").classList.add("hidden")
448 |     var type = e.target.files[0].type
449 |     var name = e.target.files[0].name
450 |     var file = e.target.files[0]
451 |     console.log('original file instanceof Blob', file instanceof Blob); // true
452 |     console.log(`original File size ${file.size / 1024 / 1024} MB`); // smaller than maxSizeMB
453 |     try {
454 |       document.querySelector("#done-zone").classList.remove("hidden")
455 |       document.querySelector("#file-zone").classList.add("hidden")
456 |       var url = URL.createObjectURL(file);
457 |       resizer(url, (blob) => {
458 |         console.log('resized file instanceof Blob', blob instanceof Blob); // true
459 |         console.log(`resized File size ${blob.size / 1024 / 1024} MB`); // smaller than maxSizeMB
460 |         convertBlob(blob, 'image/jpeg', (blob) => {
461 |           document.querySelector("#resizer").classList.add("hidden")
462 |           document.querySelector("#done-zone").classList.add("hidden")
463 |           renderImage(blob)
464 |           pickProvider((provider) => {
465 |             if (provider === 'moneybutton') {
466 |               document.querySelector("#button").classList.remove("hidden")
467 |               buildMoneyButtonTx(blob)
468 |             }
469 |             if (provider === 'relay') {
470 |               document.querySelector("#button").classList.remove("hidden")
471 |               buildRelayTx(blob)
472 |             }
473 |           })
474 |         })
475 |       })
476 |     } catch (error) {
477 |       console.log(error);
478 |     }
479 |   }
480 |   if (document.location.hash.length > 1) {
481 |     let h = document.location.hash.slice(1)
482 |     document.querySelector("img.current").setAttribute("src", "/u/" + h)
483 |   }
484 | })
485 | </script>
486 | </head>
487 | <body>
488 | <header>
489 |   <a href='/'>
490 |   <img src='/avatar.png' class='avatar'>
491 |   <br>
492 |   bitpic
493 |   </a>
494 |   <div class='subtitle'>Your own avatar on bitcoin, forever.</div>
495 |   <a class='btn' href='/about'>How it works</a>
496 | </header>
497 | <img class='current'>
498 | <canvas id='final' class='hidden'></canvas>
499 | <div id='resizer'></div>
500 | <div id="provider-picker" class="hidden">
501 |   <a class="btn" id='pick-moneybutton'>Money Button</a>
502 |   <a class="btn" id='pick-relay'>RelayX</a>
503 | </div>
504 | <div id='btns'>
505 |   <label class='control' for="file" id='file-zone'>
506 |     <div>+ Select file</div>
507 |     <input type="file" accept="image/*" id="file">
508 |   </label>
509 |   <label class='control hidden' for="done" id='done-zone'>
510 |     <div>Done</div>
511 |     <button id='done'></button>
512 |   </label>
513 |   <div id='button' class='hidden'>
514 |     <div class='small'>Swipe to update your avatar</div>
515 |     <div id='mb'>
516 |       <div class="lds-ring"><div></div><div></div><div></div><div></div></div>
517 |     </div>
518 |   </div>
519 | </div>
520 | </body>
521 | </html>
522 | 


--------------------------------------------------------------------------------