A utility library to download svg and attribute data for CyberBrokers (from the Ethereum Blockchain)
- ethers.js
Using npm:
$ npm install cb-connectLoad data about a broker (Promise based)
Input:
| Parameter | Type | Description |
|---|---|---|
brokerID |
number |
Required. The ID of the broker |
provider |
provider |
Optional. A blockchain provider, if none is provided, then an Ethers.js one is automatically generated |
import { loadBroker } from "cb-connect";
const BROKER_ID = 1000;
const myFunction = async () => {
const brokerData = await loadBroker(BROKER_ID, provider);
};Example Output:
{
attributes: {
className: "Leftovers",
species: "Human",
talent: "Leftover"
},
skills: {
body: 19,
mind: 11,
soul: 4
},
layers: [
{
id: 5,
data: '<defs></defs><g stroke="none" stroke-width="1" fil…ate(-194,-764)" id="id-31291"></path></g></g></g>',
layerID: 114,
label: "Twist Buns",
group: "Hair"
}
]
}takes the svg layers object from loadBroker and turns it into a complete SVG string
import { loadBroker } from "cb-connect";
const BROKER_ID = 1000;
const myFunction = async () => {
const brokerData = await loadBroker(BROKER_ID, provider);
const svgString = buildSVGString(broker.layers);
};An example of using the library to display an SVG in a React App
import React, { useState, useEffect } from "react";
import { loadBroker, buildSVGString } from "cb-connect";
const Component = () => {
const [svg, setSvg] = useState();
useEffect(() => {
loadSVG();
}, []);
const loadSVG = asyc () => {
const brokerID = 1000;
const brokerData = await loadBroker(brokerID);
const brokerSVG = buildSVGString(brokerData.layers);
setSvg(brokerSVG);
};
return (
<div
dangerouslySetInnerHTML={{ __html: svg }}
/>
);
};
export Component;Contributions are always welcome! For any help, please contact me at samalotmedia@gmail.com
