Skip to content

Commit 2368cdd

Browse files
Juek396nearnshaw
Juek396
and
nearnshaw
authored
Displaying NFT Info UI In SDK7 (Easily) (#149)
* Add files via upload Signed-off-by: Juek396 <154472907+Juek396@users.noreply.github.com> * Add files via upload Signed-off-by: Juek396 <154472907+Juek396@users.noreply.github.com> * Delete Simple-NFT/src/Resources.zip Signed-off-by: Juek396 <154472907+Juek396@users.noreply.github.com> * Create Note Signed-off-by: Juek396 <154472907+Juek396@users.noreply.github.com> * Add files via upload Signed-off-by: Juek396 <154472907+Juek396@users.noreply.github.com> * clean up and lint * use different NFTs --------- Signed-off-by: Juek396 <154472907+Juek396@users.noreply.github.com> Co-authored-by: nearnshaw <earnshaw.nico@gmail.com>
1 parent 18b5113 commit 2368cdd

File tree

5 files changed

+169
-43
lines changed

5 files changed

+169
-43
lines changed

‎Simple-NFT/package.json

-10
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,6 @@
66
"@dcl/js-runtime": "latest",
77
"@dcl/sdk": "latest"
88
},
9-
"engines": {
10-
"node": ">=16.0.0",
11-
"npm": ">=6.0.0"
12-
},
13-
"prettier": {
14-
"semi": false,
15-
"singleQuote": true,
16-
"printWidth": 120,
17-
"trailingComma": "none"
18-
},
199
"scripts": {
2010
"build": "sdk-commands build",
2111
"deploy": "sdk-commands deploy",

‎Simple-NFT/src/Resources/nftUI.ts

+103
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
import { InputAction, MeshCollider, MeshRenderer, NftShape, Transform, engine, pointerEventsSystem } from '@dcl/sdk/ecs'
2+
import { Quaternion, Vector3 } from '@dcl/sdk/math'
3+
import { openNftDialog } from '~system/RestrictedActions'
4+
5+
export function displayNFTUI(contractAd: string, TokenID: string): void {
6+
openNftDialog({
7+
urn: 'urn:decentraland:ethereum:erc721:' + contractAd + ':' + TokenID
8+
})
9+
console.log('Displaying UI')
10+
}
11+
12+
export function MakeNFTFrame(
13+
contractAd: string,
14+
TokenID: string,
15+
positionx: number,
16+
positiony: number,
17+
positionz: number,
18+
scalex: number,
19+
scaley: number,
20+
scalez: number,
21+
rotationx: number,
22+
rotationy: number,
23+
rotationz: number
24+
): void {
25+
const nft = engine.addEntity()
26+
27+
const interaction = engine.addEntity()
28+
29+
MeshCollider.setBox(interaction)
30+
31+
const shape = NftShape.create(nft, {
32+
urn: 'urn:decentraland:ethereum:erc721:' + contractAd + ':' + TokenID
33+
})
34+
35+
Transform.create(nft, {
36+
position: Vector3.create(positionx, positiony, positionz),
37+
scale: Vector3.create(scalex, scaley, scalez),
38+
rotation: Quaternion.fromEulerDegrees(rotationx, rotationy, rotationz)
39+
})
40+
41+
Transform.create(interaction, {
42+
position: Vector3.create(positionx, positiony, positionz),
43+
scale: Vector3.create(scalex, scaley, scalez),
44+
rotation: Quaternion.fromEulerDegrees(rotationx, rotationy, rotationz)
45+
})
46+
47+
console.log('Shape Created')
48+
}
49+
50+
export function createFullNFT(
51+
contractAd: string,
52+
TokenID: string,
53+
positionx: number,
54+
positiony: number,
55+
positionz: number,
56+
scalex: number,
57+
scaley: number,
58+
scalez: number,
59+
rotationx: number,
60+
rotationy: number,
61+
rotationz: number
62+
): void {
63+
const nft = engine.addEntity()
64+
65+
const interaction = engine.addEntity()
66+
67+
MeshCollider.setBox(interaction)
68+
69+
const shape = NftShape.create(nft, {
70+
urn: 'urn:decentraland:ethereum:erc721:' + contractAd + ':' + TokenID
71+
})
72+
73+
Transform.create(nft, {
74+
position: Vector3.create(positionx, positiony, positionz),
75+
scale: Vector3.create(scalex, scaley, scalez),
76+
rotation: Quaternion.fromEulerDegrees(rotationx, rotationy, rotationz)
77+
})
78+
79+
Transform.create(interaction, {
80+
position: Vector3.create(positionx, positiony, positionz),
81+
scale: Vector3.create(scalex, scaley, scalez),
82+
rotation: Quaternion.fromEulerDegrees(rotationx, rotationy, rotationz)
83+
})
84+
85+
pointerEventsSystem.onPointerDown(
86+
{
87+
entity: interaction,
88+
opts: {
89+
button: InputAction.IA_POINTER,
90+
hoverText: 'Click Here'
91+
}
92+
},
93+
function () {
94+
const urn2 = 'urn:decentraland:ethereum:erc721:' + contractAd + ':' + TokenID
95+
96+
console.log(urn2)
97+
98+
openNftDialog({
99+
urn: 'urn:decentraland:ethereum:erc721:' + contractAd + ':' + TokenID
100+
})
101+
}
102+
)
103+
}

‎Simple-NFT/src/factory.ts

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import {
2+
Entity,
3+
engine,
4+
Transform,
5+
MeshRenderer,
6+
MeshCollider,
7+
PointerEvents,
8+
PointerEventType,
9+
InputAction,
10+
Material
11+
} from '@dcl/sdk/ecs'
12+
13+
import { Color4 } from '@dcl/sdk/math'
14+
15+
// Cube factory
16+
export function createCube(x: number, y: number, z: number, spawner = true): Entity {
17+
const entity = engine.addEntity()
18+
19+
Transform.create(entity, { position: { x, y, z } })
20+
21+
// set how the cube looks and collides
22+
MeshRenderer.setBox(entity)
23+
MeshCollider.setBox(entity)
24+
25+
// Create PointerEvent with the hover feedback.
26+
// We are going to check the onClick event on the changeColorSystem.
27+
PointerEvents.create(entity, {
28+
pointerEvents: [
29+
{ eventType: PointerEventType.PET_DOWN, eventInfo: { button: InputAction.IA_POINTER, hoverText: 'Change Color' } }
30+
]
31+
})
32+
33+
return entity
34+
}

‎Simple-NFT/src/index.ts

+30-32
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,46 @@
11
import {
2-
engine,
3-
GltfContainer,
42
InputAction,
5-
inputSystem,
6-
Material,
73
MeshCollider,
84
MeshRenderer,
95
NftFrameType,
106
NftShape,
11-
pointerEventsSystem,
12-
Transform
7+
Transform,
8+
engine,
9+
pointerEventsSystem
1310
} from '@dcl/sdk/ecs'
14-
import { Color4, Quaternion, Vector3 } from '@dcl/sdk/math'
11+
import { Color4, Vector3 } from '@dcl/sdk/math'
12+
import { MakeNFTFrame, createFullNFT, displayNFTUI } from './Resources/nftUI'
1513
import { setupUi } from './ui'
1614

1715
export function main() {
18-
const painting = engine.addEntity()
19-
Transform.create(painting, {
20-
position: Vector3.create(4, 1.5, 4)
21-
})
16+
setupUi()
2217

23-
NftShape.create(painting, {
18+
// Shortcut to make an NFT picture frame
19+
MakeNFTFrame('0x07ccfd0fbada4ac3c22ecd38037ca5e5c0ad8cfa', '48', 8, 1, 8, 1, 1, 1, 0, 0, 0)
20+
21+
// Shortcut to make an NFT picture frame that is also clickable and includes a UI
22+
createFullNFT('0xc1f4b0eea2bd6690930e6c66efd3e197d620b9c2', '4068', 10, 1, 10, 1, 1, 1, 0, 0, 0)
23+
24+
// Manually create an NFT picture frame that is also clickable and includes a UI
25+
const manualNFT = engine.addEntity()
26+
Transform.create(manualNFT, {
27+
position: Vector3.create(5, 1, 5)
28+
})
29+
NftShape.create(manualNFT, {
2430
urn: 'urn:decentraland:ethereum:erc721:0x06012c8cf97bead5deae237070f9587f8e7a266d:229795',
2531
color: Color4.Red(),
2632
style: NftFrameType.NFT_GOLD_CARVED
2733
})
28-
29-
const floor = engine.addEntity()
30-
Transform.create(floor, {
31-
position: Vector3.create(8, 0, 8),
32-
scale: Vector3.create(1.6, 0.1, 1.6)
33-
})
34-
GltfContainer.create(floor, {
35-
src: 'assets/models/FloorBaseGrass.glb'
36-
})
37-
38-
const wall = engine.addEntity()
39-
Transform.create(wall, {
40-
position: Vector3.create(4.5, 1, 4.1),
41-
scale: Vector3.create(4, 3, 0.05)
42-
})
43-
MeshCollider.setBox(wall)
44-
MeshRenderer.setBox(wall)
45-
46-
// UI with GitHub link
47-
setupUi()
34+
pointerEventsSystem.onPointerDown(
35+
{
36+
entity: manualNFT,
37+
opts: {
38+
button: InputAction.IA_POINTER,
39+
hoverText: 'Click Here'
40+
}
41+
},
42+
function () {
43+
displayNFTUI('0x06012c8cf97bead5deae237070f9587f8e7a266d', '229795')
44+
}
45+
)
4846
}

‎Simple-NFT/src/ui.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ const uiComponent = () => (
1717
]
1818
)
1919

20+
2021
export function setupUi() {
2122
ReactEcsRenderer.setUiRenderer(uiComponent)
2223
}
@@ -58,6 +59,7 @@ function GitHubLinkUi() {
5859
textAlign="middle-center"
5960
/>
6061
</UiEntity>
62+
ReactEcsRenderer.setUiRenderer(uiComponent)
6163
}
6264

6365
function descriptionUI() {
@@ -102,7 +104,6 @@ function descriptionUI() {
102104
height: "auto",
103105
alignSelf: "center",
104106
margin: '16px 16px 8px 16px',
105-
106107
}}
107108
/>
108109
</UiEntity>

0 commit comments

Comments
 (0)