Merge pull request #509 from Itheum/stg

nftunes preview playback issue on solana and other style issues
Itheum · Aug 23, 2024 · dbc2c7c · dbc2c7c
2 parents 596d7b2 + c01c6f9
commit dbc2c7c
Show file tree

Hide file tree

Showing 10 changed files with 285 additions and 276 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "explorer-dapp",
   "description": "Itheum Explorer is a DApp for the public to explore and visualize data within the Itheum protocol",
-  "version": "1.20.1",
+  "version": "1.20.3",
   "author": "Itheum",
   "license": "GPL-3.0-or-later",
   "dependencies": {

diff --git a/src/appsConfig.tsx b/src/appsConfig.tsx
@@ -49,6 +49,7 @@ export const NF_TUNES_TOKENS: app_token[] = IS_DEVNET
       { tokenIdentifier: "DATANFTFT-e0b917", nonce: 324 },
       { tokenIdentifier: "DATANFTFT-e0b917", nonce: 326 },
       { tokenIdentifier: "DATANFTFT-e0b917", nonce: 357 },
+      { tokenIdentifier: "DATANFTFT-e0b917", nonce: 552 },
       ...Array.from({ length: 4 }, (_, i) => ({ tokenIdentifier: "OASMUSICPL-47b186", nonce: i })),
       ...Array.from({ length: 19 }, (_, i) => ({ tokenIdentifier: "FOOWLDMSC-5ee8ec", nonce: i })),
     ]

