fix: display nft image + style nft instance in mobile

AstraProtocol · Dec 8, 2022 · ea8bc52 · ea8bc52
1 parent 0471081
commit ea8bc52
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 24 deletions.
diff --git a/next.config.js b/next.config.js
@@ -17,17 +17,7 @@ const nextConfig = {
 		remotePatterns: [
 			{
 				protocol: 'https',
-				hostname: 'ipfs.io',
-				pathname: '/ipfs/**'
-			},
-			{
-				protocol: 'https',
-				hostname: 'astranaut.dev',
-				pathname: '/**'
-			},
-			{
-				protocol: 'https',
-				hostname: 'astranaut.io',
+				hostname: '*',
 				pathname: '/**'
 			}
 		]

diff --git a/views/tokens/[instance]/NftOverview.tsx b/views/tokens/[instance]/NftOverview.tsx
@@ -1,3 +1,5 @@
+import { useMobileLayout } from '@astraprotocol/astra-ui'
+import clsx from 'clsx'
 import BackgroundCard from 'components/Card/Background/BackgroundCard'
 import Row from 'components/Grid/Row'
 import Image from 'next/image'
@@ -9,29 +11,37 @@ interface Props {
 }
 
 const NftOverview = ({ token, tokenData, tokenId }: Props) => {
+	const { isMobile } = useMobileLayout()
+	const size = isMobile ? 200 : 800
+	const Layout = ({ children }) =>
+		isMobile ? (
+			<div style={{ display: 'flex', flexDirection: 'column-reverse' }}>{children}</div>
+		) : (
+			<Row>{children}</Row>
+		)
 	const tokenImage = tokenData?.image.replace('ipfs://', 'https://ipfs.io/ipfs/')
 	return (
 		<BackgroundCard classes="padding-top-lg padding-bottom-lg margin-top-2xl padding-left-2xl padding-right-2xl">
-			<Row>
-				<div className="col-6 margin-right-md">
+			<Layout>
+				<div className="margin-right-md">
 					<Row style={{ justifyContent: 'space-between' }}>
-						<span className="text text-base contrast-color-50">Token ID:</span>
-						<span className="text text-base">{tokenId}</span>
+						<div className="text text-base contrast-color-50">Token ID:</div>
+						<div className="text text-base">{tokenId}</div>
 					</Row>
 					<Row style={{ justifyContent: 'space-between' }}>
-						<span className="text text-base contrast-color-50">Name:</span>
-						<span className="text text-base">{tokenData.name}</span>
+						<div className="text text-base contrast-color-50">Name:</div>
+						<div className="text text-base">{tokenData.name}</div>
 					</Row>
 
-					<Row style={{ justifyContent: 'space-between' }}>
-						<span className="text text-base contrast-color-50">Description:</span>
-						<span className="text text-base">{tokenData.description}</span>
-					</Row>
+					{/* <Row style={{ justifyContent: 'space-between', alignItems: 'flex-start' }}> */}
+					<div className="text text-base contrast-color-50">Description:</div>
+					<div className="text text-base">&quot;{tokenData.description}&quot;</div>
+					{/* </Row> */}
 				</div>
-				<div className="col-6 flex flex-justify-end">
-					<Image src={tokenImage} alt={tokenData.name} height={100} width={120} layout="fixed" />
+				<div className={clsx(isMobile ? 'margin-bottom-md' : 'flex flex-justify-end')}>
+					<Image src={tokenImage} alt={tokenData.name} width={size} height={size} />
 				</div>
-			</Row>
+			</Layout>
 		</BackgroundCard>
 	)
 }