Skip to content

Commit b666edb

Browse files
authored
Merge pull request #1 from MoMannn/master
Deployment example
2 parents c9031ff + 0dbce47 commit b666edb

File tree

8 files changed

+242
-1
lines changed

8 files changed

+242
-1
lines changed

README.md

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,13 @@
1-
# api-example-deployment
1+
This is an example of how to 0xcertAPI deployments.
2+
3+
The example is wrapped in a simple dApp to showcase not only functionalities but also the basic principles of handling blockchain communication through 0xcertAPI. Main logic is isolated in `src/example.ts` while response handling is located in `index.ts`.
4+
5+
Project stucture:
6+
7+
| Path | Description
8+
|-|-
9+
| src/example.ts | Main logic showing the use.
10+
| src/config.ts | Configuration file.
11+
| index.html | Front end styling.
12+
| index.ts | Controller connecting front end to the logic.
13+
| package.json | Dependencies.

index.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<html>
2+
<head>
3+
<title>0xcertAPI example for creating a deployment.</title>
4+
<link rel="stylesheet" href="style.css" />
5+
<meta charset="UTF-8" />
6+
</head>
7+
8+
<body>
9+
<button id="btnInitialize">Initialize</button>
10+
<button id="btnCreateDeployment">Create deployment</button>
11+
<button id="btnGetDeployInfo">Get deploy information</button>
12+
<div id="console">
13+
<div>Console output.</div>
14+
</div>
15+
<script src="index.ts"></script>
16+
</body>
17+
</html>

index.ts

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import { init, getDeploymentInfo, createDeployment } from "./src/example";
2+
import { config } from "./src/config";
3+
4+
const divConsole = document.getElementById("console");
5+
const btnInitialize = document.getElementById("btnInitialize");
6+
const btnCreateDeployment = document.getElementById("btnCreateDeployment");
7+
const btnGetDeployInfo = document.getElementById("btnGetDeployInfo");
8+
9+
btnInitialize.addEventListener("click", async () => {
10+
try {
11+
await init();
12+
printMessage("Initialized.");
13+
} catch (e) {
14+
printError(e);
15+
}
16+
});
17+
18+
btnCreateDeployment.addEventListener("click", async () => {
19+
if (config.client === null) {
20+
printWarning("First initialize the client.");
21+
return;
22+
}
23+
printMessage("Deploying asset ledger");
24+
try {
25+
const deployment = await createDeployment();
26+
printMessage(deployment.data);
27+
} catch (e) {
28+
printError(e);
29+
}
30+
});
31+
32+
btnGetDeployInfo.addEventListener("click", async () => {
33+
if (config.deploymentRef === "") {
34+
printWarning("First create a deployment.");
35+
return;
36+
}
37+
try {
38+
const deployment = await getDeploymentInfo();
39+
printMessage(deployment.data);
40+
} catch (e) {
41+
printError(e);
42+
}
43+
});
44+
45+
function printMessage(message: any) {
46+
if (typeof message !== "string") {
47+
message = JSON.stringify(message, null, 2);
48+
}
49+
const div = document.createElement("div");
50+
div.innerText = message;
51+
divConsole.prepend(div);
52+
}
53+
54+
function printWarning(message: any) {
55+
if (typeof message !== "string") {
56+
message = JSON.stringify(message, null, 2);
57+
}
58+
const div = document.createElement("div");
59+
div.innerText = "Warning: " + message;
60+
div.className = "warning";
61+
divConsole.prepend(div);
62+
}
63+
64+
function printError(message: any) {
65+
if (typeof message !== "string") {
66+
message = JSON.stringify(message, null, 2);
67+
}
68+
const div = document.createElement("div");
69+
div.innerText = "Error: " + message;
70+
div.className = "error";
71+
divConsole.prepend(div);
72+
}

