feat: Connect to paras testnet and render NFTs in series

src/gameEvents.js

@@ -7,3 +7,4 @@ export const START_LEVEL = 'sl';
 export const RESTART_LEVEL = 'r';
 export const START_NEXT_LEVEL = 'snl';
 export const ARCADIAN_HEAD_SELECTED = 'ahs';
+export const NEAR_TOKENS_ADDED = 'n';

src/index.html

@@ -13,7 +13,7 @@
       </div>
       <div id="main" class="overlay">
         <button id="loginoutBtn">Loading....</button>
-        <button id="nearLevelBtn" disabled>NEAR Levels</button>
+        <button id="nearLevelBtn">NEAR Levels</button>
         <button id="levelBtn">Select Level</button>
         <button id="bonusBtn">Bonus Content</button>
       </div>
@@ -25,6 +25,11 @@
         <img class="close-icon" width="40px" />
         <div id="levels-grid"></div>
       </div>
+      <div id="near-levels" class="overlay hide">
+        <img class="close-icon" width="40px" />
+        <div id="loadingNearLevels">Loading NEAR levels...</div>
+        <div id="near-levels-grid"></div>
+      </div>
       <div id="level-dialog" class="overlay hide">
         <button id="nextBtn">Play next level</button>
         <button id="replayBtn">Replay level</button>

src/index.js

@@ -4,15 +4,18 @@ import cssText from 'bundle-text:./styles.css';
 
 import { Game } from './Game';
 import { initLoginLogout } from './near/nearLogin';
-import { NearConnection } from './near/nearConnection';
+import {
+  HANG_BY_A_THREAD_SERIES_TESTNET,
+  NearConnection,
+} from './near/nearConnection';
 import { initMenu } from './menu';
+import { setNftTokens } from './store';
 
 const init = () => {
   addStyles();
   new Game();
   initNear();
   initMenu();
-  // fetchArcadianHeads();
 };
 
 const addStyles = () => {
@@ -28,6 +31,15 @@ const initNear = () => {
     const nearConnection = new NearConnection();
     nearConnection.initContract().then(() => {
       initLoginLogout(nearConnection);
+      const promises = [
+        nearConnection.nft_tokens_for_owner(nearConnection.accountId),
+        nearConnection.nft_tokens_by_series(HANG_BY_A_THREAD_SERIES_TESTNET),
+      ];
+      Promise.all(promises).then(([tokensForOwner, tokensBySeries]) => {
+        setNftTokens(tokensForOwner, tokensBySeries);
+        console.log('nft_tokens_for_owner', tokensForOwner);
+        console.log('nft_tokens_by_series', tokensBySeries);
+      });
     });
   });
 };

src/menu.js

@@ -4,14 +4,16 @@ import skull from 'data-url:./assets/img/skull.png';
 import { emit, on } from 'kontra';
 import {
   LEVEL_COMPLETE,
+  NEAR_TOKENS_ADDED,
   RESTART_LEVEL,
   START_LEVEL,
   START_NEXT_LEVEL,
 } from './gameEvents';
 import { fetchArcadianHeads } from './arcadianApi';
-import { setSelectedArcadian } from './store';
+import { nftTokensBySeries, setSelectedArcadian } from './store';
+import { IPFS_BASE_PATH } from './near/nearConnection';
 
-const overlayIds = ['main', 'bonus', 'levels', 'level-dialog'];
+const overlayIds = ['main', 'bonus', 'levels', 'level-dialog', 'near-levels'];
 const levels = 20;
 export const initMenu = () => {
   addButtonListeners();
@@ -36,6 +38,21 @@ const initLevels = () => {
   }
 };
 
