New feature and UX improvements

Show non-nfts in separate section in the edit page, enabling users to apply NFT functionality to an existing Bitshares asset they've previously issued.
BTS-CM · Jan 10, 2023 · 341cd53 · 341cd53
1 parent d1dad0a
commit 341cd53
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 51 deletions.
diff --git a/src/components/blockchain/SelectAsset.jsx b/src/components/blockchain/SelectAsset.jsx
@@ -13,6 +13,7 @@ export default function SelectAsset(properties) {
   const clearAssets = appStore((state) => state.clearAssets);
 
   const assets = appStore((state) => state.assets);
+  const nonNFTs = appStore((state) => state.nonNFTs);
 
   const { userID } = properties;
   const [tries, setTries] = useState(0);
@@ -48,25 +49,25 @@ export default function SelectAsset(properties) {
     issuedAssets();
   }, [userID, tries]);
 
-  let topText;
-  if (!assets) {
+  let topText = null;
+  if (!assets && !nonNFTs) {
     topText = (
       <span>
         <Loader variant="dots" />
         <Text size="md">Retrieving info on your Bitshares account</Text>
       </span>
     );
-  } else if (!assets.length) {
+  } else if (assets && !assets.length) {
     topText = (
       <span>
-        <Text size="md">Nothing to edit</Text>
-        <Text size="sm" weight={600}>
+        <Text size="md">No NFTs to edit</Text>
+        <Text size="sm" weight={400}>
           This Bitshares account hasn&apos;t issued any NFTs on the BTS DEX.
         </Text>
-        <Text size="sm" weight={600}>
+        <Text size="sm" weight={400}>
           You can either create a new NFT or switch Bitshares account.
         </Text>
-        <Text size="sm" weight={600}>
+        <Text size="sm" weight={400}>
           Note: Buying an NFT on the BTS DEX doesn&apos;t automatically grant you NFT editing
           rights.
         </Text>
@@ -98,6 +99,24 @@ export default function SelectAsset(properties) {
     ))
     : null;
 
+  const normalAssetList = nonNFTs
+    ? nonNFTs.map((asset) => (
+      <Button
+        compact
+        sx={{ margin: '2px' }}
+        variant="outline"
+        key={`button.${asset.id}`}
+        onClick={() => {
+          chosenAsset(asset);
+        }}
+      >
+        {asset.symbol}
+        :
+        {asset.id}
+      </Button>
+    ))
+    : null;
+
   return (
     <Col span={12}>
       <Paper padding="sm" shadow="xs">
@@ -107,6 +126,21 @@ export default function SelectAsset(properties) {
             {buttonList}
           </SimpleGrid>
 
+          {
+            nonNFTs && nonNFTs.length ? (
+              <span>
+                <Divider />
+                <Text size="md">The following assets are not yet NFTs</Text>
+                <Text size="sm" weight={400}>
+                  Why not introduce NFT functionality to your existing Bitshares assets?
+                </Text>
+              </span>
+            ) : null
+          }
+          <SimpleGrid cols={3} sx={{ marginTop: '10px' }}>
+            {normalAssetList}
+          </SimpleGrid>
+
           <Button
             sx={{ marginTop: '15px', marginRight: '5px' }}
             onClick={() => {

diff --git a/src/components/blockchain/Wizard.jsx b/src/components/blockchain/Wizard.jsx
@@ -142,10 +142,6 @@ export default function Wizard(properties) {
    */
   async function modalDisplay(values) {
     setModalOpened(true);
-    console.log({
-      values,
-      asset_images,
-    });
     setModalContents({
       values,
       asset_images,

diff --git a/src/lib/images.js b/src/lib/images.js
@@ -5,6 +5,11 @@
  */
 function getImages(nft_object) {
   return new Promise(async (resolve, reject) => {
+    if (!nft_object) {
+      resolve();
+      return;
+    }
+
     if (nft_object.media_png_multihashes || nft_object.media_PNG_multihashes) {
       const multihashes = nft_object.media_png_multihashes || nft_object.media_PNG_multihashes;
       resolve(multihashes.map((image) => ({ url: image.url, type: 'PNG' })));

diff --git a/src/lib/stateQueries.js b/src/lib/stateQueries.js
@@ -55,29 +55,8 @@ async function lookup_asset_symbols(api, asset_ids, nonNFT = false) {
       reject();
     }
 
-    symbols = symbols.filter((x) => x !== null);
-    if (!symbols || !symbols.length) {
-      resolve([]);
-    }
-
-    if (nonNFT) {
-      resolve(symbols);
-    }
-
-    const filteredAssets = symbols.filter((asset) => {
-      if (!asset.options.description || !asset.options.description.length) {
-        return false;
-      }
-
-      if (!asset.options.description.includes('nft_object')) {
-        return false;
-      }
-
-      const desc = JSON.parse(asset.options.description);
-      return !!desc.nft_object;
-    });
-
-    resolve(filteredAssets);
+    const filteredSymbols = symbols.filter((x) => x !== null);
+    resolve(!filteredSymbols || !filteredSymbols.length ? [] : filteredSymbols);
   });
 }
 

diff --git a/src/lib/states.js b/src/lib/states.js
@@ -105,6 +105,7 @@ const appStore = create((set, get) => ({
   asset_issuer: null,
   asset_quantity: null,
   assets: null,
+  nonNFTs: null,
   setEnvironment: (env) => set({ environment: env }),
   setMode: (mode) => set({ mode }),
   setNodes: async () => {
@@ -160,7 +161,7 @@ const appStore = create((set, get) => ({
 
     set({
       asset: newAsset,
-      asset_images: images,
+      asset_images: images ?? [],
       asset_issuer: dynamicData.issuer,
       asset_quantity: dynamicData.quantity,
     });
@@ -204,22 +205,15 @@ const appStore = create((set, get) => ({
       set({ assets: [] });
     }
 
+    const normalAssets = [];
     const filteredAssets = [];
     for (let i = 0; i < response.length; i++) {
       const asset = response[i];
       const currentDescription = JSON.parse(asset.options.description);
-      console.log();
-      const { nft_object } = currentDescription;
-
-      let images;
-      try {
-        images = await getImages(nft_object);
-      } catch (error) {
-        console.log(error);
-        return;
-      }
+      const nft_object = currentDescription.nft_object ?? null;
 
-      if (!images || !images.length) {
+      if (!nft_object) {
+        normalAssets.push(asset);
         continue;
       }
 
@@ -229,6 +223,10 @@ const appStore = create((set, get) => ({
     if (filteredAssets.length) {
       set({ assets: filteredAssets });
     }
+
+    if (normalAssets.length) {
+      set({ nonNFTs: normalAssets });
+    }
   },
   changeURL: () => {
     /**
@@ -242,6 +240,7 @@ const appStore = create((set, get) => ({
   },
   clearAssets: () => set({
     assets: null,
+    nonNFTs: null,
   }),
   removeImages: () => set({
     asset_images: null,
@@ -336,10 +335,6 @@ const beetStore = create((set, get) => ({
         });
         return;
       }
-
-      console.log({
-        loc: 'relinkToBeet', storedConnection: 'none', identity, storedConnections,
-      });
     }
 
     set({
@@ -400,7 +395,6 @@ const beetStore = create((set, get) => ({
       return;
     }
 
-    console.log({ currentConnection, msg: 'relink' });
     set({ connection: currentConnection, isLinked: true });
   },
   setConnection: (res) => set({ connection: res }),