subsocial

.gitignore

@@ -78,4 +78,5 @@ typings/
 .yarn-integrity
 
 # dotenv environment variables file
-.env
+.env
+.vscode/

package.json

@@ -27,6 +27,9 @@
     "@polkadot/util": "^6.9.1",
     "@polkadot/util-crypto": "^6.9.1",
     "@polkadot/vue-identicon": "^0.81.1",
+    "@subsocial/api": "^0.5.8",
+    "@subsocial/types": "^0.5.8",
+    "@subsocial/utils": "^0.4.39",
     "@textile/hub": "^6.1.2",
     "@types/file-saver": "^2.0.2",
     "@vue-polkadot/vue-api": "^0.0.34",

src-functions/pinPost.js

@@ -0,0 +1,41 @@
+import axios from "axios"
+
+exports.handler = async (event, context) => {
+
+
+  // const location = event.queryStringParameters.location || "home";
+  const BASE_URL = 'https://staging.subsocial.network/offchain/v1/ipfs/add';
+  const object = event.body;
+
+  try {
+    const { status, data } = await axios.post(BASE_URL, object, {
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+    console.log('[SUBSOCIAL] Pin JSON', status, data);
+
+    if (status < 400) {
+      return {
+        statusCode: status,
+        body: data,
+      };
+    }
+
+
+  } catch (e) {
+    console.log('Error', e.message)
+    return {
+      statusCode: 500,
+      body: e.message,
+    };
+  }
+
+  return {
+    statusCode: status,
+    body: "",
+  };
+
+
+};
+

src-functions/requestFaucet.js

@@ -0,0 +1,46 @@
+import axios from "axios"
+
+exports.handler = async (event, context) => {
+
+
+  const address = event.queryStringParameters.address;
+  const email = event.queryStringParameters.email;
+
+  if (!email || !address) {
+    return {
+      statusCode: 403,
+      body: `Cannot search without query`,
+    };
+  }
+
+  const BASE_URL = `https://app.subsocial.network/offchain/v1/offchain/faucet/confirm`;
+
+  const object = {
+    account: address,
+    email
+  };
+
+  try {
+    const { status, data } = await axios.post(BASE_URL, object, {
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+    console.log('[SUBSOCIAL] Faucet', status);
+
+    return {
+      statusCode: status,
+      body: JSON.stringify(data),
+    };
+
+
+  } catch (e) {
+    console.log('Error', e.message)
+    return {
+      statusCode: 500,
+      body: e.message,
+    };
+  }
+
+};
+

src-functions/searchPost.js

@@ -0,0 +1,40 @@
+import axios from "axios"
+
+exports.handler = async (event, context) => {
+
+
+  const query = event.queryStringParameters.query;
+
+  if (!query) {
+    return {
+      statusCode: 403,
+      body: `Cannot search without query`,
+    };
+  }
+
+  const BASE_URL = `https://app.subsocial.network/offchain/v1/offchain/search?indexes=posts&q=${query}&offset=0&limit=20`;
+
+  try {
+    const { status, data } = await axios.get(BASE_URL, {
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+    console.log('[SUBSOCIAL] Search', status);
+
+    return {
+      statusCode: status,
+      body: JSON.stringify(data),
+    };
+
+
+  } catch (e) {
+    console.log('Error', e.message)
+    return {
+      statusCode: 500,
+      body: e.message,
+    };
+  }
+
+};
+

src/App.vue

@@ -22,6 +22,7 @@ import Navbar from './components/Navbar.vue';
 import Footer from './components/Footer.vue';
 import isShareMode from '@/utils/isShareMode'
 import coingecko from '@/coingecko'
+import correctFormat from '@/utils/ss58Format'
 
 @Component<Dashboard>({
   metaInfo() {
@@ -54,7 +55,7 @@ export default class Dashboard extends Vue {
   public async loadKeyring(): Promise<void> {
     const isDevelopment = process.env.VUE_APP_KEYRING === 'true'
     keyring.loadAll({
-      ss58Format: isDevelopment ? 0 : this.ss58Format || 42,
+      ss58Format: correctFormat(this.ss58Format),
       type: 'sr25519',
       isDevelopment,
     });

src/components/rmrk/Create/AttributeTagInput.vue

@@ -40,9 +40,10 @@ export default class extends Vue {
   @Prop() public value!: Attribute[];
   @Prop({ default: 3 }) public max!: string | number;
   @Prop({ default: 'Select tags or create your own' }) public placeholder!: string;
+  @Prop(Boolean) public simple!: boolean
 
   get tags() {
-    return this.value ? this.value.map(valueOf) : []
+    return this.simple ? (this.value || []) as any[] as string[] : (this.value || []).map(valueOf)
   }
 
   set tags(value: string[]) {
@@ -51,7 +52,7 @@ export default class extends Vue {
 
   @Emit('input')
   handleInput(value: string[]) {
-    return value.map(v => ({ value: v }))
+    return this.simple ? value : value.map(v => ({ value: v }))
   }
 }
 </script>

src/components/rmrk/Gallery/EmotionList.vue

@@ -60,6 +60,6 @@ export default class extends Vue {
 }
 
 #emoji-box {
-  border: 2px solid $primary; 
+  border: 2px solid $primary;
 }
 </style>

src/components/rmrk/Gallery/GalleryItem.vue

@@ -104,7 +104,10 @@
           </template>
         </div>
       </div>
+      <hr class="comment-divider" />
+      <BaseCommentSection :nft="nft" :meta="meta" />
     </div>
+
   </div>
 </template>
 
@@ -117,12 +120,12 @@ import { NFT, NFTMetadata, Emotion, Emote } from '../service/scheme';
 import { sanitizeIpfsUrl, resolveMedia } from '../utils';
 import { emptyObject } from '@/utils/empty';
 
-import AvailableActions from './AvailableActions.vue';
+// import AvailableActions from './AvailableActions.vue';
 import { notificationTypes, showNotification } from '@/utils/notification';
-import Money from '@/components/shared/format/Money.vue';
-import Sharing from '@/components/rmrk/Gallery/Item/Sharing.vue';
-import Facts from '@/components/rmrk/Gallery/Item/Facts.vue';
-import Name from '@/components/rmrk/Gallery/Item/Name.vue';
+// import Money from '@/components/shared/format/Money.vue';
+// import/ Sharing from '@/components/rmrk/Gallery/Item/Sharing.vue';
+// import Facts from '@/components/rmrk/Gallery/Item/Facts.vue';
+// import Name from '@/components/rmrk/Gallery/Item/Name.vue';
 
 import isShareMode from '@/utils/isShareMode';
 import nftById from '@/queries/nftById.graphql'
@@ -152,15 +155,16 @@ import axios from 'axios';
   },
   components: {
     Auth: () => import('@/components/shared/Auth.vue'),
-    AvailableActions,
-    Facts,
+    AvailableActions: () => import('./AvailableActions.vue'),
+    Facts: () => import('@/components/rmrk/Gallery/Item/Facts.vue'),
     // MarkdownItVueLight: MarkdownItVueLight as VueConstructor<Vue>,
-    Money,
-    Name,
-    Sharing,
+    Money: () => import('@/components/shared/format/Money.vue'),
+    Name: () => import('@/components/rmrk/Gallery/Item/Name.vue'),
+    Sharing: () => import('@/components/rmrk/Gallery/Item/Sharing.vue'),
     Appreciation: () => import('./Appreciation.vue'),
     MediaResolver: () => import('../Media/MediaResolver.vue'),
-    PackSaver: () => import('../Pack/PackSaver.vue')
+    PackSaver: () => import('../Pack/PackSaver.vue'),
+    BaseCommentSection: () => import('@/components/subsocial/BaseCommentSection.vue')
   }
 })
 export default class GalleryItem extends Vue {
@@ -289,6 +293,11 @@ export default class GalleryItem extends Vue {
 <style lang="scss">
 @import "@/styles/variables";
 
+hr.comment-divider {
+  border-top: 1px solid lightpink;
+  border-bottom: 1px solid lightpink;
+}
+
 .gallery-item {
   .nft-title {
     margin-bottom: 24px;

src/components/rmrk/utils.ts

@@ -11,6 +11,7 @@ import {
 import api from '@/fetch';
 import { RmrkType, RmrkWithMetaType, CollectionOrNFT } from './service/RmrkService';
 import { NFTMetadata, Collection, PackMetadata, NFT, NFTWithMeta } from './service/scheme';
+import { justHash } from '@/utils/ipfs';
 
 export const SQUARE = '::'
 export const DEFAULT_IPFS_PROVIDER = 'https://ipfs.io/';
@@ -25,6 +26,14 @@ export const ipfsProviders: Record<ProviderKeyType, string> = {
   kodadot: 'https://kodadot.mypinata.cloud/',
 }
 
+export const ipfsHashToUrl = (ipfsHash?: string, provider?: ProviderKeyType) => {
+  if (justHash(ipfsHash)) {
+    return `${resolveProvider(provider)}ipfs/${ipfsHash}`
+  }
+
+  return ipfsHash
+}
+
 const resolveProvider = (key: ProviderKeyType = 'kodadot') => ipfsProviders[key]
 
 export const zip = <T1, T2, T3>(a: T1[], b: T2[], cb?: (el: (T1 | T2)[]) => T3): T3[] | (T1 | T2)[][] => {

src/components/shared/modals/ModalWrapper.vue

@@ -1,15 +1,17 @@
 <template>
   <div>
-    <b-button
-      class="button"
-      :type="buttonType"
-      :icon-left="icon"
-      :expanded="expanded"
-      @click="isModalActive = true"
-      :class="{ 'modal-wrapper-button__right': isRight }"
-    >
-      <template v-if="label">{{ label }}</template>
-    </b-button>
+    <slot name="trigger" v-bind:handleOpen="handleOpen">
+      <b-button
+        class="button"
+        :type="buttonType"
+        :icon-left="icon"
+        :expanded="expanded"
+        @click="handleOpen"
+        :class="{ 'modal-wrapper-button__right': isRight }"
+      >
+        <template v-if="label">{{ label }}</template>
+      </b-button>
+    </slot>
     <b-modal :active.sync="isModalActive">
       <div class="card">
         <header class="card-header">
@@ -30,18 +32,20 @@ import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
 
 @Component
 export default class ModalWrapper extends Vue {
-
-  @Prop() public label!: string;
-  @Prop() public icon!: string;
-  @Prop() public type!: string;
-  @Prop() public expanded!: boolean;
-  @Prop() public isRight!: boolean;
+  @Prop(String) public label!: string;
+  @Prop(String) public icon!: string;
+  @Prop(String) public type!: string;
+  @Prop(Boolean) public expanded!: boolean;
+  @Prop(Boolean) public isRight!: boolean;
   private isModalActive: boolean = false;
 
   get buttonType() {
     return this.type || 'is-primary';
   }
 
+  protected handleOpen() {
+    this.isModalActive = true;
+  }
 }
 </script>