+const initNearLevels = ({ nftTokensBySeries, nftTokensForOwner }) => {
+  const nearLoadingEl = document.getElementById('loadingNearLevels');
+  if (nearLoadingEl) nearLoadingEl.remove();
+  const levelsGridEl = document.getElementById('near-levels-grid');
+  nftTokensBySeries.forEach((l) => {
+    const levelEl = document.createElement('button');
+    const imgEl = document.createElement('img');
+    imgEl.setAttribute('src', IPFS_BASE_PATH + l.metadata.media);
+    levelEl.textContent = l.metadata.title;
+    levelEl.appendChild(imgEl);
+    levelEl.classList.add('level-item');
+    levelsGridEl.appendChild(levelEl);
+  });
+};
+
 const initBonusContent = () => {
   const bonusGridEl = document.getElementById('bonus-grid');
   pouplateBonusGrid(bonusGridEl);
@@ -99,6 +116,9 @@ const onContainerClick = (e) => {
     case 'hamburger':
       showOverlay('main');
       break;
+    case 'nearLevelBtn':
+      showOverlay('near-levels');
+      break;
     case 'nextBtn':
       showOverlay();
       emit(START_NEXT_LEVEL);
@@ -132,8 +152,12 @@ const showOverlay = (id) => {
 
 const listenForGameEvents = () => {
   on(LEVEL_COMPLETE, onLevelComplete);
+  on(NEAR_TOKENS_ADDED, onNearTokensAdded);
 };
 const onLevelComplete = () => {
   showOverlay('level-dialog');
   document.getElementById('nextBtn').focus();
 };
+const onNearTokensAdded = ({ nftTokensBySeries, nftTokensForOwner }) => {
+  initNearLevels({ nftTokensBySeries, nftTokensForOwner });
+};

src/near/config.js

@@ -1,13 +1,14 @@
 const CONTRACT_NAME = 'dev-1618829854588-2430734';
-
+const CONTARCT_NAME_TESTNET = 'paras-token-v2.testnet';
+const CONTARCT_NAME_MAINNET = 'x.paras.near';
 function getConfig(env) {
   switch (env) {
     // case 'production':
     // case 'mainnet':
     //   return {
     //     networkId: 'mainnet',
     //     nodeUrl: 'https://rpc.mainnet.near.org',
-    //     contractName: CONTRACT_NAME,
+    //     contractName: CONTARCT_NAME_MAINNET,
     //     walletUrl: 'https://wallet.near.org',
     //     helperUrl: 'https://helper.mainnet.near.org',
     //     explorerUrl: 'https://explorer.mainnet.near.org',
@@ -17,7 +18,7 @@ function getConfig(env) {
       return {
         networkId: 'testnet',
         nodeUrl: 'https://rpc.testnet.near.org',
-        contractName: CONTRACT_NAME,
+        contractName: CONTARCT_NAME_TESTNET,
         walletUrl: 'https://wallet.testnet.near.org',
         helperUrl: 'https://helper.testnet.near.org',
         explorerUrl: 'https://explorer.testnet.near.org',

src/near/nearConnection.js

@@ -1,5 +1,11 @@
 import getConfig from './config';
 
+export const HANG_BY_A_THREAD_SERIES_TESTNET = '2036';
+export const MIRRORS_SERIES_TESTNET = '494';
+export const PARAS_BASE_PATH_TESTNET =
+  'https://testnet.paras.id/token/paras-token-v2.testnet::';
+export const IPFS_BASE_PATH = 'https://ipfs.fleek.co/ipfs/';
+
 export class NearConnection {
   walletConnection;
   contract;
@@ -8,6 +14,7 @@ export class NearConnection {
   ready; //promise
   nearConfig = getConfig('development');
   resolveContract;
+
   constructor() {
     this.ready = new Promise((resolve, reject) => {
       this.resolveContract = resolve;
@@ -33,7 +40,7 @@ export class NearConnection {
       this.nearConfig.contractName,
       {
         // View methods are read only. They don't modify the state, but usually return some value.
-        viewMethods: ['getScores', 'getScore', 'getName'],
+        viewMethods: ['nft_tokens_for_owner', 'nft_tokens_by_series'],
         // Change methods can modify the state. But you don't receive the returned value when called.
         changeMethods: ['setGreeting', 'setScore', 'setName'],
       }
@@ -55,56 +62,11 @@ export class NearConnection {
     this.walletConnection.requestSignIn(this.nearConfig.contractName);
   }
 
-  setScore(levelName, score, name) {
-    const json = JSON.stringify({ score, name });
-    return this.contract.setScore({
-      levelName,
-      json,
-    });
-  }
-
-  getScores(levelName) {
-    const scoreBoard = this.contract.getScores({ levelName });
-    return scoreBoard;
+  nft_tokens_for_owner(account_id) {
+    return this.contract.nft_tokens_for_owner({ account_id });
   }
 
-  getScore(levelName) {
-    const accountId = this.accountId;
-    return this.contract.getScore({ levelName, accountId });
-  }
-
-  setName(name) {
-    if (
-      name &&
-      name != this.userName &&
-      this.walletConnection &&
-      this.walletConnection.isSignedIn()
-    ) {
-      this.userName = name;
-      return this.contract.setName({ name });
-    }
-    return Promise.resolve();
-  }
-
-  async getName() {
-    if (this.userName) {
-      return Promise.resolve(this.userName);
-    }
-    const accountId = this.accountId;
-    return new Promise((resolve, reject) => {
-      this.contract
-        .getName({ accountId })
-        .then((res) => {
-          if (res && res.match(/[ `!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~]/g)) {
-            this.userName = 'Invalid username';
-          } else {
-            this.userName = res;
-          }
-          resolve(res);
-        })
-        .catch((err) => {
-          reject(err);
-        });
-    });
+  nft_tokens_by_series(token_series_id) {
+    return this.contract.nft_tokens_by_series({ token_series_id });
   }
 }

src/near/nearLogin.js

@@ -17,9 +17,6 @@ export const initLoginLogout = (nearConnection) => {
     nearConnection.walletConnection.isSignedIn()
   ) {
     loginoutEl.innerHTML = 'Logout from NEAR wallet';
-    nearConnection.getName().then((res) => {
-      loginoutEl.innerHTML = `Logout from NEAR wallet`;
-    });
   } else {
     loginoutEl.innerHTML = 'Login to NEAR wallet';
   }

src/store.js

@@ -1,10 +1,12 @@
 import { emit } from 'kontra';
-import { ARCADIAN_HEAD_SELECTED } from './gameEvents';
+import { ARCADIAN_HEAD_SELECTED, NEAR_TOKENS_ADDED } from './gameEvents';
 
 export let gameWidth = 0;
 export let gameHeight = 0;
 const arcadianData = {};
 let selectedArcadian = {};
+export let nftTokensBySeries = [];
+export let nftTokensForOwner = [];
 
 export const setGameWidth = (width) => {
   gameWidth = width;
@@ -26,3 +28,9 @@ export const setSelectedArcadian = (id) => {
 export const getSelectedArcadian = () => {
   return selectedArcadian;
 };
+
+export const setNftTokens = (tokensForOwner, tokensBySeries) => {
+  nftTokensForOwner = tokensForOwner;
+  nftTokensBySeries = tokensBySeries;
+  emit(NEAR_TOKENS_ADDED, { nftTokensBySeries, nftTokensForOwner });
+};

src/styles.css

@@ -104,8 +104,18 @@ button:disabled {
   border-radius: 4px;
   background-color: var(--fgc2);
 }
+.level-item:hover {
+  background-color: var(--bgc2);
+  color: var(--fgc2);
+}
+.level-item img {
+  width: 100%;
+  height: auto;
+}
+
 #levels-grid,
-#bonus-grid {
+#bonus-grid,
+#near-levels-grid {
   width: 640px;
   height: 440px;
   min-height: 440px;
@@ -118,6 +128,15 @@ button:disabled {
   display: grid;
   justify-items: center;
 }
+#near-levels-grid {
+  grid-template-columns: repeat(2, 1fr);
+}
+#near-levels-grid .level-item {
+  flex-flow: column;
+  width: 250px;
+  height: 300px;
+}
+
 #bonus-grid {
   row-gap: 0px;
 }