Merge branch 'abdulhaseeb/eng-2551-updated-functions-for-ordinal-tran…

…sactions' of https://github.com/secretkeylabs/xverse-web-extension into abdulhaseeb/eng-2551-updated-functions-for-ordinal-transactions

package.json

@@ -1,10 +1,11 @@
 {
   "name": "xverse-web-extension",
   "description": "A Bitcoin wallet for Web3",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "private": true,
   "dependencies": {
     "@ledgerhq/hw-transport-webusb": "^6.27.13",
+    "@phosphor-icons/react": "^2.0.10",
     "@react-spring/web": "^9.6.1",
     "@secretkeylabs/xverse-core": "^1.6.1-5278e17",
     "@stacks/connect": "^6.10.2",

src/app/components/guards/auth.tsx

@@ -1,20 +1,22 @@
 import useHasStateRehydrated from '@hooks/stores/useHasRehydrated';
 import useWalletSelector from '@hooks/useWalletSelector';
-import { ReactNode } from 'react';
 import { Navigate } from 'react-router-dom';
 
-interface AuthGuardProps {
-  children: ReactNode;
-}
-
-function AuthGuard({ children }: AuthGuardProps) {
+function AuthGuard({ children }: React.PropsWithChildren) {
   const { encryptedSeed, seedPhrase } = useWalletSelector();
   const hydrated = useHasStateRehydrated();
-  if (hydrated && encryptedSeed && !seedPhrase) return <Navigate to="/login" />;
 
-  if (hydrated && !encryptedSeed) return <Navigate to="/landing" />;
+  if (hydrated && encryptedSeed && !seedPhrase) {
+    return <Navigate to="/login" />;
+  }
+
+  if (hydrated && !encryptedSeed) {
+    return <Navigate to="/landing" />;
+  }
 
-  return children;
+  // fragment is required here
+  // eslint-disable-next-line react/jsx-no-useless-fragment
+  return <>{children}</>;
 }
 
 export default AuthGuard;

src/app/components/guards/singleTab.tsx

@@ -49,18 +49,20 @@ export const useSingleTabGuard = (guardName: GuardType, broadcastOnLoad = true):
   }, []);
 };
 
-type SingleTabProps = {
-  guardName: GuardType;
-  children?: React.ReactElement | React.ReactElement[];
-};
-
 /**
  * This guard is used to ensure that only one window with the guard name is open at a time.
  * It fires off an event only once on its first render and will close the window if it receives
  * the event.
  */
-export function SingleTabGuard({ guardName, children }: SingleTabProps): React.ReactNode {
+export function SingleTabGuard({
+  guardName,
+  children,
+}: React.PropsWithChildren<{
+  guardName: GuardType;
+}>) {
   useSingleTabGuard(guardName);
 
-  return children;
+  // fragment is required here
+  // eslint-disable-next-line react/jsx-no-useless-fragment
+  return <>{children}</>;
 }

src/app/components/passwordInput/index.tsx

@@ -119,6 +119,7 @@ const PasswordStrengthContainer = styled.div((props) => ({
 
 const StrengthBar = styled(animated.div)<StrengthBarProps>((props) => ({
   display: 'flex',
+  flex: '1 0',
   alignItems: 'center',
   backgroundColor: props.theme.colors.white[600],
   marginLeft: props.theme.spacing(6),