Merge pull request #696 from kodadot/main

Bugs here and there

Author: yangwao

README.md

@@ -163,20 +163,23 @@ export default class Summary extends Vue {
 
 # 🏃‍♀️ Quick Setup
 
+Here is a quick setup guide for the project.
+
 ```bash
 git clone https://github.com/kodadot/nft-gallery.git
 touch .env.local
 ```
 
-in `.env.local` add following urls:
+in `.env.local` add following properties:
 ```bash
 VUE_APP_KEYRING=true
 VUE_APP_I18N_LOCALE=en
 VUE_APP_I18N_FALLBACK_LOCALE=en
-VUE_APP_SLATE_KEY=
-VUE_APP_SUBQUERY_URL=https://api.subquery.network/sq/vikiival/magick
+VUE_APP_SUBQUERY_URL=https://api.subquery.network/sq/vikiival/magick-west
 ```
-you can obtain api key for slate [here](slate.host)
+[You can obtain some Westend (WND)](https://matrix.to/#/#westend_faucet:matrix.org)
+
+If you want to access Kusama's GraphQL API, **remove** `-west` from `VUE_APP_SUBQUERY_URL`
 
 > to run UI
 
@@ -192,6 +195,13 @@ yarn start
 yarn lambda
 ```
 
+### Caveats:
+Netlify functions are **unable** to read `.env.local`.
+Therefore, you need to manually update pinata keys in each function.
+Functions are located in `src-functions/`
+
+[You can obtain Master Pinata Keys here](https://app.pinata.cloud/keys)
+
 ## Running local Polkadot and subquery nodes
 
 To run the full local environment we recommend you to run a [polkadot/Kusama node](https://github.com/paritytech/polkadot).

src/components/rmrk/Create/CreateCollection.vue

@@ -199,12 +199,13 @@ export default class CreateCollection extends Mixins(
   private async submit() {
     this.isLoading = true;
     this.status = 'loader.ipfs';
-    const { api } = Connector.getInstance();
-    const metadata = await this.constructMeta();
-    const mint = this.constructRmrkMint(metadata);
-    const mintString = NFTUtils.encodeCollection(mint, this.version);
 
     try {
+      const metadata = await this.constructMeta();
+      const mint = this.constructRmrkMint(metadata);
+      const mintString = NFTUtils.encodeCollection(mint, this.version);
+
+      const { api } = Connector.getInstance();
       showNotification(mintString);
       const cb = !this.hasSupport
         ? api.tx.system.remark

src/components/rmrk/Create/CreateItem.vue

@@ -56,7 +56,7 @@
       </b-switch>
     </b-field>
 
-    <BalanceInput v-model="vPrice" label="Price" />
+    <BalanceInput @input="updateMeta" label="Price" />
     <b-message
       v-if="hasPrice"
       icon="exclamation-triangle"
@@ -101,6 +101,11 @@ export default class CreateItem extends Vue {
   @Prop(Number) public max!: number;
   @Prop(Number) public alreadyMinted!: number;
 
+  protected updateMeta(value: number) {
+    console.log(typeof value, value);
+    this.vPrice = value;
+  }
+
   get fileType() {
     return resolveMedia(this.vFile?.type);
   }

src/components/rmrk/Create/SimpleMint.vue

@@ -437,9 +437,6 @@ export default class SimpleMint extends Mixins(
 
   public async listForSale(remarks: NFT[], originalBlockNumber: string) {
     try {
-      const { api } = Connector.getInstance();
-      this.isLoading = true;
-
       const { price, version } = this;
       showNotification(
         `[APP] Listing NFT to sale for ${formatBalance(price, {
@@ -460,6 +457,9 @@ export default class SimpleMint extends Mixins(
         return;
       }
 
+      this.isLoading = true;
+      const { api } = Connector.getInstance();
+
       const cb = api.tx.utility.batchAll;
       const args = onlyNfts.map(this.toRemark);
 

src/utils/WithKeyring.ts

@@ -29,11 +29,11 @@ export default class WithKeyring extends Vue {
     // console.log('keyring initX');
   }
 
-  public async loadKeyring(): Promise<void> {
+  public async loadKeyring(ss58?: number): Promise<void> {
     this.keyringLoaded = true;
     // this.keys = keyring;
     this.mapAccounts();
-    await this.extensionAccounts();
+    await this.extensionAccounts(ss58);
   }
 
   public mapAccounts(): void {
@@ -48,17 +48,20 @@ export default class WithKeyring extends Vue {
     return this.chainProperties?.ss58Format
   }
 
-  public async extensionAccounts() {
+  public async extensionAccounts(ss58?: number) {
     if (!isWeb3Injected) {
       console.warn('Extension not working, reload might fix things')
       await enableExtension();
     }
 
-    this.importedAccounts = await web3Accounts({ ss58Format: correctFormat(this.ss58Format) >= 0 ? correctFormat(this.ss58Format) : correctFormat(this.prefixByStore)  });
+    const ss58Changed = typeof ss58 === 'number'
+    const ss58Forever = ss58Changed ? ss58 : this.ss58Format
 
-    if (!this.accountId && this.importedAccounts?.length && !process.env.VUE_APP_KEYRING) {
-      this.$store.dispatch('setAuth', { address: this.importedAccounts[0]?.address });
-    }
+    this.importedAccounts = await web3Accounts({ ss58Format: correctFormat(ss58Forever) >= 0 ? correctFormat(ss58Forever) : correctFormat(this.prefixByStore)  });
+
+    // if ((!this.accountId || ss58Changed) && this.importedAccounts?.length && process.env.VUE_APP_KEYRING) {
+    //   this.$store.dispatch('setAuth', { address: this.importedAccounts[0]?.address });
+    // }
   }
 
   get accountId() {
@@ -90,7 +93,7 @@ export default class WithKeyring extends Vue {
     console.log('ss58Format', val)
     // https://github.com/polkadot-js/ui/pull/494
     keyring.setSS58Format(Number(val))
-    this.loadKeyring();
+    this.loadKeyring(Number(val));
   }
 
   // public passwordRequired(address: string): boolean {