latest

Author: crzypatchwork

package-lock.json

@@ -6,15 +6,14 @@
     "@emotion/react": "^11.8.2",
     "@emotion/styled": "^11.8.1",
     "@metamask/legacy-web3": "^2.0.0",
-    "@mui/material": "^5.5.2",
-    "@react-css/grid": "^1.5.0",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
     "axios": "^0.21.1",
     "big-integer": "^1.6.51",
     "bootstrap": "^5.1.3",
     "ethers": "^5.5.4",
+    "find-hashtags": "^1.0.1",
     "graphql": "^15.5.1",
     "hicetnunc-sdk": "^1.0.13",
     "ipfs-http-client": "^52.0.5",

package.json

@@ -15,13 +15,12 @@ a.style {
 a.style:hover {
     color : white;
     background-color: black;
-    text-decoration: underline;
 }
 
 a.button {
     height: 15px;
     text-decoration: none;
-    border-style : solid;
+    border-style: solid;
 }
 
 a.button:hover {}
@@ -35,6 +34,20 @@ audio {
     max-width: 50vw;
 }
 
+.tag {
+    background-color: black;
+    color: white;
+    cursor: pointer;
+    border-style: solid;
+}
+
+.tag:hover {
+    background-color: white;
+    color: black;
+    border-style: solid;
+    cursor: pointer;
+}
+
 .row {
     width : 100vw;
     display: flex;

src/App.css

@@ -9,7 +9,8 @@ import { Token } from './components/token'
 import { About } from './components/about'
 import { Assets } from './components/assets'
 import { Exchange } from './components/exchange'
-
+import { Search } from './components/search'
+import { Tags } from './components/tags'
 import { HashRouter } from 'react-router-dom/cjs/react-router-dom.min'
 import { Config } from './components/config'
 
@@ -25,11 +26,13 @@ function App() {
         <Switch>
           <Route exact path='/' component={Feed} />
           <Route exact path='/publish' component={Mint} />
-          <Route path='/asset/:id' component={Token} />
+          <Route path='/search' component={Search} />
+          <Route exact path='/tag/:id' component={Tags} />
+          <Route exact path='/asset/:id' component={Token} />
           <Route exact path='/about' component={About} />
           <Route exact path='/exchange' component={Exchange} />
           <Route exact path='/config' component={Config} />
-          <Route path='/:id' component={Assets} />
+          <Route exact path='/:id' component={Assets} />
         </Switch>
       </HashRouter>
     </UngrundContextProvider>

src/App.js

@@ -94,8 +94,8 @@ Block Explorer URL: https://polygonscan.com/<br/>
             
             <a onClick={() => connectAvax()} href='#'>connect to AVAX</a><br /><br /> */}
 
-            Exchange of digital assets can be made making use of MATIC, DAI or ███.<br /><br />
-            To bridge assets from Ethereum Network to Polygon Network use <a class="style" href="https://wallet.polygon.technology/bridge">Polygon Bridge</a> <a class="style" href='https://www.youtube.com/watch?v=OOVzXvivgyM'>(see how to).</a><br />Gnosis network will also be integrated in the near future.<br />
+            Exchange of digital assets can be made making use of MATIC.<br /><br />
+            To bridge assets from Ethereum Network to Polygon Network use <a class="style" href="https://wallet.polygon.technology/bridge">Polygon Bridge</a> <a class="style" href='https://www.youtube.com/watch?v=OOVzXvivgyM'>(see how to).</a><br /><br /><b>This is an experimental decentralized application use at your own risk.</b><br />
             {/* To bridge assets from Ethereum Network to Gnosis Chain use <a class="style" href="https://bridge.xdaichain.com/">xDai Bridge</a> <a class="style" href='https://www.xdaichain.com/for-users/bridges/converting-xdai-via-bridge/moving-dai-to-xdai'>(see how to).</a><br /> */}<br />
             {/*             <div style={style}>
             </div> */}

src/components/about.js

@@ -185,7 +185,7 @@ export class Assets extends Component {
                             <div>
                                 <div>
                                     <a class="style" style={{cursor : 'pointer'}}>//creations //</a>
-                                    <a class="style" style={{cursor : 'pointer'}}>collection //</a>
+                                    <a class="style" style={{cursor : 'pointer'}} onClick={() => console.log('oi')}>collection //</a>
                                 </div>
                                 <div class="row">
                                 {

src/components/assets.js

@@ -72,7 +72,7 @@ export class Feed extends Component {
 
     render() {
         return (
-            <div>
+            <div><br/>
                 {
                     !this.state.loading ?
                         <div class='row'><br />

src/components/feed.js

@@ -82,7 +82,7 @@ export class Header extends Component {
     render() {
         return (
             <div>
-                <div style={{ borderBottom: 'solid', height: '50px' }}>
+                <div style={{ /* borderBottom: 'solid', */ height: '50px' }}>
                     <div>
                         <a href='/' style={{ marginTop: '7.5px', zIndex: 1, position: 'absolute', fontSize: '25px', cursor: 'pointer' }}>███</a>
                         {
@@ -105,7 +105,7 @@ export class Header extends Component {
                         }
                     </div>
                 </div>
-                <div style={{ display: 'inline' }}>
+                <div style={{ display: 'inline', marginBottom: '50px' }}>
                     <span>
                         <a class='style' onClick={() => this.context.setSelected(undefined)} href='/'> {/* filters ? */}
                         //feed  //
@@ -158,6 +158,9 @@ export class Header extends Component {
                         <a href='collections'></a> */}
                     </span>
                 </div>
+{/*                 <div>
+                    <input type="text" placeholder="search..."></input>
+                </div> */}
             </div>
         )
     }

src/components/header.js

@@ -6,6 +6,8 @@ import { NFTStorage, File } from 'nft.storage'
 import { create } from 'ipfs-http-client'
 import { Loading } from './load'
 
+const findHashtags = require('find-hashtags')
+
 var Contract = require('web3-eth-contract')
 const Web3 = require('web3')
 const apiKey = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJkaWQ6ZXRocjoweEY1NDdDNUIyMjMzMTc3MDZkZDdkODNEMjA4ODRkRDgxOTIxNTBiNEUiLCJpc3MiOiJuZnQtc3RvcmFnZSIsImlhdCI6MTYyODE5NTc4NTc2MSwibmFtZSI6InRlc3QifQ.RED_BCrWtUgodnbLxdFV5lKxVTPruv1Cg-bcDL7jtrI'
@@ -20,6 +22,7 @@ export class Mint extends Component {
         description: undefined,
         amount: undefined,
         royalties: undefined,
+        hashtags: undefined,
         file: undefined,
         display: undefined,
         result: undefined,
@@ -28,11 +31,18 @@ export class Mint extends Component {
 
     componentWillMount = async () => { }
 
-    handleChange = e => this.setState({ [e.target.name]: e.target.value })
+    handleChange = e => {
+        if (e.target.name == 'hashtags') {
+            this.setState({ [e.target.name]: findHashtags(e.target.value) })
+        } else {
+            this.setState({ [e.target.name]: e.target.value })
+        }
+    }
 
     onFileUpload = e => {
         this.setState({ file: e.target.files[0] })
         console.log(e.target.files[0].type)
+        console.log(e.target.files[0])
         console.log(e.target.files[0].type !== undefined)
         if (e.target.files[0].type.split('/')[0] != 'image' && e.target.files[0].type.split('/')[0] != 'text' && e.target.files[0].type != 'application/pdf') this.setState({ video: true })
         console.log(this.state.video)
@@ -44,7 +54,7 @@ export class Mint extends Component {
 
         // https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/encrypt
         // https://blog.secure-monkey.com/considerations-when-using-aes-gcm-for-encrypting-files/
-        
+
         console.log(await this.state.file.arrayBuffer())
         console.log(ls.get('pk'))
 
@@ -93,6 +103,7 @@ export class Mint extends Component {
 
     mint = async () => {
 
+        console.log(this.state)
         this.context.setLoading(true)
         this.context.setMsg('preparing asset')
 
@@ -128,6 +139,7 @@ export class Mint extends Component {
             }
         }
 
+        if (this.state.hashtags?.length > 0) obj.attributes = this.state.hashtags.map(e => { return { 'value' : e } })
         if (this.state.file.type != undefined) obj.mimeType = this.state.file.type
 
         let str = JSON.stringify(obj)
@@ -201,6 +213,7 @@ export class Mint extends Component {
                                 <div>
                                     <input type="text" placeholder="title" name="title" onChange={this.handleChange} /><br />
                                     <input type="text" placeholder="description" name="description" onChange={this.handleChange} /><br />
+                                    {/* <input type="text" placeholder="#hashtags" name="hashtags" onChange={this.handleChange} /><br /> */}
                                     <input type="text" placeholder="amount" name="amount" onChange={this.handleChange} /><br />
                                     <input type="text" placeholder="royalties" name="royalties" onChange={this.handleChange} /><br />
                                     <input type="file" name="file" onChange={this.onFileUpload} />

src/components/mint.js

@@ -1,5 +1,6 @@
 import { useContext, useState } from 'react'
 import { UngrundContext } from '../context/UngrundContext'
+const findHashtags = require('find-hashtags')
 
 export const Search = () => {
 
@@ -8,7 +9,8 @@ export const Search = () => {
 
     return (
         <div>
-            <input type="text" placeholder="search" onChange={e => console.log(e)} />
+            <input type="text" placeholder="search" onChange={e => console.log(findHashtags(e.target.value))} />
+            <button>search</button>
         </div>
     )
 }