feat: STX NFTs Tab

.eslintrc.json

@@ -20,26 +20,20 @@
     "sourceType": "module",
     "project": "./tsconfig.json"
   },
-  "plugins": [
-    "react",
-    "prettier",
-    "eslint-plugin-no-inline-styles",
-    "@tanstack/query"
-  ],
+  "plugins": ["react", "prettier", "eslint-plugin-no-inline-styles", "@tanstack/query"],
   "rules": {
     "consistent-return": "off",
     "import/prefer-default-export": 1,
     "no-restricted-imports": [
       "warn",
       {
-        "patterns": [
-          "@secretkeylabs/xverse-core/**/*"
-        ]
+        "patterns": ["@secretkeylabs/xverse-core/**/*"]
       }
     ],
     "no-promise-executor-return": "warn",
     "max-len": "off",
     "no-inline-styles/no-inline-styles": 2,
+    "no-nested-ternary": "off",
     "no-param-reassign": "off",
     "react-hooks/exhaustive-deps": "warn",
     "react/jsx-key": "warn",
@@ -61,16 +55,8 @@
   "settings": {
     "import/resolver": {
       "node": {
-        "extensions": [
-          ".js",
-          ".jsx",
-          ".ts",
-          ".tsx"
-        ],
-        "moduleDirectory": [
-          "node_modules",
-          "src/"
-        ]
+        "extensions": [".js", ".jsx", ".ts", ".tsx"],
+        "moduleDirectory": ["node_modules", "src/"]
       }
     }
   }

package.json

@@ -10,7 +10,7 @@
     "@ledgerhq/hw-transport-webusb": "^6.27.13",
     "@phosphor-icons/react": "^2.0.10",
     "@react-spring/web": "^9.6.1",
-    "@secretkeylabs/xverse-core": "2.3.2-a791a1d",
+    "@secretkeylabs/xverse-core": "3.0.0",
     "@stacks/connect": "^6.10.2",
     "@stacks/encryption": "4.3.5",
     "@stacks/stacks-blockchain-api-types": "6.1.1",
@@ -46,6 +46,7 @@
     "react-dom": "^18.2.0",
     "react-hot-toast": "^2.4.0",
     "react-i18next": "^11.18.6",
+    "react-is-visible": "^1.2.0",
     "react-modal": "^3.15.1",
     "react-number-format": "^5.0.0",
     "react-qr-code": "^2.0.8",

src/app/App.tsx

@@ -2,16 +2,16 @@ import LoadingScreen from '@components/loadingScreen';
 import rootStore from '@stores/index';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { MIX_PANEL_TOKEN } from '@utils/constants';
 import { queryClient } from '@utils/query';
+import mixpanel from 'mixpanel-browser';
+import { useEffect } from 'react';
 import { Toaster } from 'react-hot-toast';
 import { Provider } from 'react-redux';
 import { RouterProvider } from 'react-router-dom';
 import { PersistGate } from 'redux-persist/integration/react';
 import { ThemeProvider } from 'styled-components';
 import '../locales';
-import { useEffect } from 'react';
-import mixpanel from 'mixpanel-browser';
-import { MIX_PANEL_TOKEN } from '@utils/constants';
 import Theme from '../theme';
 import GlobalStyle from '../theme/global';
 import SessionGuard from './components/guards/session';
@@ -40,7 +40,7 @@ function App(): JSX.Element {
             <SessionGuard>
               <ThemeProvider theme={Theme}>
                 <RouterProvider router={router} />
-                <Toaster position="bottom-center" containerStyle={{ bottom: 80 }} />
+                <Toaster position="bottom-center" />
               </ThemeProvider>
             </SessionGuard>
           </PersistGate>

src/app/components/barLoader/index.tsx

@@ -77,8 +77,8 @@ export function BetterBarLoader({
   height,
   className,
 }: {
-  width: number;
-  height: number;
+  width: number | string;
+  height: number | string;
   className?: string;
 }) {
   return (
@@ -88,7 +88,6 @@ export function BetterBarLoader({
       interval={0.1}
       width={width}
       height={height}
-      viewBox={`0 0 ${width} ${height}`}
       backgroundColor={Theme.colors.elevation3}
       foregroundColor={Theme.colors.grey}
       className={className}

src/app/components/bundleAsset/bundleAsset.tsx

@@ -2,7 +2,7 @@ import RareSatAsset from '@components/rareSatAsset/rareSatAsset';
 import { Bundle } from '@utils/rareSats';
 import styled from 'styled-components';
 
-import RareSatsCollage from './rareSatsCollage';
+import CollectibleCollage from '../collectibleCollage/collectibleCollage';
 
 const ImageContainer = styled.div`
   display: flex;
@@ -29,7 +29,7 @@ function BundleAsset({ bundle }: Props) {
   return (
     <ImageContainer>
       {isMoreThanOneItem ? (
-        <RareSatsCollage items={bundle.items} />
+        <CollectibleCollage items={bundle.items} />
       ) : (
         <IndividualAssetContainer>
           <RareSatAsset item={bundle.items[0]} />