From 3e307780ac5110c45d7b366f03daff4c7352e875 Mon Sep 17 00:00:00 2001 From: harryranakl Date: Thu, 10 Feb 2022 11:13:13 +0800 Subject: [PATCH 1/4] added: brushstrokes and custom attributes --- packages/react-app/src/CreateInk.js | 135 ++++++++++++++++++++++++++- packages/react-app/src/Drafts.js | 6 +- packages/react-app/src/NftyWallet.js | 2 +- 3 files changed, 137 insertions(+), 6 deletions(-) diff --git a/packages/react-app/src/CreateInk.js b/packages/react-app/src/CreateInk.js index 6f717a8..1ac0f9e 100644 --- a/packages/react-app/src/CreateInk.js +++ b/packages/react-app/src/CreateInk.js @@ -13,7 +13,9 @@ import { DownloadOutlined, UploadOutlined, InfoCircleOutlined, - BookOutlined + BookOutlined, + MinusCircleOutlined, + PlusOutlined } from "@ant-design/icons"; import { Row, @@ -32,7 +34,9 @@ import { Tooltip, Popover, Table, - Select + Select, + Divider, + Badge } from "antd"; import { useLocalStorage } from "./hooks"; import { addToIPFS, transactionHandler } from "./helpers"; @@ -62,6 +66,7 @@ export default function CreateInk(props) { const [colorArray, setColorArray] = useLocalStorage("colorArray", "twitter"); const [_, setDrafts] = useLocalStorage("drafts", []); const [canvasFile, setCanvasFile] = useState(null); + let [InkAttributes, setInkAttributes] = useLocalStorage("inkAttributes", [{trait_type: "brushstrokes",value:0}]); const recentColorCount = 24; @@ -340,6 +345,9 @@ export default function CreateInk(props) { setDrawingSaved(false); } //} + + InkAttributes[0].value = drawingCanvas.current.lines.length; + setInkAttributes(InkAttributes); }; useEffect(() => { @@ -371,6 +379,9 @@ export default function CreateInk(props) { //console.log(decompressed) //drawingCanvas.current.loadSaveData(decompressed, true) setInitialDrawing(decompressed); + + InkAttributes[0].value = currentLines.current.length; + setInkAttributes(InkAttributes); } catch (e) { console.log(e); } @@ -688,13 +699,56 @@ export default function CreateInk(props) { const saveDraft = () => { let imageData = drawingCanvas.current.canvas.drawing.toDataURL("image/png"); let savedData = LZ.compress(drawingCanvas.current.getSaveData()); + let inkAttr = JSON.stringify(InkAttributes); setDrafts(drafts => { - return [...drafts, { imageData, savedData }]; + return [...drafts, { imageData, savedData, inkAttr}]; }); }; let top, bottom, canvas, shortcutsPopover, draftSaver; + let badgeColors = [ + 'pink', + 'red', + 'yellow', + 'orange', + 'cyan', + 'green', + 'blue', + 'purple', + 'geekblue', + 'magenta', + 'volcano', + 'gold', + 'lime', + ]; + // let attributesArr = [ + // { + // trait_type: "brushstrokes", + // value: 1000 + // }, + // { + // trait_type: "tags", + // value: "mountains, sun, mt fuji" + // } + // ] + + const saveAttributes = a => { + // console.log('attributes form values :', a); + + // InkAttributes.length = 1; + InkAttributes = InkAttributes.concat(a.attrs); + setInkAttributes(InkAttributes); + }; + const delAttributes = i => { + // console.log('attributes i :', i); + + InkAttributes = InkAttributes.filter( (t,ii) =>{ + return ii !== i + }); + setInkAttributes(InkAttributes); + }; + if (props.mode === "edit") { top = (
@@ -786,6 +840,7 @@ export default function CreateInk(props) { drawingCanvas.current.clear(); //setLoadedLines() props.setDrawing(); + setInkAttributes([{trait_type: "brushstrokes",value:0}]); }} okText="Yes" cancelText="No" @@ -815,6 +870,80 @@ export default function CreateInk(props) { PLAY
+ +
+ Attributes +
+ + {(fields, { add, remove }) => ( + <> + { + fields.map(({ key, name, ...restField }) => ( + + + + + + + + + remove(name)} /> + + + )) + } + + + + + + + + )} + +
+
+ { + InkAttributes.map( (c,i) => ( + <> + +
+ {c.trait_type} +
: +
+ {c.value} +
+
+ { i > 0 && delAttributes(i)} /> } +
+ + } + style={{ width:725, margin: "0 auto"}}/> + + )) + } +
+
); diff --git a/packages/react-app/src/Drafts.js b/packages/react-app/src/Drafts.js index 09ba6e3..467a9d1 100644 --- a/packages/react-app/src/Drafts.js +++ b/packages/react-app/src/Drafts.js @@ -11,11 +11,13 @@ const { Text } = Typography; export default function Drafts(props) { const history = useHistory(); const [drafts, setDrafts] = useLocalStorage("drafts", []); + const [InkAttributes, setInkAttributes] = useLocalStorage("inkAttributes", [{trait_type: "brushstrokes",value:0}]); const { address, ens, setDrawing } = props; const goDraft = useCallback( - savedData => { + (savedData, inkAttr) => { setDrawing(savedData); + setInkAttributes(inkAttr ? JSON.parse(inkAttr): [{trait_type: "brushstrokes",value:0}]); history.push("/create"); }, [history, setDrawing] @@ -79,7 +81,7 @@ export default function Drafts(props) { { - goDraft(draft.savedData); + goDraft(draft.savedData,draft.inkAttr); }} okText="Yes" cancelText="No" diff --git a/packages/react-app/src/NftyWallet.js b/packages/react-app/src/NftyWallet.js index f111ddf..21d65f7 100644 --- a/packages/react-app/src/NftyWallet.js +++ b/packages/react-app/src/NftyWallet.js @@ -4,7 +4,7 @@ import { Button, Badge, Tabs, Row, Col, Drawer, Layout, Menu } from "antd"; import { MenuOutlined } from "@ant-design/icons"; import { PlusOutlined } from "@ant-design/icons"; import { useContractReader, useLocalStorage } from "./hooks"; -import { RelayProvider } from "@opengsn/gsn"; +import { RelayProvider } from "@opengsn/provider"; import { Account, Faucet } from "./components"; import { createClient } from "@supabase/supabase-js"; import Holdings from "./Holdings.js"; From 99f002ac3ab42e1481c8af61f7e937e62bd0bb0e Mon Sep 17 00:00:00 2001 From: harryranakl Date: Thu, 10 Feb 2022 13:46:07 +0800 Subject: [PATCH 2/4] updated: createink add custom attributes --- packages/react-app/src/CreateInk.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/react-app/src/CreateInk.js b/packages/react-app/src/CreateInk.js index 1ac0f9e..6967014 100644 --- a/packages/react-app/src/CreateInk.js +++ b/packages/react-app/src/CreateInk.js @@ -472,6 +472,9 @@ export default function CreateInk(props) { value: values.limit.toString() } ]; + if(InkAttributes.length > 0 ){ + currentInk["attributes"] = currentInk["attributes"].concat(InkAttributes); + } currentInk["name"] = values.title; let newEns; try { From 3c383b80f128ff3a150f8acd64406ddf2028a369 Mon Sep 17 00:00:00 2001 From: harryranakl Date: Thu, 10 Feb 2022 14:53:12 +0800 Subject: [PATCH 3/4] update: show attributes in viewink page --- packages/react-app/src/ViewInk.js | 47 +++++++++++++++++++++++++++++-- 1 file changed, 45 insertions(+), 2 deletions(-) diff --git a/packages/react-app/src/ViewInk.js b/packages/react-app/src/ViewInk.js index e6174e0..ac522b9 100644 --- a/packages/react-app/src/ViewInk.js +++ b/packages/react-app/src/ViewInk.js @@ -17,7 +17,8 @@ import { Skeleton, InputNumber, Input, - Tabs + Tabs, + Divider } from "antd"; import { AddressInput, Address, Loader } from "./components"; import { @@ -837,11 +838,53 @@ export default function ViewInk(props) { ); } - + let badgeColors = [ + 'pink', + 'red', + 'yellow', + 'orange', + 'cyan', + 'green', + 'blue', + 'purple', + 'geekblue', + 'magenta', + 'volcano', + 'gold', + 'lime', + ]; let bottom = (
{likeButtonDisplay} {detailsDisplay} + { + inkJson && + inkJson.attributes && +
+ Attributes +
+ { + inkJson && + inkJson.attributes && + inkJson.attributes.map( (c,i) => ( + <> + +
+ {c.trait_type} +
: +
+ {c.value} +
+ + } + style={{ width:725, margin: "0 auto"}}/> + + )) + } +
+
+ }
{inkChainInfoDisplay}
From 00910946a40e0779a990d9f98e7d87b1b76c1702 Mon Sep 17 00:00:00 2001 From: harryranakl Date: Thu, 10 Feb 2022 15:09:02 +0800 Subject: [PATCH 4/4] updated: clear attributes after minting --- packages/react-app/src/CreateInk.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-app/src/CreateInk.js b/packages/react-app/src/CreateInk.js index 6967014..0ce857a 100644 --- a/packages/react-app/src/CreateInk.js +++ b/packages/react-app/src/CreateInk.js @@ -563,6 +563,7 @@ export default function CreateInk(props) { props.setViewDrawing(drawingCanvas.current.getSaveData()); //LZ.decompress(props.drawing)) setDrawingSize(10000); props.setDrawing(""); + setInkAttributes([{trait_type: "brushstrokes",value:0}]); history.push("/ink/" + drawingHash); } };