add rating to dapp page

ui/marketplace/MarketplaceAppTopBar.tsx

@@ -18,18 +18,23 @@ import WalletMenuDesktop from 'ui/snippets/walletMenu/WalletMenuDesktop';
 import AppSecurityReport from './AppSecurityReport';
 import ContractListModal from './ContractListModal';
 import MarketplaceAppInfo from './MarketplaceAppInfo';
+import Rating from './Rating/Rating';
+import useRatings from './Rating/useRatings';
 
 type Props = {
+  appId: string;
   data: MarketplaceAppOverview | undefined;
   isLoading: boolean;
   securityReport?: MarketplaceAppSecurityReport;
 }
 
-const MarketplaceAppTopBar = ({ data, isLoading, securityReport }: Props) => {
+const MarketplaceAppTopBar = ({ appId, data, isLoading, securityReport }: Props) => {
   const [ contractListType, setContractListType ] = React.useState<ContractListTypes>();
   const appProps = useAppContext();
   const isMobile = useIsMobile();
 
+  const { ratings, userRatings, rateApp, isSendingRating, isRatingLoading, canRate } = useRatings();
+
   const goBackUrl = React.useMemo(() => {
     if (appProps.referrer && appProps.referrer.includes('/apps') && !appProps.referrer.includes('/apps/')) {
       return appProps.referrer;
@@ -82,6 +87,16 @@ const MarketplaceAppTopBar = ({ data, isLoading, securityReport }: Props) => {
             source="App page"
           />
         ) }
+        <Rating
+          appId={ appId }
+          rating={ ratings?.[appId]?.rating }
+          recordId={ ratings?.[appId]?.recordId }
+          isRatedByUser={ Boolean(userRatings[appId]) }
+          rate={ rateApp }
+          isSending={ isSendingRating }
+          isLoading={ isRatingLoading }
+          canRate={ canRate }
+        />
         { !isMobile && (
           <Flex flex="1" justifyContent="flex-end">
             { config.features.account.isEnabled && <ProfileMenuDesktop boxSize="32px" fallbackIconSize={ 16 }/> }

ui/pages/MarketplaceApp.tsx

@@ -151,6 +151,7 @@ const MarketplaceApp = () => {
   return (
     <Flex flexDirection="column" h="100%">
       <MarketplaceAppTopBar
+        appId={ id }
         data={ data }
         isLoading={ isPending || isSecurityReportsLoading }
         securityReport={ securityReports?.[id] }