Merge branch 'rmrk-lite' of github.com:kodadot/nft-gallery into rmrk-…

…lite
kodadot · Feb 10, 2021 · ccdcd4d · ccdcd4d
2 parents 42812e6 + c749ece
commit ccdcd4d
Show file tree

Hide file tree

Showing 8 changed files with 298 additions and 151 deletions.
diff --git a/dashboard/package.json b/dashboard/package.json
@@ -23,7 +23,7 @@
     "@polkadot/vue-identicon": "^0.68.1",
     "@polkadot/wasm-crypto": "^3.2.2",
     "@polkadot/wasm-crypto-wasm": "^3.2.2",
-    "@textile/hub": "^4.0.0",
+    "@textile/hub": "^6.0.1",
     "@types/file-saver": "^2.0.1",
     "@vue-polkadot/vue-api": "^0.0.27",
     "@vue-polkadot/vue-identicon": "^0.0.8",

diff --git a/dashboard/src/App.vue b/dashboard/src/App.vue
@@ -30,7 +30,7 @@ export default class Dashboard extends Vue {
     keyring.loadAll({
       ss58Format: this.ss58Format || 42,
       type: 'sr25519',
-      isDevelopment: Boolean(process.env.VUE_APP_KEYRING) || false,
+      isDevelopment: process.env.VUE_APP_KEYRING === 'true' || false,
     });
   }
 

diff --git a/dashboard/src/components/rmrk/Create/CreateItem.vue b/dashboard/src/components/rmrk/Create/CreateItem.vue
@@ -76,6 +76,7 @@ interface NFTAndMeta extends NFT {
 })
 export default class CreateItem extends Vue {
   @Prop() public index!: number;
+  @Prop() public alreadyMinted!: number;
   @Prop() public view!: NFTAndMeta;
   private tooltip: object = {
     name: 'Name of your token',
@@ -92,7 +93,7 @@ export default class CreateItem extends Vue {
   }
 
   get serialNumber(): string {
-    return String(this.index + 1).padStart(16, '0');
+    return String(this.index + 1 + this.alreadyMinted).padStart(16, '0');
   }
 
   private async m() {

diff --git a/dashboard/src/components/rmrk/Create/CreateToken.vue b/dashboard/src/components/rmrk/Create/CreateToken.vue
@@ -17,7 +17,8 @@
       <CreateItem
         v-for="(item, index) in added"
         :key="index"
-        :index="index + alreadyMinted"
+        :index="index"
+        :alreadyMinted="alreadyMinted"
         :view="item"
         @update="handleUpdate"
         @upload="uploadFile"

diff --git a/dashboard/src/components/rmrk/Gallery/Gallery.vue b/dashboard/src/components/rmrk/Gallery/Gallery.vue
@@ -59,6 +59,8 @@ import { fetchNFTMetadata, sanitizeIpfsUrl } from '../utils';
 
 type NFTType = NFT | NFTWithMeta;
 
+const nftSort = (a: any, b: any) => b._mod - a._mod
+
 @Component({})
 export default class Gallery extends Vue {
   private nfts: NFTType[] = [];
@@ -75,7 +77,7 @@ export default class Gallery extends Vue {
     this.isLoading = true;
 
     try {
-      this.nfts = await rmrkService.getAllNFTs();
+      this.nfts = await rmrkService.getAllNFTs().then(arr => arr.slice().sort(nftSort));
       this.collectionMeta();
     } catch (e) {
       console.warn(e);

diff --git a/dashboard/src/components/rmrk/service/RmrkService.ts b/dashboard/src/components/rmrk/service/RmrkService.ts
@@ -5,6 +5,7 @@ import { RmrkEvent, RMRK, RmrkInteraction } from '../types'
 import NFTUtils from './NftUtils'
 import { emptyObject } from '@/utils/empty';
 import Consolidator, { generateId } from './Consolidator';
+import { keyInfo as keysToTheKingdom } from '@/textile'
 
 export type RmrkType = Collection | NFT | Emotion
 
@@ -43,7 +44,20 @@ export class RmrkService extends TextileService<RmrkType> implements State {
     return rmrkService
   }
 
+  protected refreshContext() {
+    return this._client.context.withKeyInfo(keysToTheKingdom)
+  }
 
+  protected async checkExpiredOrElseRefresh() {
+    console.log('checkExpiredOrElseRefresh', this.isAuthExpired)
+    if (this.isAuthExpired) {
+      try {
+        await this.refreshContext()
+      } catch (e) {
+        console.error(`[RMRK] Unable to refresh context::\n ${e}`)
+      }  
+    }
+  }
 
   public async onUrlChange(ss58: string | undefined | number): Promise<void> {
     const name = ss58 ||(typeof ss58 === 'number' && ss58 >= 0) ? String(ss58) : 'local';
@@ -282,6 +296,7 @@ export class RmrkService extends TextileService<RmrkType> implements State {
   }
 
   private async mint(view: object, caller: string, blocknumber?: string | number): Promise<Collection> {
+    await this.checkExpiredOrElseRefresh()
     const collection = computeAndUpdateCollection(view as Collection);
     this.useCollection();
 
@@ -308,6 +323,7 @@ export class RmrkService extends TextileService<RmrkType> implements State {
   }
 
   private async mintNFT(view: object, caller: string, blocknumber?: string | number): Promise<NFT> {
+    await this.checkExpiredOrElseRefresh()
     const item = computeAndUpdateNft(view as NFT, blocknumber);
     this.useCollection();
     await this.shouldExist(item.collection);

diff --git a/dashboard/src/components/rmrk/service/TextileService.ts b/dashboard/src/components/rmrk/service/TextileService.ts
@@ -26,6 +26,9 @@ export default abstract class TextileService<T> {
     return TextileService.threadId(this._dbStore)
   }
 
+  get isAuthExpired(): boolean { 
+    return (this._client.context as any).isExpired
+  }
 
   abstract get collectioName(): string;
   abstract set collectioName(name: string);
@@ -117,8 +120,6 @@ export default abstract class TextileService<T> {
     } catch(e) {
       return false
     }
-
-
   }
 
 }