Merge pull request tqtezos#117 from tqtezos/alex-kooper/asset-details

Adding asset details page base

client/src/components/App/App.tsx

@@ -1,13 +1,14 @@
 import React, { FC } from 'react';
 import { Switch, Route, useLocation } from 'wouter';
-import { Fade as Reveal} from "react-awesome-reveal";
+import { Fade as Reveal } from 'react-awesome-reveal';
 
 import './App.css';
-import GlobalContextProvider from './globalContext'
+import GlobalContextProvider from './globalContext';
 
 import SplashPage from '../SplashPage';
 import CreateNonFungiblePage from '../CreateNonFungiblePage';
 import AssetsPage from '../AssetsPage';
+import AssetDetailsPage from '../AssetDetailsPage';
 
 const App: FC = () => {
   const [location] = useLocation();
@@ -16,9 +17,23 @@ const App: FC = () => {
     <GlobalContextProvider>
       <Reveal key={location} duration={1500}>
         <Switch>
-          <Route path="/"><SplashPage /></Route>
-          <Route path="/create-non-fungible"><CreateNonFungiblePage /></Route>
-          <Route path="/assets"><AssetsPage /></Route>
+          <Route path="/">
+            <SplashPage />
+          </Route>
+          <Route path="/create-non-fungible">
+            <CreateNonFungiblePage />
+          </Route>
+          <Route path="/assets">
+            <AssetsPage />
+          </Route>
+          <Route path="/asset-details/:contractAddress/:tokenId">
+            {({ contractAddress, tokenId }) => (
+              <AssetDetailsPage
+                contractAddress={contractAddress}
+                tokenId={parseInt(tokenId)}
+              />
+            )}
+          </Route>
         </Switch>
       </Reveal>
     </GlobalContextProvider>

client/src/components/AssetDetailsPage/Actions.tsx

@@ -0,0 +1,23 @@
+/** @jsx jsx */
+import { FC } from 'react';
+import { jsx } from '@emotion/core';
+import { Space, Button } from 'antd';
+
+import { ParamName } from './Typography';
+
+const Actions: FC = () => (
+  <Space size="middle" direction="vertical">
+    <div>
+      <ParamName>STATUS: </ParamName>
+      <ParamName css={{ fontWeight: 'bold', color: 'red' }}>
+        NOT FOR SALE
+      </ParamName>
+    </div>
+
+    <Button type="primary" shape="round" size="large" css={{ width: '10em' }}>
+      List For Sale
+    </Button>
+  </Space>
+);
+
+export default Actions;

client/src/components/AssetDetailsPage/AssetDescription.tsx

@@ -0,0 +1,50 @@
+/** @jsx jsx */
+import url from 'url';
+import { FC, Fragment } from 'react';
+import { jsx } from '@emotion/core';
+
+import { Description, ParamName, ParamValue } from './Typography';
+import { NonFungibleToken } from '../../generated/graphql_schema';
+import { Skeleton } from 'antd';
+import config from '../../config';
+
+const AssetDescription: FC<{ nft?: NonFungibleToken }> = ({ nft }) => (
+  <Fragment>
+    {!nft ? (
+      <Skeleton title={false} paragraph={{ rows: 3 }} />
+    ) : (
+      <Fragment>
+        <Description>{nft.extras.description}</Description>
+
+        <div>
+          <ParamName>Type: </ParamName>
+          <ParamValue>Digital Art</ParamValue>
+        </div>
+
+        <div>
+          <ParamName>Collection: </ParamName>
+          <ParamValue>{nft.contractInfo.name}</ParamValue>
+        </div>
+
+        <div>
+          <ParamName>Owner: </ParamName>
+
+          <ParamValue>
+            <img
+              src={url.resolve(config.tzktAvatarUrl, nft.owner)}
+              css={{ width: '2.5em' }}
+              alt=""
+            />
+            {nft.owner}
+          </ParamValue>
+        </div>
+
+        <div css={{ marginTop: '4em' }}>
+          <ParamName>History: </ParamName>
+        </div>
+      </Fragment>
+    )}
+  </Fragment>
+);
+
+export default AssetDescription;

client/src/components/AssetDetailsPage/Typography.tsx

@@ -0,0 +1,37 @@
+import styled from '@emotion/styled';
+
+export const Name = styled.div({
+  fontFamily: 'sans-serif',
+  fontSize: '45px',
+  lineHeight: '60px',
+  letterSpacing: '0.75px',
+  color: 'black'
+});
+
+export const Description = styled.p({
+  fontFamily: 'sans-serif',
+  fontWeight: 300,
+  fontSize: '20px',
+  lineHeight: '30px',
+  letterSpacing: '0.75px',
+  color: 'black'
+});
+
+export const ParamName = styled.span({
+  fontFamily: 'sans-serif',
+  fontWeight: 300,
+  fontSize: '20px',
+  lineHeight: '30px',
+  letterSpacing: '0.75px',
+  color: 'black'
+});
+
+export const ParamValue = styled.span({
+  fontFamily: 'sans-serif',
+  fontStyle: 'italic',
+  fontWeight: 300,
+  fontSize: '20px',
+  lineHeight: '30px',
+  letterSpacing: '0.75px',
+  color: 'black'
+});

client/src/components/AssetDetailsPage/index.tsx

@@ -0,0 +1,128 @@
+/** @jsx jsx */
+import { FC, Fragment } from 'react';
+import { jsx } from '@emotion/core';
+import { Row, Col, Spin, Skeleton, Alert as AntdAlert } from 'antd';
+import { Flip, AttentionSeeker } from 'react-awesome-reveal';
+
+import Page from '../Page';
+import { BackButtonRow } from '../common/PageTitle';
+import { Name } from './Typography';
+import AssetDescription from './AssetDescription';
+import Actions from './Actions';
+import { useNftsQuery } from '../common/useNftsQuery';
+import { NonFungibleToken } from '../../generated/graphql_schema';
+import { urlFromCid } from '../../api/ipfsUploader';
+import { useWalletAddress } from '../App/globalContext';
+import NotConnectedAlert from '../common/NotConnectedAlert';
+
+const Image: FC<{ nft?: NonFungibleToken }> = ({ nft }) => {
+  return (
+    <Fragment>
+      {!nft ? (
+        <Skeleton.Image
+          css={{
+            display: 'flex',
+            flex: 1,
+            width: '70%',
+            padding: '1em',
+            border: 'solid 1px'
+          }}
+        />
+      ) : (
+        <div css={{ width: '70%', padding: '1em', border: 'solid 1px' }}>
+          <Flip key={nft.extras.ipfs_cid}>
+            <img
+              css={{ width: '100%' }}
+              src={urlFromCid(nft.extras.ipfs_cid)}
+              alt=""
+            />
+          </Flip>
+        </div>
+      )}
+    </Fragment>
+  );
+};
+
+const AssetDetails: FC<{ nft?: NonFungibleToken }> = ({ nft }) => (
+  <Row>
+    <Col offset={3} span={18}>
+      <Row>
+        <Col offset={12} span={12}>
+          {nft ? <Name>{nft.name}</Name> : <Skeleton paragraph={false} />}
+        </Col>
+      </Row>
+      <Row>
+        <Col span={12}>
+          <Image nft={nft} />
+        </Col>
+        <Col span={12}>
+          <AssetDescription nft={nft} />
+        </Col>
+      </Row>
+      <Row>
+        <Col offset={12} span={12}>
+          <Actions />
+        </Col>
+      </Row>
+    </Col>
+  </Row>
+);
+
+const Alert: FC<{ message: string; description: string }> = ({
+  message,
+  description
+}) => (
+  <AttentionSeeker effect="headShake">
+    <AntdAlert
+      css={{ marginTop: '3em', marginBottom: '3em', width: '50em' }}
+      type="error"
+      message={message}
+      description={description}
+      showIcon
+    />
+  </AttentionSeeker>
+);
+interface Props {
+  contractAddress: string;
+  tokenId: number;
+}
+
+export const PageBody: FC<Props> = ({ contractAddress, tokenId }) => {
+  const walletAddress = useWalletAddress();
+  const { data, error, loading } = useNftsQuery(contractAddress);
+  const nft = data?.nfts.find(t => t.tokenId === tokenId);
+
+  if (!walletAddress)
+    return (
+      <NotConnectedAlert
+        message="Cannot show asset details!"
+        description="To see your asset details please connect to your wallet first."
+      />
+    );
+
+  if (error)
+    return <Alert message="GraphQL Error!" description={error.toString()} />;
+
+  if (data && !nft)
+    return (
+      <Alert
+        message="GraphQL Error!"
+        description={`Cannot find token ${tokenId} in contract ${contractAddress}`}
+      />
+    );
+
+  return (
+    <Spin spinning={loading} size="large">
+      <AssetDetails nft={nft} />
+    </Spin>
+  );
+};
+
+const AssetDetailsPage: FC<Props> = ({ contractAddress, tokenId }) => (
+  <Page>
+    <BackButtonRow onClick={() => window.history.back()} />
+    <PageBody contractAddress={contractAddress} tokenId={tokenId} />
+  </Page>
+);
+
+export default AssetDetailsPage;

client/src/components/AssetsPage/AssetCard.tsx

@@ -11,6 +11,7 @@ import { urlFromCid } from '../../api/ipfsUploader';
 import AssetTransfer from './AssetTransfer';
 import { useContracts } from '../App/globalContext';
 import useSettings from '../common/useSettings';
+import { useLocation } from 'wouter';
 
 const { Paragraph, Text, Link } = Typography;
 
@@ -65,6 +66,7 @@ const AssetCard: FC<Props> = ({ token, onChange }) => {
   const [transferVisible, setTransferVisible] = useState(false);
   const contracts = useContracts();
   const { settings } = useSettings();
+  const [, setLocation] = useLocation();
 
   const handleTransfer = () => {
     if (!contracts) {
@@ -182,8 +184,7 @@ const AssetCard: FC<Props> = ({ token, onChange }) => {
           <Col span={12} css={{ display: 'flex', alignItems: 'center' }}>
             <Link
               css={{ margin: 'auto' }}
-              href={`${settings?.bcdGuiUrl}/${settings?.bcdNetwork}/${token.contractInfo.address}`}
-              target="_blank"
+              onClick={() => setLocation(`/asset-details/${token.contractInfo.address}/${token.tokenId}`)}
             >
               DETAILS
             </Link>

client/src/components/AssetsPage/Assets.tsx

@@ -4,7 +4,7 @@ import { jsx } from '@emotion/core';
 import { Row, Col, Spin } from 'antd';
 import { Zoom } from 'react-awesome-reveal';
 
-import { useNftsQuery } from './useNftsQuery';
+import { useNftsQuery } from '../common/useNftsQuery';
 import AssetCard from './AssetCard';
 import ContractsFilter from './ContractsFilter';
 import ContractsTitle from './ContractsTitle';

client/src/components/AssetsPage/index.tsx

@@ -2,31 +2,13 @@
 import { FC } from 'react';
 import { jsx } from '@emotion/core';
 import { useLocation } from 'wouter';
-import { Alert, Row, Col } from 'antd';
-import { AttentionSeeker } from 'react-awesome-reveal';
+import { Row, Col } from 'antd';
 
 import { useWalletAddress } from '../App/globalContext';
-import WalletConnector from '../WalletConnector';
 import Page from '../Page';
 import PageTitle from '../common/PageTitle';
 import Assets from './Assets';
-
-const NotConnectedAlert: FC = () => (
-  <Row>
-    <Col offset={3} span={18}>
-      <AttentionSeeker effect="headShake">
-        <Alert
-          css={{ marginTop: '3em', marginBottom: '3em', width: '50em' }}
-          type="error"
-          message="Cannot show assets!"
-          description="To see your assets please connect to your wallet first."
-          showIcon
-        />
-      </AttentionSeeker>
-      <WalletConnector />
-    </Col>
-  </Row>
-);
+import NotConnectedAlert from '../common/NotConnectedAlert';
 
 const AssetsPage: FC = () => {
   const [, setLocation] = useLocation();
@@ -41,7 +23,18 @@ const AssetsPage: FC = () => {
           setLocation('/');
         }}
       />
-      {walletAddress ? <Assets /> : <NotConnectedAlert />}
+      {walletAddress ? (
+        <Assets />
+      ) : (
+        <Row>
+          <Col offset={3} span={18}>
+            <NotConnectedAlert
+              message="Cannot show assets!"
+              description="To see your assets please connect to your wallet first."
+            />
+          </Col>
+        </Row>
+      )}
     </Page>
   );
 };