zer0-os · Remscar · Apr 6, 2022 · Mar 9, 2022 · Mar 10, 2022 · Mar 10, 2022
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "zns-dapp",
-	"version": "0.13.3",
+	"version": "0.14.0",
 	"private": true,
 	"dependencies": {
 		"@apollo/client": "^3.3.13",
@@ -37,7 +37,8 @@
 		"@web3-react/trezor-connector": "^6.1.9",
 		"@web3-react/walletconnect-connector": "6.2.4",
 		"@web3-react/walletlink-connector": "^6.1.9",
-		"@zero-tech/zauction-sdk": "0.0.58",
+		"@zero-tech/zdao-sdk": "github:zer0-os/zdao-sdk#508b5c0bb6da593a5f5fcc61221ef2ae06b00349",
+		"@zero-tech/zauction-sdk": "0.0.60",
 		"@zero-tech/zfi-sdk": "0.1.16",
 		"@zero-tech/zns-sdk": "^0.1.32",
 		"@zero-tech/zsale-sdk": "0.0.5",
@@ -55,6 +56,7 @@
 		"graphql": "^15.5.0",
 		"graphql-tag": "^2.11.0",
 		"ipfs-http-client": "^50.0.0",
+		"js-big-decimal": "^1.3.4",
 		"lodash": "^4.17.21",
 		"millify": "^4.0.0",
 		"moment": "^2.29.1",
@@ -63,6 +65,7 @@
 		"react-cache-buster": "^0.1.5",
 		"react-clipboard.js": "^2.0.16",
 		"react-dom": "^17.0.2",
+		"react-feather": "^2.0.9",
 		"react-hook-form": "^6.15.5",
 		"react-intersection-observer": "^8.32.1",
 		"react-laag": "^2.0.3",

diff --git a/src/App.tsx b/src/App.tsx
@@ -26,16 +26,17 @@ import { ChainSelectorProvider } from 'lib/providers/ChainSelectorProvider';
 import { SubgraphProvider } from 'lib/providers/SubgraphProvider';
 import CurrentDomainProvider from 'lib/providers/CurrentDomainProvider';
 import MvpVersionProvider from 'lib/providers/MvpVersionProvider';
+import { ROUTES } from 'constants/routes';
 
 //- Asset Imports
 import backgroundImage from 'assets/background.jpg';
 
 //- Page Imports
 import { ZNS, Staking } from 'pages';
 import PageContainer from 'containers/PageContainer';
+import DAO from 'pages/DAO/DAO';
 import { ZnsSdkProvider } from 'lib/providers/ZnsSdkProvider';
 
-// Web3 library to query
 function getLibrary(provider: any): Web3Provider {
 	const library = new Web3Provider(provider);
 	library.pollingInterval = 12000;
@@ -68,8 +69,9 @@ function App() {
 				<Switch>
 					<CurrentDomainProvider>
 						<PageContainer>
-							<Route path="/market" component={ZNS} />
-							<Route path="/staking" component={Staking} />
+							<Route path={ROUTES.MARKET} component={ZNS} />
+							<Route path={ROUTES.STAKING} component={Staking} />
+							<Route path={ROUTES.ZDAO} component={DAO} />
 							<Route exact path="/">
 								<Redirect to="/market" />
 							</Route>

diff --git a/src/assets/default_asset.png b/src/assets/default_asset.png
diff --git a/src/assets/default_dao.svg b/src/assets/default_dao.svg
diff --git a/src/assets/erc20-default.svg b/src/assets/erc20-default.svg
diff --git a/src/assets/erc721-default.svg b/src/assets/erc721-default.svg
diff --git a/src/assets/wilder-logo-small.png b/src/assets/wilder-logo-small.png
diff --git a/src/components/Artwork/Artwork.tsx b/src/components/Artwork/Artwork.tsx
@@ -27,6 +27,9 @@ type ArtworkProps = {
 	name?: string;
 	pending?: boolean;
 	style?: React.CSSProperties;
+	subtext?: string;
+	shouldUseCloudinary?: boolean;
+	shouldHideRoot?: boolean;
 };
 
 const cx = classNames.bind(styles);
@@ -42,13 +45,18 @@ const Artwork: React.FC<ArtworkProps> = ({
 	name,
 	pending,
 	style,
+	subtext,
+	shouldUseCloudinary,
+	shouldHideRoot,
 }) => {
 	const isMounted = useRef(false);
 	const loadTime = useRef<Date | undefined>();
 	const [metadata, setMetadata] = useState<Metadata | undefined>();
 	const [truncatedDomain, setTruncatedDomain] = useState<string | undefined>();
 	const [shouldAnimate, setShouldAnimate] = useState<boolean>(true);
 
+	const root = shouldHideRoot ? '' : 'wilder.';
+
 	useEffect(() => {
 		// Get metadata
 		isMounted.current = true;
@@ -69,10 +77,10 @@ const Artwork: React.FC<ArtworkProps> = ({
 		}
 
 		// Truncate
-		if (domain && ('wilder.' + domain).length > 30) {
+		if (domain && (root + domain).length > 30) {
 			const split = domain.split('.');
 			if (isMounted.current === true) {
-				setTruncatedDomain('wilder...' + split[split.length - 1]);
+				setTruncatedDomain(root + split[split.length - 1]);
 			}
 		} else {
 			if (isMounted.current === true) {
@@ -83,13 +91,11 @@ const Artwork: React.FC<ArtworkProps> = ({
 		return () => {
 			isMounted.current = false;
 		};
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [domain, metadataUrl]);
 
 	const artwork = React.useMemo(() => {
-		if (image) {
-			return <Image alt="pool icon" src={image} />;
-		}
-		if (metadata) {
+		if (shouldUseCloudinary || metadata) {
 			return (
 				<NFTMedia
 					disableLightbox
@@ -99,10 +105,14 @@ const Artwork: React.FC<ArtworkProps> = ({
 					size="tiny"
 					className={`${styles.Image} border-rounded`}
 					alt="NFT Preview"
-					ipfsUrl={metadata?.image_full || metadata?.image || ''}
+					ipfsUrl={image ?? metadata?.image_full ?? metadata?.image ?? ''}
 				/>
 			);
 		}
+		if (image) {
+			return <Image alt="pool icon" src={image} />;
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [image, metadata]);
 
 	return (
@@ -128,7 +138,10 @@ const Artwork: React.FC<ArtworkProps> = ({
 							{(animatedStyles) => (
 								<animated.div style={animatedStyles}>
 									<span
-										style={{ cursor: pending ? 'default' : 'pointer' }}
+										style={{
+											cursor:
+												pending || disableInteraction ? 'default' : 'pointer',
+										}}
 										className={styles.Title}
 									>
 										{metadata?.title || name}
@@ -139,7 +152,9 @@ const Artwork: React.FC<ArtworkProps> = ({
 					)}
 					{!shouldAnimate && metadata?.title && (
 						<span
-							style={{ cursor: pending ? 'default' : 'pointer' }}
+							style={{
+								cursor: pending || disableInteraction ? 'default' : 'pointer',
+							}}
 							className={styles.Title}
 						>
 							{metadata?.title || name}
@@ -149,13 +164,16 @@ const Artwork: React.FC<ArtworkProps> = ({
 						<>
 							{disableInteraction && domain && (
 								<span className={styles.Domain}>
-									{truncatedDomain || 'wilder.' + domain}
+									{truncatedDomain || root + domain}
 								</span>
 							)}
+							{subtext && !domain && (
+								<span className={styles.Domain}>{subtext}</span>
+							)}
 							{!disableInteraction && domain && (
 								<Link
 									className={styles.Domain}
-									to={domain.split('wilder.')[1]}
+									to={domain.split(root)[1]}
 									target="_blank"
 									rel="noreferrer"
 								>

diff --git a/src/components/Cards/ImageCard/ImageCard.module.scss b/src/components/Cards/ImageCard/ImageCard.module.scss
@@ -0,0 +1,45 @@
+.Container {
+	cursor: pointer;
+	min-width: 280px;
+	border-radius: var(--box-radius);
+	overflow: hidden;
+	background-color: var(--color-background-alt);
+
+	@media only screen and (max-width: 414px) {
+		min-width: unset;
+	}
+
+	.Header {
+		margin-bottom: 1px;
+		color: white;
+		font-size: 18px;
+		font-weight: 700;
+	}
+
+	.Subheader {
+		color: #bfbfbf;
+	}
+
+	.Body {
+		position: relative;
+		padding-top: 100%;
+	}
+
+	.Image {
+		position: absolute;
+		top: 0;
+		left: 0;
+		bottom: 0;
+		right: 0;
+		border-radius: var(--box-radius) var(--box-radius) 0 0;
+
+		img,
+		video {
+			width: 100%;
+		}
+	}
+
+	.Footer {
+		padding: 16px;
+	}
+}
diff --git a/src/components/Cards/ImageCard/ImageCard.tsx b/src/components/Cards/ImageCard/ImageCard.tsx
@@ -0,0 +1,54 @@
+import styles from './ImageCard.module.scss';
+import { Image, NFTMedia } from 'components';
+import classNames from 'classnames/bind';
+
+const cx = classNames.bind(styles);
+
+type ImageCardProps = {
+	children: React.ReactNode;
+	imageUri?: string;
+	header?: string;
+	onClick?: () => void;
+	subHeader?: string;
+	className?: string;
+	shouldUseCloudinary?: boolean;
+};
+
+const ImageCard = ({
+	children,
+	header,
+	imageUri,
+	onClick,
+	subHeader,
+	className,
+	shouldUseCloudinary,
+}: ImageCardProps) => {
+	return (
+		<div className={cx(styles.Container, className)} onClick={onClick}>
+			<div className={styles.Body}>
+				<div className={styles.Image}>
+					{shouldUseCloudinary ? (
+						<NFTMedia
+							disableLightbox
+							style={{
+								zIndex: 2,
+							}}
+							size="medium"
+							alt="NFT Preview"
+							ipfsUrl={imageUri ?? ''}
+						/>
+					) : (
+						<Image src={imageUri} />
+					)}
+				</div>
+			</div>
+			<div className={styles.Footer}>
+				<h5 className={styles.Header}>{header ?? ''}</h5>
+				<span className={styles.Subheader}>{subHeader ?? ''}</span>
+				{children}
+			</div>
+		</div>
+	);
+};
+
+export default ImageCard;
diff --git a/src/components/Cards/NFTCard/NFTCard.tsx b/src/components/Cards/NFTCard/NFTCard.tsx
@@ -67,7 +67,7 @@ const NFTCard: React.FC<NFTCardProps> = ({
 		return (
 			<NFTMedia
 				className={styles.NFT}
-				ipfsUrl={imageUri ? imageUri : ''}
+				ipfsUrl={imageUri ?? ''}
 				style={{ height: hasAspectRatio ? 'auto' : 348 }}
 				size="medium"
 				alt={`NFT preview for ${name}`}

diff --git a/src/components/Image/Image.tsx b/src/components/Image/Image.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef } from 'react';
 
 import styles from './Image.module.scss';
 // import placeholder from './'
@@ -18,18 +18,16 @@ const Image = (props: any) => {
 		}
 	};
 
-	const load = () => setLoaded(true);
+	const load = () => {
+		setLoaded(true);
+	};
+
 	const err = (e: any) => {
 		if (props.src) {
 			setTryVideo(true);
 		}
 	};
 
-	useEffect(() => {
-		setTryVideo(false);
-		setLoaded(false);
-	}, [props.src]);
-
 	return (
 		<div
 			ref={containerRef}

diff --git a/src/components/Inputs/TextInput/TextInputWithTopPlaceHolder.tsx b/src/components/Inputs/TextInput/TextInputWithTopPlaceHolder.tsx
@@ -6,14 +6,15 @@ interface TextInputWithTopPlaceHolderProps extends TextInputProps {
 	topPlaceholder: string;
 }
 
-const TextInputWithTopPlaceHolder: React.FC<TextInputWithTopPlaceHolderProps> =
-	({ topPlaceholder, ...props }) => {
-		return (
-			<div className={styles.TextInputTopPlaceholderWrapper}>
-				<span className={styles.TopPlaceholder}>{topPlaceholder}</span>
-				<TextInput {...props} className={styles.TextInputTopPlaceholder} />
-			</div>
-		);
-	};
+const TextInputWithTopPlaceHolder: React.FC<
+	TextInputWithTopPlaceHolderProps
+> = ({ topPlaceholder, ...props }) => {
+	return (
+		<div className={styles.TextInputTopPlaceholderWrapper}>
+			<span className={styles.TopPlaceholder}>{topPlaceholder}</span>
+			<TextInput {...props} className={styles.TextInputTopPlaceholder} />
+		</div>
+	);
+};
 
 export default TextInputWithTopPlaceHolder;