Feature/gitcoin

src/common/rss3.ts

@@ -4,7 +4,7 @@ import RSS3 from 'rss3-next';
 import { RSS3Index } from 'rss3-next/types/rss3';
 import { RSS3Account, RSS3AccountInput } from 'rss3-next/types/rss3';
 import axios from 'axios';
-import { NFTInfo } from './types';
+import { GitcoinResponse, GeneralAsset, NFTResponse } from './types';
 import config from '@/config';
 
 let rss3: RSS3 | null;
@@ -15,13 +15,7 @@ let provider: WalletConnectProvider;
 export type IRSS3 = RSS3;
 
 export interface IAssetProfile {
-    rss3File: RSS3Index;
-    assets: {
-        [key: string]: {
-            account: string;
-            nft: NFTInfo[];
-        }[];
-    };
+    assets: GeneralAsset[];
 }
 
 async function walletConnect() {
@@ -160,6 +154,46 @@ export default {
             return data;
         }
     },
+    getNFTDetails: async (address: string, platform: string, identity: string, id: string) => {
+        let data: NFTResponse | null = null;
+        try {
+            const res = await axios({
+                method: 'get',
+                url: `${config.rss3Endpoint}/asset-profile/${address}/nft/`,
+                params: {
+                    platform: platform,
+                    id: id,
+                    identity: identity,
+                },
+            });
+            if (res && res.data) {
+                data = res.data;
+            }
+        } catch (error) {
+            data = null;
+        }
+        return data;
+    },
+    getGitcoinDonation: async (address: string, platform: string, identity: string, id: string) => {
+        let data: GitcoinResponse | null = null;
+        try {
+            const res = await axios({
+                method: 'get',
+                url: `${config.rss3Endpoint}/asset-profile/${address}/gitcoin-donation/`,
+                params: {
+                    platform: platform,
+                    id: id,
+                    identity: identity,
+                },
+            });
+            if (res && res.data) {
+                data = res.data;
+            }
+        } catch (error) {
+            data = null;
+        }
+        return data;
+    },
     addNewAccount: async (platform: string): Promise<RSS3Account> => {
         // js don't support multiple return values,
         // so here I'm using signature as a message provider

src/common/types.ts

@@ -1,42 +1,19 @@
-import { RSS3Asset } from 'rss3-next/types/rss3';
-
-export interface DetailedNFT {
+interface Asset {
     chain: string;
-    token_id: string;
-    name: string;
-    description: string | null;
-    image_url: string;
-    image_preview_url: string;
-    image_thumbnail_url: string;
-    animation_url: string | null;
-    animation_original_url: string | null;
-    asset_contract: {
-        address: string;
-        created_date: string;
-        symbol: string;
-    };
-    collection: {
-        name: string;
-        description: string;
-        image_url: string;
-    };
-    traits: {
-        trait_type: string;
-        value: string;
-        display_type: string | null;
-        max_value: string | null;
-        trait_count: number;
-        order: string | null;
-    }[];
 }
 
-export interface RSS3AssetShow extends RSS3Asset {
-    image_url: string;
-    order: number;
+export interface NFTResponse {
+    data: NFT;
 }
 
-export interface NFTInfo {
-    chain: string;
+export interface GitcoinResponse {
+    data: {
+        grant: GrantInfo;
+        txs: DonationInfo[];
+    };
+}
+
+export interface NFT extends Asset {
     token_id: string;
     name?: string;
     description?: string | null;
@@ -54,14 +31,63 @@ export interface NFTInfo {
         name: string | null;
         description: string | null;
         image_url: string | null;
-        created_at: string;
     };
     traits?: {
         trait_type: string | null;
         value: string | null;
     }[];
 }
 
-export interface RSS3AssetWithInfo extends RSS3Asset {
-    info?: NFTInfo;
+export interface GrantInfo {
+    active: boolean;
+    title?: string;
+    slug?: string;
+    description?: string;
+    reference_url?: string;
+    logo?: string;
+    admin_address?: string;
+    amount_received?: string;
+    token_address?: string;
+    token_symbol?: string;
+    contract_address?: string;
+}
+
+export interface DonationInfo {
+    donor: string;
+    tokenAddr: string;
+    amount: string;
+    symbol?: string;
+    formatedAmount?: string;
+    timeStamp: string;
+    txHash: string;
+}
+
+export interface DonationDetailByGrant {
+    grant: GrantInfo;
+    txs: DonationInfo[];
+}
+
+// used in api response
+export interface GeneralAsset {
+    platform: string;
+    identity: string;
+    id: string; // contractAddress-id or admin_address
+    type: string;
+    info: {
+        collection?: string;
+        collection_icon?: string;
+        image_preview_url?: string | null;
+        animation_url?: string | null;
+        animation_original_url?: string | null;
+        title?: string;
+        total_contribs?: number;
+        token_contribs: {
+            token: string;
+            amount: string;
+        }[];
+    };
+}
+
+export interface GeneralAssetWithTags extends GeneralAsset {
+    tags?: string[];
 }

src/components/GitcoinCard.vue

@@ -0,0 +1,48 @@
+<template>
+    <div
+        class="
+            w-full
+            flex flex-row
+            justify-start
+            items-center
+            rounded rounded-2xl
+            bg-white
+            shadow-gitcoin-md
+            cursor-pointer
+        "
+    >
+        <div
+            class="w-32 h-32 bg-cover bg-center bg-no-repeat rounded rounded-2xl m-0.5"
+            :style="{ backgroundImage: `url(${imageUrl})` }"
+        ></div>
+        <div class="w-45 md:w-60 pl-8">
+            <p class="w-full mb-2 font-semibold text-lg truncate">{{ name }}</p>
+            <div class="w-full flex flex-row gap-x-6 overflow-y-auto">
+                <div>
+                    <div class="font-medium">{{ contrib }}</div>
+                    <div>Contrib</div>
+                </div>
+                <div v-for="(item, index) in amount" :key="index">
+                    <div class="font-medium">{{ item.amount }}</div>
+                    <div>{{ item.token }}</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Vue, Options } from 'vue-class-component';
+
+@Options({
+    props: {
+        imageUrl: String,
+        name: String,
+        contrib: String,
+        amount: Array,
+    },
+})
+export default class GitcoinCard extends Vue {}
+</script>
+
+<style></style>

src/components/GitcoinItem.vue

@@ -0,0 +1,33 @@
+<template>
+    <div
+        class="gitcoin-item"
+        :style="{
+            width: size + 'px',
+            height: size + 'px',
+            backgroundImage: `url(${imageUrl})`,
+        }"
+    />
+</template>
+
+<script lang="ts">
+import { Vue, Options } from 'vue-class-component';
+
+@Options({
+    props: {
+        size: Number,
+        imageUrl: String,
+    },
+})
+export default class GitcoinItem extends Vue {
+    size!: Number;
+    imageUrl!: String;
+}
+</script>
+
+<style scoped lang="postcss">
+@layer components {
+    .gitcoin-item {
+        @apply rounded border border-white filter shadow-gitcoin-sm bg-white bg-cover bg-center bg-no-repeat;
+    }
+}
+</style>

src/components/GitcoinTitle.vue

@@ -0,0 +1,29 @@
+<template>
+    <div class="w-full flex flex-col gap-y-2 text-gitcoin-title">
+        <div class="font-bold text-2xl">Totel</div>
+        <div class="w-full flex flex-row justify-start gap-x-12 text-lg font-normal">
+            <div>
+                <div class="font-medium text-xl">{{ grants }}</div>
+                <div>Grants</div>
+            </div>
+            <div>
+                <div class="font-medium text-xl">{{ contributions }}</div>
+                <div>Contributions</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Options, Vue } from 'vue-class-component';
+
+@Options({
+    props: {
+        grants: Number,
+        contributions: Number,
+    },
+})
+export default class GitcoinTitle extends Vue {}
+</script>
+
+<style></style>

src/components/NFT/NFTItem.vue

@@ -9,20 +9,20 @@
         <video
             v-if="imageUrl?.endsWith('.mp4') || imageUrl?.endsWith('.mov') || imageUrl?.endsWith('.mp3')"
             :src="imageUrl"
-            :poster="posterUrl"
+            :poster="posterUrl?.endsWith('.mp4') || posterUrl?.endsWith('.mov') ? undefined : posterUrl"
             class="nft-item"
             :style="{
                 width: size + 'px',
                 height: size + 'px',
             }"
-            :autoplay="isShowingDetails"
+            :autoplay="isShowingDetails || posterUrl?.endsWith('.mp4') || posterUrl?.endsWith('.mov')"
             loop
             webkit-playsinline
             playsinline
             :controls="isShowingDetails"
         />
         <iframe
-            v-else-if="imageUrl?.endsWith('embed')"
+            v-else-if="imageUrl?.endsWith('embed') || imageUrl?.includes('farmhero.io')"
             :src="imageUrl"
             class="nft-item"
             :style="{

src/config.ts

@@ -1,6 +1,6 @@
 export default {
     infuraId: '76af1228cdf345d2bff6a9c0f35112e1',
-    rss3Endpoint: 'https://hub-next.pass3.me',
+    rss3Endpoint: 'https://hub.pass3.me',
     defaultAvatar: 'https://rss3.mypinata.cloud/ipfs/QmVFq9qimnudPcs6QkQv8ZVEsvwD3aqETHWtS5yXgdbYY5',
     rns: {
         test: true,

src/router.ts

@@ -17,6 +17,9 @@ import RNS from '@/views/Setup/RNS.vue';
 import EditProfile from '@/views/EditProfile.vue';
 import RNSPending from '@/views/Setup/RNSPending.vue';
 import GoToPC from '@/views/Setup/GoToPC.vue';
+import Gitcoins from '@/views/Gitcoins.vue';
+import SetupGitcoins from '@/views/Setup/SetupGitcoins.vue';
+import SingleGitcoin from '@/views/SingleGitcoin.vue';
 
 const routes = [
     {
@@ -58,10 +61,18 @@ const routes = [
         component: NFTs,
     },
     {
-        path: '/:address/singlenft/:chain/:aid/:id',
+        path: '/:address/singlenft/:platform/:identity/:id',
         name: 'SingleNFT',
         component: SingleNFT,
     },
+    {
+        path: '/:address/gitcoins',
+        component: Gitcoins,
+    },
+    {
+        path: '/:address/singlegitcoin/:platform/:identity/:id',
+        component: SingleGitcoin,
+    },
     {
         path: '/setup',
         component: Setup,
@@ -74,6 +85,11 @@ const routes = [
         path: '/setup/nfts',
         component: SetupNFTs,
     },
+
+    {
+        path: '/setup/gitcoins',
+        component: SetupGitcoins,
+    },
     {
         path: '/rns',
         component: RNS,