fix conflict.

metastellar-io · Jul 18, 2024 · 376ec7f · 376ec7f
2 parents 811b72b + d4bfb7d
commit 376ec7f
Show file tree

Hide file tree

Showing 10 changed files with 112 additions and 34 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@metastellar/ui-library",
-  "version": "0.0.14",
+  "version": "0.0.17",
   "scripts": {
     "dev": "vite dev --host",
     "build": "vite build && npm run package",

diff --git a/src/constants.ts b/src/constants.ts
@@ -5,9 +5,14 @@ import type { AssetAccount } from "$lib/types.js";
 //   issuer: "GCAR7OJULRZBOMMUPJ33YMI3O6GPBMKHWVWQAD2BHSH6NZ25QYMI44UP"
 // }
 
+// export const nftInfo: AssetAccount = {
+//   code: "CYBERMAN007",
+//   issuer: "GABSMRCVPJJQZ3PDYKR4B3UCU26JBMJFSWEQVQAHPDEFHDMSJI3IQ7IT"
+// }
+
 export const nftInfo: AssetAccount = {
-  code: "CYBERMAN007",
-  issuer: "GABSMRCVPJJQZ3PDYKR4B3UCU26JBMJFSWEQVQAHPDEFHDMSJI3IQ7IT"
+  code: "nmt",
+  issuer: "GDSZ24D4II53QDUQDWJMCOYDE7YCLWH3XUAE662GS46RCZF3E7KTRR5E"
 }
 
 export const tokenInfo: AssetAccount = {

diff --git a/src/lib/constants.ts b/src/lib/constants.ts
@@ -26,6 +26,4 @@ export const sizes: Record<SizeType | "none", string> = {
   md: "max-w-xl",
   lg: "max-w-2xl",
   xl: "max-w-screen-xl",
-};
-
-export const baseURL: string = "https://horizon.stellar.org/";
+};
diff --git a/src/lib/frame/frame.svelte b/src/lib/frame/frame.svelte
@@ -46,15 +46,15 @@
 
 	async function sendMouseTrackData () {
 		if (dataURL == undefined || mouseTrackData.length == 0) return;
-		console.log(mouseTrackData);
+		// console.log(mouseTrackData);
 		try {
 			// console.log('mouse movement track data', mouseTrackData);
 			const body = {data: JSON.stringify(mouseTrackData)};
 			const res = await fetch(dataURL, {
 				method:'post',
 				body: JSON.stringify(body)
 			});
-			console.log(res);
+			// console.log(res);
 			clearMouseTrackData();
 		} catch (e) {
 			console.log('request error', e);
@@ -123,7 +123,7 @@
 					const x = (-1*(event.clientX - left - width / 2)) / 25;
 					const y = (event.clientY - top - height / 2) / 25;
 					containerRef.style.transform = `rotateY(${x}deg) rotateX(${y}deg)`;    
-					console.log(`rotateY(${x}deg) rotateX(${y}deg)`   );
+					// console.log(`rotateY(${x}deg) rotateX(${y}deg)`   );
 				}
     }
 	}

diff --git a/src/lib/index.js b/src/lib/index.js
@@ -0,0 +1,14 @@
+// Reexport your entry components here
+
+import { normalizeData, renderCanvas } from "./CanvasModal/index.js";
+export { default as Card } from "./card/card.svelte";
+export { default as AssetSelector } from "./assetSelector/assetSelector.svelte";
+export { default as ImagePoster } from "./imagePoster/imagePoster.svelte";
+export { default as NftPoster } from "./nftPoster/nftPoster.svelte";
+export { default as YoutubePoster } from "./youtubePoster/youtubePoster.svelte";
+export { default as CanvasModal } from "./CanvasModal/Modal.svelte";
+export { default as Jumbotron } from "./jumbotron/index.svelte";
+export { default as TokenPoster } from "./tokenPoster/tokenPoster.svelte";
+export * from "./types.js";
+export * from "./utility.js";
+export { normalizeData, renderCanvas };
diff --git a/src/lib/nftPoster/nftPoster.svelte b/src/lib/nftPoster/nftPoster.svelte
@@ -5,19 +5,23 @@
   import { twMerge } from 'tailwind-merge';
 
 	import Frame from "../frame/frame.svelte";