diff --git a/src/components/AudioPlayer/AudioPlayer.tsx b/src/components/AudioPlayer/AudioPlayer.tsx
@@ -291,7 +291,7 @@ export const AudioPlayer = (props: AudioPlayerProps) => {
   };
 
   return (
-    <div className="bg-gradient-to-br from-[#00C79740] to-[#3D00EA20] bg-blend-multiply">
+    <div className="bg-white dark:bg-black">
       <div className="bg-[#1b1b1b10] backdrop-contrast-[1.10]">
         <div className="p-2 md:p-12 relative overflow-hidden">
           {displayPlaylist ? (
@@ -433,7 +433,7 @@ export const AudioPlayer = (props: AudioPlayerProps) => {
                               <img
                                 src={song.cover_art_url}
                                 alt="Album Cover"
-                                className="h-20 p-2 rounded-md m-auto"
+                                className="h-20 p-2 rounded-xl m-auto"
                                 onError={({ currentTarget }) => {
                                   currentTarget.src = theme === "light" ? DEFAULT_SONG_LIGHT_IMAGE : DEFAULT_SONG_IMAGE;
                                 }}

diff --git a/src/components/AudioPlayer/SolAudioPlayer.tsx b/src/components/AudioPlayer/SolAudioPlayer.tsx
@@ -317,7 +317,7 @@ export const SolAudioPlayer = (props: SolAudioPlayerProps) => {
   };
 
   return (
-    <div className="bg-gradient-to-br from-[#00C79740] to-[#3D00EA20] bg-blend-multiply">
+    <div className="bg-white dark:bg-black">
       <div className="bg-[#1b1b1b10] backdrop-contrast-[1.10]">
         <div className="p-2 md:p-12 relative overflow-hidden">
           {displayPlaylist ? (
@@ -459,7 +459,7 @@ export const SolAudioPlayer = (props: SolAudioPlayerProps) => {
                               <img
                                 src={song.cover_art_url}
                                 alt="Album Cover"
-                                className="h-20 p-2 rounded-md m-auto"
+                                className="h-20 p-2 rounded-xl m-auto"
                                 onError={({ currentTarget }) => {
                                   currentTarget.src = theme === "light" ? DEFAULT_SONG_LIGHT_IMAGE : DEFAULT_SONG_IMAGE;
                                 }}

diff --git a/src/components/BitzDropdown/MvxBitzDropdown.tsx b/src/components/BitzDropdown/MvxBitzDropdown.tsx
@@ -107,7 +107,7 @@ export const ClaimBitzButton = (props: any) => {
                   <PopoverPrimitive.PopoverClose asChild>
                     <div className="flex flex-row justify-center items-center">
                       <Gift className="mx-2 text-[#35d9fa]" />
-                      <span className="text-[12px] md:text-sm"> Collect your X {`<BiTz>`} </span>
+                      <span className="text-[12px] md:text-sm"> Collect Your {`<BiTz>`} XP </span>
                     </div>
                   </PopoverPrimitive.PopoverClose>
                 );
@@ -128,7 +128,7 @@ export const ClaimBitzButton = (props: any) => {
           <PopoverPrimitive.PopoverClose asChild>
             <div className="flex flex-row justify-center items-center">
               <Gift className="mx-2 text-[#35d9fa]" />
-              <span className="text-[12px] md:text-sm"> Collect your {`<BiTz>`} </span>
+              <span className="text-[12px] md:text-sm"> Collect Your {`<BiTz>`} XP </span>
             </div>
           </PopoverPrimitive.PopoverClose>
         )}

diff --git a/src/components/BitzDropdown/SolBitzDropdown.tsx b/src/components/BitzDropdown/SolBitzDropdown.tsx
@@ -107,7 +107,7 @@ export const ClaimBitzButton = (props: any) => {
                   <PopoverPrimitive.PopoverClose asChild>
                     <div className="flex flex-row justify-center items-center">
                       <Gift className="mx-2 text-[#35d9fa]" />
-                      <span className="text-[12px] md:text-sm"> Collect your X {`<BiTz>`} </span>
+                      <span className="text-[12px] md:text-sm"> Collect Your {`<BiTz>`} XP </span>
                     </div>
                   </PopoverPrimitive.PopoverClose>
                 );
@@ -128,7 +128,7 @@ export const ClaimBitzButton = (props: any) => {
           <PopoverPrimitive.PopoverClose asChild>
             <div className="flex flex-row justify-center items-center">
               <Gift className="mx-2 text-[#35d9fa]" />
-              <span className="text-[12px] md:text-sm"> Collect your {`<BiTz>`} </span>
+              <span className="text-[12px] md:text-sm"> Collect Your {`<BiTz>`} XP </span>
             </div>
           </PopoverPrimitive.PopoverClose>
         )}

diff --git a/src/components/MvxDataNftCard.tsx b/src/components/MvxDataNftCard.tsx
@@ -54,14 +54,11 @@ export function MvxDataNftCard({
   return (
     <div className="mb-3">
       <Card
-        className={cn(
-          cardStyles,
-          "border-[0.5px]  dark:border-slate-100/30 border-slate-300  bg-transparent rounded-[2.37rem] base:w-[18.5rem] md:w-[20.6rem]"
-        )}>
+        className={cn(cardStyles, "border-[0.5px] dark:border-slate-100/30 border-slate-300  bg-transparent rounded-[2.37rem] base:w-[18rem] md:w-[19rem]")}>
         <CardContent className="flex flex-col p-3">
-          <NftMediaComponent nftMedia={dataNft.media as NftMedia[]} isLoading={isLoading} mediaStyle="mb-8 base:h-[15rem]  md:h-[18rem]" />
+          <NftMediaComponent nftMedia={dataNft.media as NftMedia[]} isLoading={isLoading} mediaStyle="mb-8 base:h-[15rem] md:h-[18rem]" />
 
-          <div className="md:h-[15rem] h-[13rem]">
+          <div>
             <div className="grid grid-cols-12 mb-1">
               <span className="col-span-4 opacity-6 base:text-sm md:text-base">Title:</span>
               <span className="col-span-8 text-left base:text-sm md:text-base">{dataNft.title}</span>

diff --git a/src/components/MvxSolSwitch.tsx b/src/components/MvxSolSwitch.tsx
@@ -34,7 +34,7 @@ export function MvxSolSwitch() {
   return (
     <>
       <div className="my-5 mx-3">
-        <p className="items-center cursor-pointer my-2 text-sm opacity-50">This app works on multiple chains. Swap between them:</p>
+        <p className="items-center cursor-pointer my-2 text-sm opacity-50">This app works on multiple chains:</p>
         <label className="inline-flex items-center cursor-pointer">
           <div className="me-3 text-xl font-medium text-gray-900 dark:text-gray-300 flex">
             <svg className="mt-[1px]" width="25" height="25" viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg">

diff --git a/src/components/SolDataNftCard.tsx b/src/components/SolDataNftCard.tsx
@@ -41,6 +41,7 @@ export function SolDataNftCard({
   function goToDrip() {
     window.open(DRIP_PAGE)?.focus();
   }
+
   const imageSrc: string = (dataNft.content.links && dataNft.content.links["image" as any] ? dataNft.content.links["image" as any] : "") as string;
   const title = dataNft.content.metadata.name;
   const description = dataNft.content.metadata.description ?? "";
@@ -49,14 +50,11 @@ export function SolDataNftCard({
   return (
     <div className="mb-3">
       <Card
-        className={cn(
-          cardStyles,
-          "border-[0.5px]  dark:border-slate-100/30 border-slate-300  bg-transparent rounded-[2.37rem] base:w-[18.5rem] md:w-[20.6rem]"
-        )}>
+        className={cn(cardStyles, "border-[0.5px]  dark:border-slate-100/30 border-slate-300 bg-transparent rounded-[2.37rem] base:w-[18rem] md:w-[19rem]")}>
         <CardContent className="flex flex-col p-3">
           <img src={imageSrc} className="mb-8 base:h-[15rem] md:h-[18rem] rounded-3xl" />
 
-          <div className="md:h-[15rem] h-[13rem]">
+          <div>
             <div className="grid grid-cols-12 mb-1">
               <span className="col-span-4 opacity-6 base:text-sm md:text-base">Title:</span>
               <span className="col-span-8 text-left base:text-sm md:text-base">{title}</span>