improve feed

301DAO · Mar 15, 2022 · e6d853a · e6d853a
1 parent 07afb5b
commit e6d853a
Show file tree

Hide file tree

Showing 53 changed files with 880 additions and 342 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -1,13 +1,13 @@
 {
-	"singleQuote": true,
-	"trailingComma": "es5",
-	"printWidth": 100,
-	"tabWidth": 2,
-	"useTabs": false,
-	"semi": true,
-	"bracketSpacing": true,
-	"jsxBracketSameLine": true,
-	"objectCurlySpacing": true,
-	"bracketSameLine": false,
-	"arrowParens": "avoid"
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "printWidth": 100,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "bracketSpacing": true,
+  "jsxBracketSameLine": true,
+  "objectCurlySpacing": true,
+  "bracketSameLine": false,
+  "arrowParens": "avoid"
 }
diff --git a/next.config.js b/next.config.js
@@ -7,4 +7,12 @@ module.exports = {
     domains: ['live.staticflickr.com'],
   },
   poweredByHeader: false,
+  async rewrites() {
+    return [
+      {
+        source: '/feed/:address',
+        destination: '/feed',
+      },
+    ];
+  },
 };
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -51,6 +51,8 @@
     "@typescript-eslint/parser": "^5.14.0",
     "@welldone-software/why-did-you-render": "^6.2.3",
     "autoprefixer": "^10.4.2",
+    "dotenv": "^16.0.0",
+    "dotenv-cli": "^5.0.0",
     "eslint": "^8.10.0",
     "eslint-config-next": "^12.1.0",
     "eslint-config-prettier": "^8.5.0",
@@ -67,6 +69,7 @@
     "prettier": "^2.5.1",
     "prettier-plugin-tailwindcss": "^0.1.8",
     "tailwindcss": "^3.0.23",
+    "tsconfig-paths": "^3.13.0",
     "typescript": "^4.6.2"
   }
 }