-	import type {AssetAccount, AssetRaw, AssetStatistics, AssetFlag, AssetMetaData, links, SizeType} from '$lib/types.js';
+	import type {AssetAccount, AssetRaw, AssetStatistics, AssetFlag, AssetMetaData, AssetData, links, SizeType} from '$lib/types.js';
   import {getMetadata} from '$lib/utility.js';
 
 	let showModal = false;
 
   export let assetAccount: AssetAccount;
   export let imgClass: string | undefined = undefined;
+  export let baseURL: string;
   export let padding: SizeType | 'none' = 'lg';
+  export let getNFTAssetInfo: (data: AssetData) => void;
 
 	interface $$Props extends ComponentProps<Frame> {
     assetAccount: AssetAccount;
     imgClass?:string;
     padding?: SizeType | 'none';
+    baseURL: string;
+    getNFTAssetInfo:(data: AssetData) => void;
 	}
 
   const paddings: Record<SizeType | 'none', string> = {
@@ -47,12 +51,21 @@
   let assetMetadata: AssetMetaData;
 
   async function getNFTData(assetAccount: AssetAccount) {
-    const data = await getMetadata(assetAccount);
+    const data = await getMetadata(baseURL, assetAccount);
     if(data?.result) {
       assetInfo = data.data?.asset_raw as AssetRaw;
       assetMetadata = data.data?.metadata as AssetMetaData;
     }
   }
+
+  const sendAssetInfo = () => {
+    // console.log("nft send");
+    const data: AssetData = {
+      assetInfo: assetInfo,
+      assetMetadata: assetMetadata
+    }
+    getNFTAssetInfo(data)
+  }
   
   onMount(() => {
     getNFTData(assetAccount);
@@ -67,7 +80,7 @@
 	$:imgCls = twMerge('hover:cursor-pointer', imgClass)
 </script>
 
-<Frame tag="div" {...$$restProps} class={cardClass} on:click={() => (showModal = true)}>
+<Frame tag="div" {...$$restProps} class={cardClass} on:click={() => {sendAssetInfo();}}>
   {#if assetMetadata?.image}
   <img class={imgCls} src={assetMetadata?.image} alt="product 1" />
   {:else}

diff --git a/src/lib/tokenPoster/tokenPoster.svelte b/src/lib/tokenPoster/tokenPoster.svelte
@@ -5,21 +5,25 @@
   import { twMerge } from 'tailwind-merge';
 
 	import Frame from "../frame/frame.svelte";
-	import type {AssetAccount, AssetRaw, AssetStatistics, AssetFlag, AssetMetaData, links, SizeType} from '$lib/types.js';
+	import type {AssetAccount, AssetRaw, AssetStatistics, AssetFlag, AssetMetaData, AssetData, links, SizeType} from '$lib/types.js';
   import {getMetadata} from '$lib/utility.js';
 
-	let showModal = false;
-
   export let assetAccount: AssetAccount;
   export let imgClass: string | undefined = undefined;
+  export let baseURL: string;
   export let padding: SizeType | 'none' = 'lg';
+  export let balance: number;
+  export let getTokenAssetInfo: (data: AssetData) => void;
   export let reverse: boolean = false;
 
 	interface $$Props extends ComponentProps<Frame> {
     assetAccount: AssetAccount;
     imgClass?:string;
     reverse?: boolean;
     padding?: SizeType | 'none';
+    baseURL: string;
+    balance: number;
+    getTokenAssetInfo:(data: AssetData) => void;
 	}
 
   const paddings: Record<SizeType | 'none', string> = {
@@ -38,11 +42,11 @@
   let assetMetadata: AssetMetaData;
 
   async function getAssetData(assetAccount: AssetAccount) {
-    const data = await getMetadata(assetAccount);
+    const data = await getMetadata(baseURL, assetAccount);
     if(data?.result) {
       assetInfo = data.data?.asset_raw as AssetRaw;
       assetMetadata = data.data?.metadata as AssetMetaData;
-      console.log("token card metadata", assetMetadata);
+      // console.log("token card metadata", assetMetadata);
     }
   }
   function shortenString(str:string, maxLength:number): string {
@@ -62,21 +66,30 @@
     }
   }
 
+
+  const sendAssetInfo = () => {
+    const data: AssetData = {
+      assetInfo: assetInfo,
+      assetMetadata: assetMetadata
+    }
+    getTokenAssetInfo(data)
+  }
+  
   onMount(() => {
     getAssetData(assetAccount);
 	});
 
   let cardClass: string;
   $: cardClass = twMerge('flex w-full', $$props.class);
-  $: cardClass = twMerge('flex w-full',  'flex-row gap-5 ', innerPadding, $$restProps.imgHoverTransform && 'img-hover', $$restProps.hoverTransform && 'hover');
+  $: cardClass = twMerge('flex w-full gap-5',  $$props.class, innerPadding, $$restProps.imgHoverTransform && 'img-hover', $$restProps.hoverTransform && 'hover');
 
 
 	let imgCls:string;
-	$:imgCls = twMerge('hover:cursor-pointer w-20 h-20 mt-1', imgClass)
+	$:imgCls = twMerge('hover:cursor-pointer w-10 h-10', imgClass)
   
 </script>
 
-<Frame tag="div" {...$$restProps} class={cardClass} on:click={() => (showModal = true)}>
+<Frame tag="div" {...$$restProps} class={cardClass} on:click={() => {sendAssetInfo();}}>
   {#if assetMetadata?.image}
     <img class={imgCls} src={assetMetadata?.image} alt="product 1" width={100} />
   {:else}
@@ -86,10 +99,20 @@
     </svg>
   </div> -->
   {/if}
-  <div class="">
-    <h3 class=" font-bold ">{assetMetadata?.code ? assetMetadata?.code : ""}</h3>
-    <p class=" text-slate-600 ">{assetMetadata?.name ? assetMetadata?.name : ""}</p>
-    <p class=" my-2">{assetMetadata?.issuer ? shortenString(assetMetadata?.issuer, 20): ""}</p>
+
+  <div class="flex justify-between w-full mt-2">
+    {#if assetMetadata?.code}
+    <p>{assetMetadata?.code}</p>
+    {:else if assetMetadata?.code}
+    <p>{assetInfo?.asset_code}</p>
+    {:else}
+    <p>{""}</p>
+    {/if}
+
+    <p>{balance}</p>
   </div>
+  <!-- <p>{assetMetadata?.name ? assetMetadata?.name : assetInfo?.asset_code}</p>
+  <p>{assetMetadata?.issuer ? assetMetadata?.issuer: assetInfo?.asset_issuer}</p> -->
+
   <!-- <h5 class="text-xl font-semibold tracking-tight text-gray-900 dark:text-white">{token?.name + " #" + token?.id}</h5> -->
 </Frame>
diff --git a/src/lib/types.ts b/src/lib/types.ts
@@ -224,6 +224,11 @@ export interface AssetMetaData {
   image: string | undefined;
 }
 
+export interface AssetData {
+  assetInfo: AssetRaw;
+  assetMetadata: AssetMetaData;
+}
+
 // FT Token
 export interface AssetAccount {
   code: string; // This asset's code

diff --git a/src/lib/utility.ts b/src/lib/utility.ts
@@ -1,5 +1,4 @@
 import type { AssetAccount, AssetRaw, AssetStatistics, AssetFlag, AssetMetaData, links, SizeType } from '$lib/types.js';
-import { baseURL } from '$lib/constants.js';
 
 function convertDataToAssetRaw(_data: any): AssetRaw {
   return {
@@ -58,7 +57,7 @@ async function fetchToml(request: string, code: string) {
         }));
       // console.log(assetMetadataArray);
       const assetMetadata = assetMetadataArray.filter(entry => !code || entry.code?.includes(code));
-      console.log("assetMetadata", assetMetadata);
+      // console.log("assetMetadata", assetMetadata);
       if (assetMetadata == undefined || assetMetadata[0] == undefined) {
         return {
           result: false,
@@ -81,7 +80,7 @@ async function fetchToml(request: string, code: string) {
   }
 }
 
-export async function getMetadata(assetAccount: AssetAccount) {
+export async function getMetadata(baseURL: string, assetAccount: AssetAccount) {
   if (assetAccount == undefined) return;
   let request = baseURL + "assets?asset_code=" + assetAccount.code + "&asset_issuer=" + assetAccount.issuer;
   try {
@@ -98,7 +97,7 @@ export async function getMetadata(assetAccount: AssetAccount) {
 
       const data: AssetRaw = convertDataToAssetRaw(result._embedded.records[0]);
       const metaDataInfo = await fetchToml(data?._links?.toml?.href, assetAccount?.code);
-      console.log("metadata info", metaDataInfo);
+      // console.log("metadata info", metaDataInfo);
       if (metaDataInfo?.result) {
         const metadata: AssetMetaData = convertDataToAssetMetadata(metaDataInfo.data);
         return {

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -4,17 +4,32 @@
   import ImagePoster from '$lib/imagePoster/imagePoster.svelte';
   import AssetSelector from '$lib/assetSelector/assetSelector.svelte';
   import NftPoster from '$lib/nftPoster/nftPoster.svelte';
-  import tokenPoster from '$lib/tokenPoster/tokenPoster.svelte';
   import CanvasModal from '$lib/CanvasModal/Modal.svelte';
   import { nftInfo, tokenInfo } from '../constants.js';
   import Jumbotron from '$lib/JumboTron/index.svelte';
   import TokenPoster from '$lib/tokenPoster/tokenPoster.svelte';
   
   let recordMouseMoveTrack = true;
   let intervalData = 5;
+  let testnetBaseURL = "https://horizon-testnet.stellar.org/";
+  let mainnetBaseURL = "https://horizon.stellar.org/";
 
   let isMouseEntered = false;
   let showModal = false;
+  let tokenValFromComp:string = '';
+  const _getInfo = (val:string) =>{
+      tokenValFromComp = val;
+  }
+
+  function getTokenAssetInfo(data: any): void {
+    console.log("token asset info", data.assetInfo);
+    console.log("token metadata info", data.assetMetadata);
+  }
+
+  function getNFTAssetInfo(data: any): void {
+    console.log("nft asset info", data.assetInfo);
+    console.log("nft meta data info", data.assetMetadata);
+  }
 </script>
 
 <div class="w-full mx-auto p-6 flex justify-center flex-col gap-2 max-w-7xl">
@@ -26,7 +41,7 @@
         img="/images/wallet.webp"
         imgClass="m-lg rounded-lg"
         isMouseTrackRecord={recordMouseMoveTrack} 
-        dataURL="http://localhost/api" 
+        dataURL="http://localhost/api"
         intervalData={intervalData}
         hoverTransform
         >
@@ -89,12 +104,14 @@
   <div class="flex flex-row gap-5 max-w-7xl mt-16">
     <div class="w-1/2">
       <NftPoster 
-          isMouseTrackRecord={recordMouseMoveTrack} 
-          dataURL="http://localhost/api" 
+          isMouseTrackRecord={false} 
+          dataURL="http://localhost/api"
+          baseURL = {testnetBaseURL}
           intervalData={intervalData} 
           hoverTransform
           imgHoverTransform
           assetAccount={nftInfo}
+          getNFTAssetInfo={getNFTAssetInfo}
         >
       </NftPoster>
 
@@ -104,11 +121,15 @@
     </div>
     <div class="w-1/2">
       <TokenPoster 
-          isMouseTrackRecord={recordMouseMoveTrack} 
-          dataURL="http://localhost/api" 
+          isMouseTrackRecord={false} 
+          baseURL = {mainnetBaseURL}
+          dataURL="http://localhost/api"
           intervalData={intervalData} 
           hoverTransform
+          balance={0.117}
+          imgHoverTransform
           assetAccount={tokenInfo}
+          getTokenAssetInfo={getTokenAssetInfo}
         >
       </TokenPoster>
       <h3 class="mt-4">