fix: price range and details screen sizing (#5094)

* adjustments to screen sizing and updating to work better with graphql

src/graphql/data/nft/Details.ts

@@ -37,6 +37,9 @@ const detailsQuery = graphql`
             name
             isVerified
             numAssets
+            twitterName
+            discordUrl
+            homepageUrl
             image {
               url
             }
@@ -158,6 +161,9 @@ export function useDetailsQuery(address: string, tokenId: string): [GenieAsset,
       collectionName: collection?.name ?? undefined,
       isVerified: collection?.isVerified ?? undefined,
       totalSupply: collection?.numAssets ?? undefined,
+      twitterUrl: collection?.twitterName ?? undefined,
+      discordUrl: collection?.discordUrl ?? undefined,
+      externalUrl: collection?.homepageUrl ?? undefined,
     },
   ]
 }

src/nft/components/details/AssetDetails.tsx

@@ -405,6 +405,12 @@ export const AssetDetails = ({ asset, collection, collectionStats }: AssetDetail
     [isSuccess, eventsData]
   )
 
+  // TODO: remove after switching to graphql
+  const externalUrl = collection.externalUrl ?? collectionStats?.externalUrl
+  const twitterUrl = collection.twitterUrl ?? collectionStats?.twitterUrl
+  const discordUrl = collection.discordUrl ?? collectionStats?.discordUrl
+  const isVerified = collection.isVerified ?? collectionStats?.isVerified
+
   return (
     <Column>
       <MediaContainer>
@@ -423,7 +429,7 @@ export const AssetDetails = ({ asset, collection, collectionStats }: AssetDetail
       </MediaContainer>
       <DefaultLink to={`/nfts/collection/${asset.address}`}>
         <CollectionHeader>
-          {collection.collectionName} {collectionStats?.isVerified && <VerifiedIcon />}
+          {collection.collectionName} {isVerified && <VerifiedIcon />}
         </CollectionHeader>
       </DefaultLink>
 
@@ -508,11 +514,9 @@ export const AssetDetails = ({ asset, collection, collectionStats }: AssetDetail
 
           <DescriptionText>{collection.collectionDescription}</DescriptionText>
           <SocialsContainer>
-            {collectionStats?.externalUrl && <Resource name="Website" link={`${collectionStats?.externalUrl}`} />}
-            {collectionStats?.twitterUrl && (
-              <Resource name="Twitter" link={`https://twitter.com/${collectionStats?.twitterUrl}`} />
-            )}
-            {collectionStats?.discordUrl && <Resource name="Discord" link={collectionStats?.discordUrl} />}
+            {externalUrl && <Resource name="Website" link={`${externalUrl}`} />}
+            {twitterUrl && <Resource name="Twitter" link={`https://twitter.com/${twitterUrl}`} />}
+            {discordUrl && <Resource name="Discord" link={discordUrl} />}
           </SocialsContainer>
         </>
       </InfoContainer>

src/nft/pages/asset/Asset.tsx

@@ -16,7 +16,17 @@ const AssetContainer = styled.div`
   width: 100%;
   justify-content: center;
   gap: 60px;
-  padding: 48px 40px 0 40px;
+  padding: 48px 48px 0 48px;
+
+  @media (max-width: 960px) {
+    padding: 40px 40px 0 40px;
+  }
+  @media (max-width: 540px) {
+    padding: 20px 20px 0 20px;
+  }
+  @media (max-width: 420px) {
+    padding: 16px 16px 0 16px;
+  }
 `
 
 const AssetPriceDetailsContainer = styled.div`

src/nft/queries/genie/CollectionStatsFetcher.ts

@@ -57,6 +57,9 @@ export const CollectionStatsFetcher = async (addressOrName: string, recursive =
 
   const data = await r.json()
   const collections = data?.data.map((collection: Record<string, unknown>) => {
+    // @ts-ignore
+    collection.stats.floor_price = collection.floorPrice
+
     return {
       ...collection,
       traits: collection.traits && groupBy(collection.traits as unknown[], 'trait_type'),

src/nft/types/collection/collection.ts

@@ -26,6 +26,9 @@ export interface CollectionInfoForAsset {
   collectionName?: string
   isVerified?: boolean
   totalSupply?: number
+  discordUrl?: string
+  twitterUrl?: string
+  externalUrl?: string
 }
 
 export type CollectionSort = Record<