layout changes

301DAO · Feb 23, 2022 · d606105 · d606105
1 parent 30385ba
commit d606105
Show file tree

Hide file tree

Showing 15 changed files with 277 additions and 267 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -11,6 +11,7 @@
   "rules": {
     "@next/next/no-img-element": "off",
     "@next/next/no-title-in-document-head": "off",
+    "jsx-a11y/media-has-caption": "off",
     "jsx-a11y/anchor-is-valid": [
       "error",
       {
@@ -20,9 +21,4 @@
       }
     ]
   }
-  // "env": {
-  //   "es6": true,
-  //   "node": true,
-  //   "browser": true
-  // }
 }
diff --git a/src/components/icons/twitter.tsx b/src/components/icons/twitter.tsx
@@ -11,13 +11,12 @@ export const Twitter = ({
 }) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 48 48"
-    // width="22px"
-    // height="22px"
-    className={`text-gray-500 hover:text-gray-100 w-${w} h-${h} ${customStyle}`}
-  >
+    viewBox="0 0 55 55"
+    width="20"
+    height="20"
+    className={`text-gray-500 hover:text-blue-500 w-${w} h-${h} ${customStyle}`}>
     <path
-      fill="rgb(107 114 128)"
+      fill="currentColor"
       d="M42,12.429c-1.323,0.586-2.746,0.977-4.247,1.162c1.526-0.906,2.7-2.351,3.251-4.058c-1.428,0.837-3.01,1.452-4.693,1.776C34.967,9.884,33.05,9,30.926,9c-4.08,0-7.387,3.278-7.387,7.32c0,0.572,0.067,1.129,0.193,1.67c-6.138-0.308-11.582-3.226-15.224-7.654c-0.64,1.082-1,2.349-1,3.686c0,2.541,1.301,4.778,3.285,6.096c-1.211-0.037-2.351-0.374-3.349-0.914c0,0.022,0,0.055,0,0.086c0,3.551,2.547,6.508,5.923,7.181c-0.617,0.169-1.269,0.263-1.941,0.263c-0.477,0-0.942-0.054-1.392-0.135c0.94,2.902,3.667,5.023,6.898,5.086c-2.528,1.96-5.712,3.134-9.174,3.134c-0.598,0-1.183-0.034-1.761-0.104C9.268,36.786,13.152,38,17.321,38c13.585,0,21.017-11.156,21.017-20.834c0-0.317-0.01-0.633-0.025-0.945C39.763,15.197,41.013,13.905,42,12.429"
     />
   </svg>

diff --git a/src/components/layouts/footer.tsx b/src/components/layouts/footer.tsx
@@ -2,25 +2,31 @@ import * as React from 'react';
 import clsx from 'clsx';
 import { Twitter, Discord, Github, LinkIcon } from '@/components/icons';
 
