Minor bug fixes (#37)

* Add NFT page poll interval

* Minor bug fixes (#36)

* Migrate to react-query

* Fix nft page crash on reload

* Fix nft page price flickering

* Fix rebid

* Fix start sale/auction redudant approval

* Fix mint button display on large collections with user mint limit

* Refactor minted nfts count query

* Fix total nft count update on mint

* Fix list offset duplicates

frontend/package.json

@@ -11,14 +11,14 @@
     "codegen": "graphql-codegen"
   },
   "dependencies": {
-    "@apollo/client": "3.9.6",
     "@gear-js/api": "0.36.3",
     "@gear-js/react-hooks": "0.10.3",
     "@gear-js/vara-ui": "0.0.7",
     "@hookform/resolvers": "3.3.3",
     "@polkadot/api": "10.11.2",
     "@polkadot/react-identicon": "3.6.4",
-    "graphql-ws": "5.15.0",
+    "@tanstack/react-query": "5.28.9",
+    "graphql-request": "6.1.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "7.49.2",

frontend/src/components/hocs/index.ts

@@ -1,4 +1,5 @@
 import { withAccount } from './with-account';
 import { withApi } from './with-api';
+import { withMarketplaceConfig } from './with-marketplace-config';
 
-export { withAccount, withApi };
+export { withAccount, withApi, withMarketplaceConfig };

frontend/src/components/hocs/with-marketplace-config/index.ts

@@ -0,0 +1,3 @@
+import { withMarketplaceConfig } from './with-marketplace-config';
+
+export { withMarketplaceConfig };

frontend/src/components/hocs/with-marketplace-config/with-marketplace-config.tsx

@@ -0,0 +1,15 @@
+import { FunctionComponent } from 'react';
+
+import { useMarketplace } from '@/context';
+
+// alongside with withApi, probably would be better to check loading inside of components where hook is used
+// and render loading status directly there
+function withMarketplaceConfig<T>(Component: FunctionComponent<T>) {
+  return function WithApi(props: T & JSX.IntrinsicAttributes) {
+    const { marketplace } = useMarketplace();
+
+    return marketplace ? <Component {...props} /> : null;
+  };
+}
+
+export { withMarketplaceConfig };

frontend/src/components/index.ts

@@ -1,6 +1,6 @@
 import { CopyButton, FilterButton, LinkButton } from './buttons';
 import { Form, Input, Checkbox, Radio, Select, Textarea } from './form';
-import { withAccount, withApi } from './hocs';
+import { withAccount, withApi, withMarketplaceConfig } from './hocs';
 import { InfoCard, InfoCardProps } from './info-card';
 import { PriceInput, SearchInput } from './inputs';
 import {
@@ -51,6 +51,7 @@ export {
   TruncatedText,
   Identicon,
   Balance,
+  withMarketplaceConfig,
 };
 
 export type { InfoCardProps };

frontend/src/components/price-info-card/price-info-card.tsx

@@ -5,10 +5,10 @@ import VaraSVG from '@/assets/vara.svg?react';
 import { InfoCard, InfoCardProps } from '../info-card';
 
 function PriceInfoCard({ text, ...props }: Omit<InfoCardProps, 'SVG'>) {
-  const { api } = useApi();
+  const { isApiReady, api } = useApi();
   const [unit] = api?.registry.chainTokens || ['Unit'];
 
-  return <InfoCard SVG={VaraSVG} text={`${text} ${unit}`} {...props} />;
+  return <InfoCard SVG={VaraSVG} text={isApiReady ? `${text} ${unit}` : undefined} {...props} />;
 }
 
 export { PriceInfoCard };