package.json

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"name": "api-example-deployment",
3+
"version": "0.0.1",
4+
"description": "",
5+
"main": "index.html",
6+
"scripts": {
7+
"start": "parcel index.html --open",
8+
"build": "parcel build index.html"
9+
},
10+
"dependencies": {
11+
"@0xcert/client": "1.0.0-beta",
12+
"@0xcert/ethereum-metamask-provider": "2.0.0-beta"
13+
},
14+
"devDependencies": {
15+
"parcel-bundler": "^1.6.1"
16+
},
17+
"keywords": []
18+
}

src/config.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export const config = {
2+
deploymentRef: "",
3+
client: null
4+
};

src/example.ts

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import {
2+
MetamaskProvider,
3+
buildGatewayConfig,
4+
NetworkKind
5+
} from "@0xcert/ethereum-metamask-provider";
6+
import { Client, Priority, AssetLedgerCapability } from "@0xcert/client";
7+
import { config } from "./config";
8+
9+
// We create a new instance of metamask provider.
10+
const provider = new MetamaskProvider({
11+
gatewayConfig: buildGatewayConfig(NetworkKind.RINKEBY)
12+
});
13+
14+
export async function init() {
15+
// We first check if metamask is already enabled.
16+
if (!(await provider.isEnabled())) {
17+
// If metamask is not enabled, we enable it.
18+
await provider.enable();
19+
}
20+
21+
config.client = new Client({
22+
provider,
23+
apiUrl: "https://api-staging.0xcert.org"
24+
});
25+
26+
return config.client.init();
27+
}
28+
29+
export async function createDeployment() {
30+
const deployment = await config.client.createDeployment(
31+
{
32+
name: "Math Course Certificate",
33+
symbol: "MCC",
34+
uriPrefix: "https://0xcert.org/assets/",
35+
uriPostfix: ".json",
36+
schemaId:
37+
"3f4a0870cd6039e6c987b067b0d28de54efea17449175d7a8cd6ec10ab23cc5d", // base asset schemaId
38+
capabilities: [
39+
AssetLedgerCapability.TOGGLE_TRANSFERS,
40+
AssetLedgerCapability.DESTROY_ASSET,
41+
AssetLedgerCapability.REVOKE_ASSET,
42+
AssetLedgerCapability.UPDATE_ASSET
43+
],
44+
ownerId: config.client.provider.accountId
45+
},
46+
Priority.LOW
47+
);
48+
49+
config.deploymentRef = deployment.data.ref;
50+
return deployment;
51+
}
52+
53+
export async function getDeploymentInfo() {
54+
return config.client.getDeployment(config.deploymentRef);
55+
}

style.css

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
button {
2+
background-color: #0c71ff;
3+
border: none;
4+
color: white;
5+
padding: 10px 25px;
6+
text-align: center;
7+
text-decoration: none;
8+
display: inline-block;
9+
font-size: 14px;
10+
border-radius: 5px;
11+
margin: 1px;
12+
}
13+
14+
button:hover {
15+
background-color: #3c8cff;
16+
}
17+
18+
#console {
19+
background-color: black;
20+
margin: 30px auto;
21+
max-height: 200px;
22+
padding: 10px;
23+
overflow: auto;
24+
border-radius: 5px;
25+
font-size: 14px;
26+
font-family: "Courier New", Courier, monospace;
27+
}
28+
29+
#console div {
30+
color: white;
31+
margin-left: 30px;
32+
position: relative;
33+
}
34+
35+
#console div.error {
36+
color: red;
37+
}
38+
39+
#console div.warning {
40+
color: yellow;
41+
}
42+
43+
#console div::before {
44+
color: white;
45+
content: ">";
46+
position: absolute;
47+
left: -20px;
48+
}

tsconfig.json

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"compilerOptions": {
3+
"module": "commonjs",
4+
"jsx": "preserve",
5+
"esModuleInterop": true,
6+
"sourceMap": true,
7+
"allowJs": true,
8+
"lib": [
9+
"es6",
10+
"dom"
11+
],
12+
"rootDir": "src",
13+
"moduleResolution": "node"
14+
}
15+
}

0 commit comments

Comments
 (0)