-const socialLinks = [
+type SocialLink = {
+  name: string;
+  url: string;
+  icon: React.ReactNode;
+};
+
+const socialLinks: SocialLink[] = [
   {
     name: 'twitter',
-    link: 'https://twitter.com/404DAO',
+    url: 'https://twitter.com/404DAO',
     icon: <Twitter />,
   },
   {
     name: 'discord',
-    link: 'https://discord.gg/FTWBuS7E',
+    url: 'https://discord.gg/FTWBuS7E',
     icon: <Discord />,
   },
   {
     name: 'github',
-    link: 'https://github.com/404DAO',
+    url: 'https://github.com/404DAO',
     icon: <Github />,
   },
   {
     name: 'website',
-    link: 'https://404dao.com',
+    url: 'https://404dao.com',
     icon: <LinkIcon />,
   },
 ];
@@ -29,12 +35,12 @@ export function Footer() {
   return (
     <footer
       className={clsx(
-        `fixed bottom-0 left-0 m-0 box-border flex h-16 w-full items-center justify-center border-t border-solid border-gray-700 p-4 text-gray-700`,
+        `static bottom-0 left-0 m-0 box-border flex h-14 w-full items-center justify-center border-t border-solid border-gray-700 p-4 text-gray-700 md:fixed`,
         `border-gray-600 dark:bg-[#14141b] dark:text-gray-300`
       )}>
       <div className={clsx(`flex gap-x-10 rounded-lg bg-gray-100 p-2.5`, `dark:bg-transparent`)}>
         {socialLinks.map(item => (
-          <a key={item.name} href={item.link} target="_blank" rel="noopener noreferrer">
+          <a key={item.name} href={item.url} target="_blank" rel="noopener noreferrer">
             {item.icon}
           </a>
         ))}

diff --git a/src/components/layouts/gallery.tsx b/src/components/layouts/gallery.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
+import clsx from 'clsx';
 import type { NFT } from '@/types';
 import { MediaComponent } from '@/components';
-import clsx from 'clsx';
 import { isImage, isVideo, range } from '@/utils';
 
 export const Nft = ({
@@ -18,7 +18,7 @@ export const Nft = ({
     target="_blank"
     rel="noreferrer"
     className="group">
-    <div className="aspect-w-1 aspect-h-1 xl:aspect-w-7 xl:aspect-h-8 w-full overflow-hidden rounded-lg bg-transparent">
+    <div className="w-full overflow-hidden bg-transparent rounded-lg aspect-w-1 aspect-h-1 xl:aspect-w-7 xl:aspect-h-8">
       {children}
     </div>
   </a>
@@ -29,19 +29,19 @@ export const Gallery = ({ nfts }: { nfts: NFT[] }) => {
   const count = nfts.length;
   return (
     <div className="bg-transparent">
-      <div className="mx-auto max-w-2xl lg:max-w-7xl">
+      <div className="max-w-2xl mx-auto lg:max-w-7xl">
         <h2 className="sr-only">NFTs</h2>
-
         <div
           id="nfts"
           className={clsx(
-            `grid grid-cols-1 gap-y-6 gap-x-6 sm:grid-cols-2 lg:grid-cols-3 xl:gap-x-4`,
-            !!count && range(1, 4).includes(count) && `xl:grid-cols-2`,
-            !!count && count > 9 && `grid-cols-4`
+            `grid grid-cols-1 gap-y-2 gap-x-2 sm:grid-cols-2 md:gap-y-6 md:gap-x-6 lg:grid-cols-3 xl:gap-x-4`,
+            !!count && range(1, 4).includes(count) && `xl:grid-cols-2`
+            // !!count && count > 9 && `md:grid-cols-4`
           )}>
           {nfts.map(({ cached_file_url, contract_address, token_id, name, description }, idx) => {
             const url = cached_file_url;
             if (!url) return null;
+            console.log(url);
             if (isImage(url)) {
               return (
                 <Nft key={idx} contract_address={contract_address} token_id={token_id}>
@@ -52,15 +52,10 @@ export const Gallery = ({ nfts }: { nfts: NFT[] }) => {
             if (isVideo(url)) {
               return (
                 <Nft key={idx} contract_address={contract_address} token_id={token_id}>
-                  <video key={idx} controls src={url} autoPlay loop className={style}>
-                    <track kind="captions" srcLang="en">
-                      Your browser doesn{"'"}t support embedded videos :\
-                    </track>
-                  </video>
+                  <video key={idx} controls src={url} autoPlay loop className={style} />
                 </Nft>
               );
             }
-            console.log(`Unknown media type: ${url}`);
             return (
               <Nft key={idx} contract_address={contract_address} token_id={token_id}>
                 <MediaComponent mediaUrl={url} />

diff --git a/src/components/media-tag.tsx b/src/components/media-tag.tsx
@@ -23,14 +23,9 @@ export const MediaComponent = ({ mediaUrl }: { mediaUrl: string }) => {
     return <img src={mediaUrl} loading="lazy" className={style} alt="nft media" />;
   }
 
-  if (isVideo(mediaUrl) || (!!mediaType && isVideoContentType(mediaType)))
-    return (
-      <video controls src={mediaUrl} autoPlay loop className={style}>
-        <track kind="captions" srcLang="en">
-          Your browser doesn{"'"}t support embedded videos :\
-        </track>
-      </video>
-    );
+  if (isVideo(mediaUrl) || (!!mediaType && isVideoContentType(mediaType))) {
+    return <video controls src={mediaUrl} autoPlay loop className={style} />;
+  }
 
   return null;
 };
diff --git a/src/components/profile/profile-table-row.tsx b/src/components/profile/profile-table-row.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react';
+import Link from 'next/link';
+import clsx from 'clsx';
 import { utils } from 'ethers';
 import { useMutation } from 'react-query';
+import { useEnsLookup, useEnsAvatar, useEnsResolver } from 'wagmi';
 import { follow, unfollow } from '@/lib';
 import { queryClient } from '@/lib/clients';
-import { useEnsImage } from '@/hooks';
-import clsx from 'clsx';
-
-import { useEnsLookup } from 'wagmi';
+import { Twitter } from '@/components/icons';
 
 export const ProfileRow = ({
   myAddress,
@@ -20,7 +20,17 @@ export const ProfileRow = ({
   const [, setLoading] = React.useState(false);
 
   const [{ data: name }] = useEnsLookup({ address: userAddress });
-  const [image] = useEnsImage(name as string);
+  const [{ data: image }] = useEnsAvatar({ addressOrName: name });
+  const [{ data: resolver }] = useEnsResolver({ name, skip: !name });
+
+  const [twitter, setTwitter] = React.useState<string | null>(null);
+  React.useEffect(() => {
+    if (!name || !resolver) return;
+    resolver.getText('com.twitter').then(twitter => {
+      if (!twitter) return;
+      setTwitter(twitter);
+    });
+  }, [name, resolver]);
 
   const followMutation = useMutation(
     () =>
@@ -71,26 +81,27 @@ export const ProfileRow = ({
       />
 
       <div className="mr-auto">
-        <a
-          className={clsx(
-            `truncate text-sm font-medium text-gray-900 md:text-lg`,
-            `hover:decoration-solid dark:text-white dark:hover:text-gray-200`
-          )}
-          href={`https://app.ens.domains/name/${name}`}
-          rel="noopener noreferrer"
-          target="_blank">
-          {name}
-        </a>
+        <Link href={`/user/${name}`} passHref>
+          <a
+            className={clsx(
+              `truncate text-sm font-medium text-gray-900 md:text-lg`,
+              `hover:decoration-solid dark:text-white dark:hover:text-gray-200`
+            )}>
+            {name}
+          </a>
+        </Link>
       </div>
       <div className="hidden md:w-full"></div>
 
       <p className="mr-auto text-sm font-medium text-gray-900 truncate dark:text-white md:whitespace-normal md:text-lg">
         {utils.getAddress(userAddress)}
       </p>
       <div className="hidden md:w-full"></div>
-      {/* <button>
-				<Twitter />
-			</button> */}
+      {twitter ? (
+        <a href={`https://twitter.com/${twitter}`} target="_blank" rel="noopener noreferrer">
+          <Twitter />
+        </a>
+      ) : null}
       <div className="ml-auto">
         <button
           onClick={followUser}

diff --git a/src/components/search-bar.tsx b/src/components/search-bar.tsx
@@ -41,6 +41,7 @@ const toastEm = ({ content = 'Invalid input' }: { content: string | JSX.Element
 
 export const SearchBar = () => {
   const router = useRouter();
+
   const { authenticated, status } = useUser();
 
   const provider = useInjectedProvider();

diff --git a/src/components/user-row.tsx b/src/components/user-row.tsx
@@ -1,25 +1,25 @@
 import * as React from 'react';
-import { useQueryENS, useEnsImage } from '@/hooks';
 import Link from 'next/link';
+import { useEnsAvatar, useEnsLookup } from 'wagmi';
 
 export const Row = ({ address }: { address: string }) => {
-  const [, name] = useQueryENS({ address, name: address });
-  const [image] = useEnsImage(name as string);
+  const [{ data: ens }] = useEnsLookup({ address });
+  const [{ data: avatar }] = useEnsAvatar({ addressOrName: address });
   return (
     <Link href={`/user/${address}`} passHref prefetch={true}>
       <a className="flex items-center space-x-4">
         <div className="flex-shrink-0">
           <img
-            className="h-8 w-8 rounded-full"
-            src={image ?? `/images/placeholder.png`}
+            className="w-8 h-8 rounded-full"
+            src={avatar ?? `/images/placeholder.png`}
             alt="User avatar"
           />
         </div>
         <div className="flex-shrink-0">
-          <p className="text-sm font-medium text-gray-900 dark:text-white">{name ?? `N/A`}</p>
+          <p className="text-sm font-medium text-gray-900 dark:text-white">{ens ?? `N/A`}</p>
         </div>
-        <div className="min-w-0 flex-1">
-          <p className="truncate text-xs font-medium text-gray-900 dark:text-white">{address}</p>
+        <div className="flex-1 min-w-0">
+          <p className="text-xs font-medium text-gray-900 truncate dark:text-white">{address}</p>
         </div>
       </a>
     </Link>

diff --git a/src/hooks/use-provider.ts b/src/hooks/use-provider.ts
@@ -8,7 +8,7 @@ export const useJsonRpcProvider = () =>
   });
 
 export const useWssJsonRpcProvider = () =>
-  new providers.InfuraWebSocketProvider(undefined, process.env.NEXT_PUBLIC_ALCHEMY_KEY);
+  new providers.AlchemyWebSocketProvider(undefined, process.env.NEXT_PUBLIC_ALCHEMY_KEY);
 
 export const useInjectedProvider = () =>
   hasMetaMask

diff --git a/src/hooks/use-query-ens.ts b/src/hooks/use-query-ens.ts
@@ -11,7 +11,13 @@ export const useQueryENS = ({
   address?: string;
   name?: string;
   enabled?: boolean;
-}) => {
+}): [
+  address: string | undefined,
+  name: string | null,
+  loading: boolean,
+  isError: boolean,
+  refetch: () => void
+] => {
   const param = address || name;
 
   const {