feat: use OpenSea for fetching NFTs (#331)

* feat: use OpenSea for fetching NFTs

* feat: truncate long NFT names

* test: update tests

* feat: force same aspect for all NFTs

Author: Sekhmet

src/components/Block/NftPicker.vue

@@ -38,8 +38,8 @@ const filteredNfts = computed(() =>
         class="block px-3 py-1 mb-3 hover:opacity-80 transition-opacity"
         @click="emit('pick', nft.id)"
       >
-        <NftPreview :item="nft" class="aspect-square rounded" />
-        <div class="mt-2 text-sm">{{ nft.displayTitle }}</div>
+        <NftPreview :item="nft" class="aspect-square rounded w-full" />
+        <div class="mt-2 text-sm truncate">{{ nft.displayTitle }}</div>
       </a>
     </div>
   </template>

src/components/Modal/SendNft.vue

@@ -138,7 +138,9 @@ watch(
               class="mr-2"
               :size="20"
             />
-            {{ currentNft?.displayTitle || 'Select NFT' }}
+            <div class="truncate">
+              {{ currentNft?.displayTitle || 'Select NFT' }}
+            </div>
           </div>
         </button>
       </div>

src/components/NftPreview.vue

@@ -1,19 +1,27 @@
 <script setup>
+import { computed } from 'vue';
+
 const props = defineProps({
   item: Object,
   size: Number
 });
 
-function handleError(e) {
-  const size = props.size ? props.size * 2 : 256;
+const fallbackUrl = computed(
+  () =>
+    `https://cdn.stamp.fyi/token/${props.item.contractAddress}?s=${
+      props.size ? props.size * 2 : 256
+    }`
+);
+const url = computed(() => props.item.image || fallbackUrl.value);
 
-  e.target.src = `https://cdn.stamp.fyi/token/${props.item.contract_address}?s=${size}`;
+function handleError(e) {
+  e.target.src = fallbackUrl.value;
 }
 </script>
 
 <template>
   <img
-    :src="item.image"
+    :src="url"
     class="aspect-square rounded"
     :style="
       size

src/composables/useNfts.ts

@@ -1,7 +1,7 @@
 import { ref, computed, Ref } from 'vue';
 import snapshot from '@snapshot-labs/snapshot.js';
 
-const SUPPORTED_ABIS = ['erc721', 'erc1155'];
+const SUPPORTED_ABIS = ['ERC721', 'ERC1155'];
 
 const nfts: Ref<any[]> = ref([]);
 const loading = ref(true);
@@ -10,42 +10,32 @@ const loaded = ref(false);
 export function useNfts() {
   async function loadNfts(address) {
     loading.value = true;
-    const key = 'ckey_2d082caf47f04a46947f4f212a8';
-    const url = `https://api.covalenthq.com/v1/1/address/${address}/balances_v2/?quote-currency=USD&format=JSON&nft=true&key=${key}`;
-    const results = await snapshot.utils.getJSON(url);
-    nfts.value = results.data.items
-      .filter(
-        item =>
-          item.type === 'nft' &&
-          item.nft_data &&
-          item.supports_erc?.some(itemErc => SUPPORTED_ABIS.includes(itemErc))
+
+    const url =
+      'https://testnets-api.opensea.io/api/v1/assets?owner=0x0000000000000000000000000000000000000000&order_direction=desc&offset=0&limit=20&include_orders=false';
+    const { assets } = await snapshot.utils.getJSON(url);
+
+    nfts.value = assets
+      .filter(asset =>
+        SUPPORTED_ABIS.includes(asset.asset_contract?.schema_name)
       )
-      .map(item => {
-        const type = item.supports_erc?.find(itemErc =>
-          SUPPORTED_ABIS.includes(itemErc)
-        );
-        const tokenId = item.nft_data[0]?.token_id;
-        const title =
-          item.nft_data[0]?.external_data?.name ??
-          item.contract_name ??
-          'Untitled';
+      .map(asset => {
+        const tokenId = asset.token_id;
+        const title = asset.name ?? 'Untitled';
         const displayTitle =
           title.match(/(#[0-9]+)$/) || !tokenId
             ? title
             : `${title} #${tokenId}`;
 
-        const image =
-          item?.nft_data[0]?.external_data.image ??
-          `https://cdn.stamp.fyi/token/${item.contract_address}?s=256`;
-
         return {
-          ...item,
-          id: `${item.contract_address}:${tokenId || 0}`,
-          type,
+          ...asset,
+          type: asset.asset_contract.schema_name.toLowerCase(),
           tokenId,
           title,
           displayTitle,
-          image
+          image: asset.image_url,
+          collectionName: asset.collection.name,
+          contractAddress: asset.asset_contract.address
         };
       });
     loading.value = false;

src/helpers/__tests__/transactions.test.ts

@@ -44,19 +44,16 @@ describe('transactions', () => {
 
   describe('createSendNftTransaction', () => {
     const erc721Nft = {
-      contract_decimals: 0,
-      contract_name: 'BekoNekoz VX',
-      contract_address: '0x9ed9dc8af51d74e638528ececd510dca5fe2a539',
+      collectionName: 'BekoNekoz VX',
+      contractAddress: '0x9ed9dc8af51d74e638528ececd510dca5fe2a539',
       type: 'erc721',
       id: '0x9ed9dc8af51d74e638528ececd510dca5fe2a539:162',
       tokenId: '162'
     };
 
     const erc1155Nft = {
-      contract_decimals: 0,
-      contract_name: 'OpenSea Shared Storefront',
-      contract_ticker_symbol: 'OPENSTORE',
-      contract_address: '0x495f947276749ce646f68ac8c248420045cb7b5e',
+      collectionName: 'OpenSea Shared Storefront',
+      contractAddress: '0x495f947276749ce646f68ac8c248420045cb7b5e',
       type: 'erc1155',
       id: '0x495f947276749ce646f68ac8c248420045cb7b5e:90408759670418442924295527194769699607350667425091321551161727238095924887553',
       tokenId:

src/helpers/transactions.ts

@@ -59,10 +59,7 @@ export function createSendNftTransaction({
 }): SendNftTransaction {
   let data = '';
 
-  const baseAmount = parseUnits(
-    form.amount.toString() || '1',
-    nft.contract_decimals
-  );
+  const baseAmount = parseUnits(form.amount.toString() || '1', 0);
 
   if (nft.type === 'erc1155') {
     const iface = new Interface(abis.erc1155);
@@ -90,13 +87,13 @@ export function createSendNftTransaction({
       recipient: form.to,
       amount: baseAmount.toString(),
       nft: {
-        address: nft.contract_address,
+        address: nft.contractAddress,
         id: nft.tokenId,
         name: nft.title,
-        collection: nft.contract_name
+        collection: nft.collectionName
       }
     },
-    to: nft.contract_address,
+    to: nft.contractAddress,
     data,
     value: '0'
   };