Show NFT instance details sections

src/app/pages/NFTInstanceDashboardPage/index.tsx

@@ -2,7 +2,10 @@ import { FC } from 'react'
 import { useParams } from 'react-router-dom'
 import { useRequiredScopeParam } from '../../hooks/useScopeParam'
 import { PageLayout } from '../../components/PageLayout'
-import { Layer } from '../../../oasis-nexus/api'
+import { InstanceTitleCard } from './InstanceTitleCard'
+import { InstanceDetailsCard } from './InstanceDetailsCard'
+import { InstanceImageCard } from './InstanceImageCard'
+import { Layer, Runtime, useGetRuntimeEvmTokensAddressNftsId } from '../../../oasis-nexus/api'
 import { AppErrors } from '../../../types/errors'
 
 export const NFTInstanceDashboardPage: FC = () => {
@@ -17,5 +20,25 @@ export const NFTInstanceDashboardPage: FC = () => {
     throw AppErrors.InvalidUrl
   }
 
-  return <PageLayout />
+  const { data, isFetched, isLoading } = useGetRuntimeEvmTokensAddressNftsId(
+    scope.network,
+    scope.layer as Runtime,
+    address,
+    instanceId,
+  )
+  const nft = data?.data
+
+  return (
+    <PageLayout>
+      <InstanceTitleCard isFetched={isFetched} isLoading={isLoading} nft={nft} scope={scope} />
+      <InstanceImageCard isFetched={isFetched} isLoading={isLoading} nft={nft} />
+      <InstanceDetailsCard
+        isFetched={isFetched}
+        isLoading={isLoading}
+        nft={nft}
+        scope={scope}
+        contractAddress={address!}
+      />
+    </PageLayout>
+  )
 }