From 53083feaf2a3f2bea981662705c7b472e1467ef7 Mon Sep 17 00:00:00 2001 From: mymiracle0118 Date: Sat, 13 Jul 2024 14:02:08 +0200 Subject: [PATCH 1/4] add rpc url props in token and nft card component --- src/constants.ts | 9 +++++++-- src/lib/constants.ts | 4 +--- src/lib/nftPoster/nftPoster.svelte | 4 +++- src/lib/tokenPoster/tokenPoster.svelte | 4 +++- src/lib/utility.ts | 3 +-- src/routes/+page.svelte | 12 ++++++++---- 6 files changed, 23 insertions(+), 13 deletions(-) diff --git a/src/constants.ts b/src/constants.ts index bcc16b6..139166a 100644 --- 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: "MSNFT", + issuer: "GATRMB7RI7EJDWNWZUJ3E75MTMU5UYWLUJS6IRVR3BFLL3YF5WGAGBUA" } export const tokenInfo: AssetAccount = { diff --git a/src/lib/constants.ts b/src/lib/constants.ts index ed81072..e67f4a9 100644 --- a/src/lib/constants.ts +++ b/src/lib/constants.ts @@ -26,6 +26,4 @@ export const sizes: Record = { md: "max-w-xl", lg: "max-w-2xl", xl: "max-w-screen-xl", -}; - -export const baseURL: string = "https://horizon.stellar.org/"; +}; \ No newline at end of file diff --git a/src/lib/nftPoster/nftPoster.svelte b/src/lib/nftPoster/nftPoster.svelte index 0d9ef7e..b919ded 100644 --- a/src/lib/nftPoster/nftPoster.svelte +++ b/src/lib/nftPoster/nftPoster.svelte @@ -12,12 +12,14 @@ export let assetAccount: AssetAccount; export let imgClass: string | undefined = undefined; + export let baseURL: string; export let padding: SizeType | 'none' = 'lg'; interface $$Props extends ComponentProps { assetAccount: AssetAccount; imgClass?:string; padding?: SizeType | 'none'; + baseURL: string; } const paddings: Record = { @@ -47,7 +49,7 @@ 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; diff --git a/src/lib/tokenPoster/tokenPoster.svelte b/src/lib/tokenPoster/tokenPoster.svelte index 6437e5d..dd666b9 100644 --- a/src/lib/tokenPoster/tokenPoster.svelte +++ b/src/lib/tokenPoster/tokenPoster.svelte @@ -12,12 +12,14 @@ export let assetAccount: AssetAccount; export let imgClass: string | undefined = undefined; + export let baseURL: string; export let padding: SizeType | 'none' = 'lg'; interface $$Props extends ComponentProps { assetAccount: AssetAccount; imgClass?:string; padding?: SizeType | 'none'; + baseURL: string; } const paddings: Record = { @@ -47,7 +49,7 @@ 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; diff --git a/src/lib/utility.ts b/src/lib/utility.ts index ebd7b69..9b60629 100644 --- 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 { @@ -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 { diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 13ebc58..dcd35fe 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -8,10 +8,12 @@ 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'; + 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; @@ -27,7 +29,7 @@ img="/images/wallet.webp" imgClass="m-lg rounded-lg" isMouseTrackRecord={recordMouseMoveTrack} - dataURL="http://localhost/api" + dataURL="http://localhost/api" intervalData={intervalData} >
Meta stellar card
@@ -76,7 +78,8 @@
Date: Sat, 13 Jul 2024 19:54:40 +0200 Subject: [PATCH 2/4] update version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index c6e3c04..5468746 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@metastellar/ui-library", - "version": "0.0.14", + "version": "0.0.15", "scripts": { "dev": "vite dev --host", "build": "vite build && npm run package", From b1d471934a46d99688ce319c1820f4e7e2ae7749 Mon Sep 17 00:00:00 2001 From: mymiracle0118 Date: Wed, 17 Jul 2024 17:09:22 +0200 Subject: [PATCH 3/4] add some features in token and nft component --- src/constants.ts | 4 +-- src/lib/frame/frame.svelte | 6 ++-- src/lib/nftPoster/nftPoster.svelte | 15 ++++++++-- src/lib/tokenPoster/tokenPoster.svelte | 41 ++++++++++++++++++++------ src/lib/types.ts | 5 ++++ src/lib/utility.ts | 4 +-- src/routes/+page.svelte | 21 +++++++++++-- 7 files changed, 76 insertions(+), 20 deletions(-) diff --git a/src/constants.ts b/src/constants.ts index 139166a..12a1f95 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -11,8 +11,8 @@ import type { AssetAccount } from "$lib/types.js"; // } export const nftInfo: AssetAccount = { - code: "MSNFT", - issuer: "GATRMB7RI7EJDWNWZUJ3E75MTMU5UYWLUJS6IRVR3BFLL3YF5WGAGBUA" + code: "nmt", + issuer: "GDSZ24D4II53QDUQDWJMCOYDE7YCLWH3XUAE662GS46RCZF3E7KTRR5E" } export const tokenInfo: AssetAccount = { diff --git a/src/lib/frame/frame.svelte b/src/lib/frame/frame.svelte index cc47876..49ed3fc 100644 --- a/src/lib/frame/frame.svelte +++ b/src/lib/frame/frame.svelte @@ -46,7 +46,7 @@ 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)}; @@ -54,7 +54,7 @@ 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/nftPoster/nftPoster.svelte b/src/lib/nftPoster/nftPoster.svelte index b919ded..534fa5d 100644 --- a/src/lib/nftPoster/nftPoster.svelte +++ b/src/lib/nftPoster/nftPoster.svelte @@ -5,7 +5,7 @@ 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; @@ -14,12 +14,14 @@ 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 { assetAccount: AssetAccount; imgClass?:string; padding?: SizeType | 'none'; baseURL: string; + getNFTAssetInfo:(data: AssetData) => void; } const paddings: Record = { @@ -55,6 +57,15 @@ assetMetadata = data.data?.metadata as AssetMetaData; } } + + const sendAssetInfo = () => { + // console.log("nft send"); + const data: AssetData = { + assetInfo: assetInfo, + assetMetadata: assetMetadata + } + getNFTAssetInfo(data) + } onMount(() => { getNFTData(assetAccount); @@ -69,7 +80,7 @@ $:imgCls = twMerge('hover:cursor-pointer', imgClass) - (showModal = true)}> + {sendAssetInfo();}}> {#if assetMetadata?.image} product 1 {:else} diff --git a/src/lib/tokenPoster/tokenPoster.svelte b/src/lib/tokenPoster/tokenPoster.svelte index dd666b9..d9b88de 100644 --- a/src/lib/tokenPoster/tokenPoster.svelte +++ b/src/lib/tokenPoster/tokenPoster.svelte @@ -5,7 +5,7 @@ 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; @@ -14,12 +14,16 @@ 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; interface $$Props extends ComponentProps { assetAccount: AssetAccount; imgClass?:string; padding?: SizeType | 'none'; baseURL: string; + balance: number; + getTokenAssetInfo:(data: AssetData) => void; } const paddings: Record = { @@ -53,9 +57,17 @@ 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); } } + + const sendAssetInfo = () => { + const data: AssetData = { + assetInfo: assetInfo, + assetMetadata: assetMetadata + } + getTokenAssetInfo(data) + } onMount(() => { getAssetData(assetAccount); @@ -63,27 +75,38 @@ let cardClass: string; $: cardClass = twMerge('flex w-full', $$props.class); - $: cardClass = twMerge('flex w-full', $$props.class, 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', imgClass) + $:imgCls = twMerge('hover:cursor-pointer w-10 h-10', imgClass) - (showModal = true)}> + {sendAssetInfo();}}> {#if assetMetadata?.image} product 1 {:else} -
+
{/if} -

{assetMetadata?.code ? assetMetadata?.code : ""}

-

{assetMetadata?.name ? assetMetadata?.name : ""}

-

{assetMetadata?.issuer ? assetMetadata?.issuer: ""}

+ +
+ {#if assetMetadata?.code} +

{assetMetadata?.code}

+ {:else if assetMetadata?.code} +

{assetInfo?.asset_code}

+ {:else} +

{""}

+ {/if} + +

{balance}

+
+ diff --git a/src/lib/types.ts b/src/lib/types.ts index 5d91b6e..159bdb2 100644 --- 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 index 9b60629..52085bc 100644 --- a/src/lib/utility.ts +++ b/src/lib/utility.ts @@ -57,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, @@ -97,7 +97,7 @@ export async function getMetadata(baseURL: string, 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 index dcd35fe..2e281db 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -17,6 +17,20 @@ 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); + }
@@ -77,13 +91,14 @@
@@ -94,13 +109,15 @@
From 21c3c792f2a9349fdc2a33f77d97c76274ad7d38 Mon Sep 17 00:00:00 2001 From: mymiracle0118 Date: Wed, 17 Jul 2024 17:10:51 +0200 Subject: [PATCH 4/4] update version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 5468746..1ba2b53 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@metastellar/ui-library", - "version": "0.0.15", + "version": "0.0.16", "scripts": { "dev": "vite dev --host", "build": "vite build && npm run package",