chore(deps): bump cross-spawn from 7.0.3 to 7.0.6

README.md

@@ -2,7 +2,7 @@
 
 [![License](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
 
-Version: v4.1.0
+Version: v4.1.1
 
 <a href="https://chromewebstore.google.com/detail/yours-wallet/mlbnicldlpdimbjdcncnklfempedeipj" target="_blank">🌱 Download Chrome Extension 🌱</a>
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "yours-wallet",
-  "version": "4.1.0",
+  "version": "4.1.1",
   "private": true,
   "dependencies": {
     "@bsv/paymail": "^2.0.2",
@@ -25,6 +25,7 @@
     "crypto-js": "^4.1.1",
     "eslint-plugin-react-refresh": "^0.4.7",
     "file-saver": "^2.0.5",
+    "framer-motion": "^11.11.11",
     "js-1sat-ord": "^0.1.76",
     "jszip": "^3.10.1",
     "nth-check": "^2.1.1",
@@ -39,7 +40,7 @@
     "react-router-dom": "^6.16.0",
     "react-scripts": "^5.0.1",
     "replace-module-webpack-plugin": "^1.0.0",
-    "spv-store": "^0.1.44",
+    "spv-store": "^0.1.61",
     "stream-browserify": "^3.0.0",
     "styled-components": "^6.0.8",
     "ts-loader": "^9.5.1",

public/builds/pw-v4.1.1.256

@@ -0,0 +1 @@
+3d2099854193374649c67da517ff06efcdcab009347fb5ea75a2b78296fe0c2b  public/builds/pw-v4.1.1.zip

public/manifest.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.1.0",
+  "version": "4.1.1",
   "manifest_version": 3,
   "name": "Yours Wallet",
   "description": "A non-custodial and open-source wallet for BSV and 1Sat Ordinals",

src/api/faucet.ts

@@ -1,6 +1,5 @@
 import axios from 'axios';
 
-const WHATSONCHAIN_API_URL = 'https://api.whatsonchain.com/v1/bsv/test';
 const WITNESSONCHAIN_API_URL = 'https://witnessonchain.com/v1';
 
 interface FaucetResponse {

src/components/ManageTokens.tsx

@@ -1,4 +1,4 @@
-import { keyframes, styled } from 'styled-components';
+import { styled } from 'styled-components';
 import { Bsv20 } from 'yours-wallet-provider';
 import { Theme, WhiteLabelTheme } from '../theme.types';
 import { useServiceContext } from '../hooks/useServiceContext';
@@ -9,26 +9,9 @@ import { HeaderText, Text } from './Reusable';
 import { ChromeStorageObject } from '../services/types/chromeStorage.types';
 import { GENERIC_TOKEN_ICON } from '../utils/constants';
 import { FaTimes } from 'react-icons/fa';
+import { motion } from 'framer-motion';
 
-const slideIn = keyframes`
-  from {
-    transform: translateY(100%);
-  }
-  to {
-    transform: translateY(0);
-  }
-`;
-
-const slideOut = keyframes`
-  from {
-    transform: translateY(0);
-  }
-  to {
-    transform: translateY(100%);
-  }
-`;
-
-const Container = styled.div<{ isSlidingOut: boolean } & WhiteLabelTheme>`
+const Container = styled(motion.div)<WhiteLabelTheme>`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -38,7 +21,6 @@ const Container = styled.div<{ isSlidingOut: boolean } & WhiteLabelTheme>`
   background-color: ${({ theme }) => theme.color.global.walletBackground};
   z-index: 1000;
   position: absolute;
-  animation: ${({ isSlidingOut }) => (isSlidingOut ? slideOut : slideIn)} 0.75s forwards;
 `;
 
 const FavoriteRow = styled.div<WhiteLabelTheme>`
@@ -149,7 +131,16 @@ export const ManageTokens = (props: Bsv20TokensListProps) => {
     });
 
   return (
-    <Container theme={theme} isSlidingOut={isSlidingOut}>
+    <Container
+      theme={theme}
+      initial="hidden"
+      animate={isSlidingOut ? 'hidden' : 'visible'}
+      variants={{
+        hidden: { y: '100%' },
+        visible: { y: 0 },
+      }}
+      transition={{ duration: 0.75 }}
+    >
       <BackWrapper>
         <FaTimes size={'1.5rem'} color={theme.color.global.contrast} cursor="pointer" onClick={handleBackClick} />
       </BackWrapper>

src/components/Ordinal.tsx

@@ -5,7 +5,7 @@ import { Text } from './Reusable';
 import { Show } from './Show';
 
 export type OrdinalDivProps = WhiteLabelTheme & {
-  url: string;
+  url?: string;
   selected?: boolean;
   size?: string;
 };
@@ -23,12 +23,20 @@ const OrdinalWrapper = styled.div<OrdinalDivProps>`
     props.selected ? `0.1rem solid ${props.theme.color.component.ordinalSelectedBorder}` : undefined};
 `;
 
-const StyledIFrame = styled.iframe<{ size?: string }>`
+const IFrameWrapper = styled.div<OrdinalDivProps>`
   height: ${(props) => props.size ?? '6.5rem'};
   width: ${(props) => props.size ?? '6.5rem'};
   border-radius: 12%;
-  border: none;
   cursor: pointer;
+  border: ${(props) =>
+    props.selected ? `0.1rem solid ${props.theme.color.component.ordinalSelectedBorder}` : undefined};
+`;
+
+const StyledIFrame = styled.iframe<OrdinalDivProps>`
+  height: ${(props) => props.size ?? '6.5rem'};
+  width: ${(props) => props.size ?? '6.5rem'};
+  border-radius: 12%;
+  border: none;
   pointer-events: none;
 `;
 
@@ -122,41 +130,16 @@ export const Ordinal = (props: OrdinalProps) => {
   const renderContent = () => {
     switch (true) {
       case contentType?.startsWith('image/svg'):
-        return (
-          <OrdinalWrapper size={size} selected={selected} url={url} theme={theme} onClick={onClick}>
-            <StyledIFrame src={url} sandbox="true" size={size} />
-          </OrdinalWrapper>
-        );
       case contentType?.startsWith('text/html'):
-        if (inscription.origin?.data?.map?.previewUrl) {
-          return (
-            <OrdinalWrapper
-              size={size}
-              selected={selected}
-              url={inscription.origin?.data?.map?.previewUrl}
-              theme={theme}
-              style={{ backgroundImage: `url(${url})` }}
-              onClick={onClick}
-            />
-          );
-        }
         return (
-          <OrdinalWrapper size={size} selected={selected} url={url} theme={theme} onClick={onClick}>
+          <IFrameWrapper size={size} selected={selected} theme={theme} onClick={onClick}>
             <StyledIFrame src={url} sandbox="true" size={size} />
-          </OrdinalWrapper>
+          </IFrameWrapper>
         );
       case contentType?.startsWith('image/'):
-        return (
-          <OrdinalWrapper
-            size={size}
-            selected={selected}
-            url={url}
-            theme={theme}
-            style={{ backgroundImage: `url(${url})` }}
-            onClick={onClick}
-          />
-        );
+        return <OrdinalWrapper size={size} selected={selected} url={url} theme={theme} onClick={onClick} />;
       case contentType?.startsWith('text/'):
+      case contentType?.startsWith('application/op-ns'):
         return (
           <TextWrapper size={size} selected={selected} url={url} theme={theme} onClick={onClick}>
             <OrdText theme={theme}>{inscription.origin?.data?.insc?.file?.text}</OrdText>
@@ -170,8 +153,8 @@ export const Ordinal = (props: OrdinalProps) => {
         );
       default:
         return (
-          <TextWrapper size={size} selected={selected} url={url} theme={theme} onClick={onClick}>
-            <UnsupportedText theme={theme}>😩 Unsupported File Type</UnsupportedText>
+          <TextWrapper size={size} selected={selected} theme={theme} onClick={onClick}>
+            <UnsupportedText theme={theme}>😩 Syncing or Unsupported File Type</UnsupportedText>
           </TextWrapper>
         );
     }