diff --git a/src/components/connect-modal.tsx b/src/components/connect-modal.tsx
@@ -21,7 +21,8 @@ export const ConnectWalletModal = ({
             enterTo="opacity-100"
             leave="ease-in duration-200"
             leaveFrom="opacity-100"
-            leaveTo="opacity-0">
+            leaveTo="opacity-0"
+          >
             <Dialog.Overlay className="fixed inset-0 bg-[rgba(18,19,23,0.7)]" />
           </Transition.Child>
           <span className="inline-block h-screen align-middle" aria-hidden="true">
@@ -34,14 +35,16 @@ export const ConnectWalletModal = ({
             enterTo="opacity-100 scale-100"
             leave="ease-in duration-200"
             leaveFrom="opacity-100 scale-100"
-            leaveTo="opacity-0 scale-95">
+            leaveTo="opacity-0 scale-95"
+          >
             <div className="inline-block w-full max-w-[22rem] origin-top-right divide-gray-100 rounded-md border bg-[rgb(18,18,24)] p-[0.1rem] font-semibold leading-6 text-gray-300 shadow-[0_4px_30px_rgba(0,0,0,0.1)] ring-1 ring-black ring-opacity-5 backdrop-blur-md focus:outline-none md:max-w-[30rem]">
               <Dialog.Title
                 as="h3"
-                className="pt-5 text-lg antialiased font-semibold leading-7 tracking-wide text-gray-200">
+                className="pt-5 text-lg font-semibold leading-7 tracking-wide text-gray-200 antialiased"
+              >
                 CONNECTION METHOD
               </Dialog.Title>
-              <div className="flex justify-between w-full h-full pt-6 pb-4 divide-x">
+              <div className="flex h-full w-full justify-between divide-x pt-6 pb-4">
                 {children}
               </div>
             </div>

diff --git a/src/components/full-page-loading-spinner.tsx b/src/components/full-page-loading-spinner.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 export const FullPageLoadingSpinner = () => (
-  <div className="flex items-center justify-center min-w-full min-h-screen">
+  <div className="flex min-h-screen min-w-full items-center justify-center">
     <style jsx>
       {`
         /* KEYFRAMES */

diff --git a/src/components/icons/crypto-wallets.tsx b/src/components/icons/crypto-wallets.tsx
@@ -35,7 +35,7 @@ function WalletConnect() {
       height="185px"
       viewBox="0 0 300 185"
       version="1.1"
-      className="w-[4rem] h-[4rem] md:h-12 md:w-12"
+      className="h-[4rem] w-[4rem] md:h-12 md:w-12"
     >
       <defs></defs>
       <g id="Page-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
@@ -59,7 +59,8 @@ function Metamask() {
       x="0px"
       y="0px"
       viewBox="0 0 318.6 318.6"
-      className="h-[4rem] w-[4rem] md:h-12 md:w-12">
+      className="h-[4rem] w-[4rem] md:h-12 md:w-12"
+    >
       <style jsx>
         {`
           .st0 {
@@ -205,5 +206,5 @@ function Metamask() {
 }
 
 function Coinbase() {
-  return <img src="/assets/images/coinbase.png" className="w-12 h-12" alt="Coinbase" />;
+  return <img src="/assets/images/coinbase.png" className="h-12 w-12" alt="Coinbase" />;
 }
diff --git a/src/components/icons/ethereum.tsx b/src/components/icons/ethereum.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 
 export const EthereumIcon = () => (
   <svg
-    className="w-4 h-4 mr-2 -ml-1 text-[#626890]"
+    className="mr-2 -ml-1 h-4 w-4 text-[#626890]"
     aria-hidden="true"
     focusable="false"
     data-prefix="fab"

diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts
@@ -12,4 +12,4 @@ export * from './red-heart';
 export * from './transparent-heart';
 export * from './hashtag';
 export * from './copy-icon';
-export * from './search';
+export * from './search';
diff --git a/src/components/icons/loading-spinner.tsx b/src/components/icons/loading-spinner.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 export const LoadingSpinner = () => (
   <svg
     role="status"
-    className="w-4 text-gray-200 animate-spin dark:text-gray-600 fill-gray-200"
+    className="w-4 animate-spin fill-gray-200 text-gray-200 dark:text-gray-600"
     viewBox="0 0 100 101"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"

diff --git a/src/components/icons/magic.tsx b/src/components/icons/magic.tsx
@@ -5,7 +5,7 @@ export const MagicIcon = () => (
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 26 31"
     fill="none"
-    className="w-4 h-4 mr-2 -ml-1 text-[#626890]"
+    className="mr-2 -ml-1 h-4 w-4 text-[#626890]"
   >
     <path
       d="M12.8533 0C14.1947 1.64317 15.6741 3.16914 17.274 4.56019C16.2081 8.01821 15.6342 11.6921 15.6342 15.5C15.6342 19.308 16.2081 22.9818 17.274 26.4399C15.6742 27.8309 14.1947 29.3568 12.8533 31C11.5121 29.357 10.0328 27.8312 8.43313 26.4403C9.49916 22.9821 10.0731 19.3081 10.0731 15.5C10.0731 11.6919 9.49916 8.01785 8.43312 4.55968C10.0328 3.16877 11.5121 1.64297 12.8533 0Z"

diff --git a/src/components/icons/search.tsx b/src/components/icons/search.tsx
@@ -6,7 +6,8 @@ export const SearchIcon = () => (
     className="h-5 w-5"
     fill="none"
     viewBox="0 0 24 24"
-    stroke="currentColor">
+    stroke="currentColor"
+  >
     <path
       strokeLinecap="round"
       strokeLinejoin="round"

diff --git a/src/components/icons/twitter.tsx b/src/components/icons/twitter.tsx
@@ -14,7 +14,8 @@ export const Twitter = ({
     viewBox="0 0 55 55"
     width="20"
     height="20"
-    className={`text-gray-500 hover:text-blue-500 w-${w} h-${h} ${customStyle}`}>
+    className={`text-gray-500 hover:text-blue-500 w-${w} h-${h} ${customStyle}`}
+  >
     <path
       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"

diff --git a/src/components/layouts/footer.tsx b/src/components/layouts/footer.tsx
@@ -37,7 +37,8 @@ export function Footer() {
       className={clsx(
         `fixed bottom-0 left-0 m-0 box-border flex h-10 w-full items-center justify-center p-4 text-gray-700`,
         ` 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.url} target="_blank" rel="noopener noreferrer">

diff --git a/src/components/layouts/gallery.tsx b/src/components/layouts/gallery.tsx
@@ -17,8 +17,9 @@ export const Nft = ({
     href={`https://opensea.io/assets/${contract_address}/${token_id}`}
     target="_blank"
     rel="noreferrer"
-    className="group">
-    <div className="w-full overflow-hidden bg-transparent rounded-lg aspect-w-1 aspect-h-1 xl:aspect-w-7 xl:aspect-h-8">
+    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">
       {children}
     </div>
   </a>
@@ -29,15 +30,16 @@ export const Gallery = ({ nfts }: { nfts: NFT[] }) => {
   const count = nfts.length;
   return (
     <div className="bg-transparent">
-      <div className="max-w-2xl mx-auto lg:max-w-7xl">
+      <div className="mx-auto max-w-2xl lg:max-w-7xl">
         <h2 className="sr-only">NFTs</h2>
         <div
           id="nfts"
           className={clsx(
             `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;