✨ User Page Bug Fixes + Makeover

.env.example

@@ -1,5 +1,8 @@
 # for delaware name check
 OPENCORPORATES_KEY=
+NEXT_PUBLIC_INFURA_ID=
+NEXT_PUBLIC_OPENAI_API_KEY=
+NEXT_PUBLIC_WC_ID=
 
 # for ipfs 
 PINATA_SECRET=

components.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "styles/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "~/components",
+    "utils": "~/utils"
+  }
+}

config/siteConfig.ts

@@ -6,4 +6,5 @@ export const siteConfig = {
     privacy: 'https://app.kali.gg/privacy',
     tos: 'https://app.kali.gg/tos',
   },
+  docsBaseUrl: 'https://docs.wrappr.wtf',
 }

next.config.js

@@ -1,54 +1,44 @@
 /** @type {import('next').NextConfig} */
-const { createVanillaExtractPlugin } = require('@vanilla-extract/next-plugin')
-const withVanillaExtract = createVanillaExtractPlugin({
-  identifiers: 'short',
-})
+const { withSentryConfig } = require("@sentry/nextjs");
 
 const nextConfig = {
   reactStrictMode: true,
   swcMinify: true,
   images: {
     domains: ['gateway.pinata.cloud', 'content.wrappr.wtf'],
   },
-}
-
-module.exports = withVanillaExtract(nextConfig)
-
+};
 
+const sentryWebpackPluginOptions = {
+  // Additional config options for the Sentry webpack plugin. Keep in mind that
+  // the following options are set automatically, and overriding them is not
+  // recommended:
+  //   release, url, configFile, stripPrefix, urlPrefix, include, ignore
 
-// Inected Content via Sentry Wizard Below
-
-const { withSentryConfig } = require("@sentry/nextjs");
+  org: "kalico",
+  project: "wrappr-ui",
+}
 
-module.exports = withSentryConfig(
-  module.exports,
-  {
-    // For all available options, see:
-    // https://github.com/getsentry/sentry-webpack-plugin#options
+// const sentryOptions = {
+//   // For all available options, see:
+//   // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
 
-    // Suppresses source map uploading logs during build
-    silent: true,
+//   // Upload a larger set of source maps for prettier stack traces (increases build time)
+//   widenClientFileUpload: true,
 
-    org: "kalico",
-    project: "wrappr-ui",
-  },
-  {
-    // For all available options, see:
-    // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
+//   // Transpiles SDK to be compatible with IE11 (increases bundle size)
+//   transpileClientSDK: true,
 
-    // Upload a larger set of source maps for prettier stack traces (increases build time)
-    widenClientFileUpload: true,
+//   // Routes browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers (increases server load)
+//   tunnelRoute: "/monitoring",
 
-    // Transpiles SDK to be compatible with IE11 (increases bundle size)
-    transpileClientSDK: true,
+//   // Hides source maps from generated client bundles
+//   hideSourceMaps: true,
 
-    // Routes browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers (increases server load)
-    tunnelRoute: "/monitoring",
+//   // Automatically tree-shake Sentry logger statements to reduce bundle size
+//   disableLogger: true,
+// }
 
-    // Hides source maps from generated client bundles
-    hideSourceMaps: true,
+// Make sure adding Sentry options is the last code to run before exporting
+module.exports = withSentryConfig(nextConfig, sentryWebpackPluginOptions);
 
-    // Automatically tree-shake Sentry logger statements to reduce bundle size
-    disableLogger: true,
-  }
-);

package.json

@@ -11,57 +11,74 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@fontsource/alegreya-sans": "^4.5.9",
-    "@gnosis.pm/safe-apps-wagmi": "^1.0.3",
-    "@hookform/resolvers": "^2.9.6",
-    "@kalidao/reality": "0.0.12",
+    "@fontsource/alegreya-sans": "^4.5.11",
+    "@gnosis.pm/safe-apps-wagmi": "^2.1.0",
+    "@hookform/resolvers": "^2.9.11",
     "@microsoft/fetch-event-source": "^2.0.1",
-    "@pinata/sdk": "^1.1.26",
-    "@rainbow-me/rainbowkit": "0.6.2",
-    "@sentry/nextjs": "^7.50.0",
-    "@tanstack/react-query": "^4.0.10",
-    "@tanstack/react-query-devtools": "^4.0.10",
-    "@typeform/embed-react": "^1.19.0",
-    "@vanilla-extract/css": "^1.9.2",
-    "axios": "^1.2.0",
-    "ethers": "^5.7.1",
+    "@phosphor-icons/react": "^2.0.13",
+    "@pinata/sdk": "^1.2.1",
+    "@radix-ui/react-aspect-ratio": "^1.0.3",
+    "@radix-ui/react-avatar": "^1.0.4",
+    "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-select": "^2.0.0",
+    "@radix-ui/react-separator": "^1.0.3",
+    "@radix-ui/react-slot": "^1.0.2",
+    "@rainbow-me/rainbowkit": "1.0.11",
+    "@sentry/nextjs": "^7.73.0",
+    "@tanstack/react-query": "^4.35.7",
+    "@tanstack/react-query-devtools": "^4.35.7",
+    "@typeform/embed-react": "^1.21.0",
+    "axios": "^1.5.1",
+    "blo": "^1.1.1",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.0.0",
+    "date-fns": "^2.30.0",
     "framer-motion": "^6.5.1",
-    "graphql": "^16.6.0",
+    "graphql": "^16.8.1",
     "graphql-request": "^4.3.0",
     "lodash.merge": "^4.6.2",
-    "next": "12.2.3",
+    "next": "13.5.4",
+    "next-themes": "^0.2.1",
     "nookies": "^2.5.2",
-    "openai": "^3.2.0",
+    "openai": "^3.3.0",
     "openai-edge": "^0.5.1",
     "pdf-lib": "^1.17.1",
     "react": "18.2.0",
+    "react-day-picker": "^8.8.2",
     "react-dom": "18.2.0",
-    "react-dropzone": "^14.2.2",
-    "react-hook-form": "^7.33.1",
-    "react-icons": "^4.4.0",
-    "react-parallax-tilt": "^1.7.63",
-    "react-tsparticles": "^2.2.3",
-    "tsparticles": "^2.2.3",
-    "wagmi": "^0.6.0",
-    "zod": "^3.17.10",
-    "zustand": "^4.1.5"
+    "react-dropzone": "^14.2.3",
+    "react-hook-form": "^7.47.0",
+    "react-icons": "^4.11.0",
+    "react-parallax-tilt": "^1.7.169",
+    "react-tsparticles": "^2.12.2",
+    "sonner": "^1.0.3",
+    "tailwind-merge": "^1.14.0",
+    "tailwindcss-animate": "^1.0.7",
+    "tsparticles": "^2.12.0",
+    "viem": "^1.15.0",
+    "wagmi": "^1.4.3",
+    "zod": "^3.22.2",
+    "zustand": "^4.4.2"
   },
   "devDependencies": {
-    "@types/formidable": "^2.0.5",
+    "@types/formidable": "^2.0.6",
     "@types/lodash.merge": "^4.6.7",
-    "@types/node": "18.0.6",
-    "@types/react": "18.0.15",
-    "@types/react-dom": "18.0.6",
-    "@vanilla-extract/css": "^1.9.2",
-    "@vanilla-extract/next-plugin": "^2.1.1",
-    "autoprefixer": "^10.4.8",
+    "@types/node": "20.8.2",
+    "@types/react": "18.2.24",
+    "@types/react-dom": "18.2.8",
+    "autoprefixer": "^10.4.16",
     "eslint": "8.20.0",
     "eslint-config-next": "12.2.3",
     "form-data": "^4.0.0",
-    "formidable": "^2.0.1",
-    "husky": "^8.0.0",
-    "node-fetch": "^3.2.10",
-    "prettier": "^2.7.1",
-    "typescript": "4.7.4"
+    "formidable": "^2.1.2",
+    "husky": "^8.0.3",
+    "node-fetch": "^3.3.2",
+    "postcss": "^8.4.31",
+    "prettier": "^3.0.3",
+    "tailwindcss": "^3.3.3",
+    "typescript": "5.2.2"
   }
 }

pages/[chainId]/[wrappr]/[tokenId].tsx

@@ -1,20 +1,19 @@
 import type { NextPage } from 'next'
 import Link from 'next/link'
-import Image from 'next/image'
 import Layout from '~/layout'
-import { Box, Stack, Spinner, Text, Divider, Skeleton, Avatar, Heading } from '@kalidao/reality'
 import { useQuery } from '@tanstack/react-query'
 import { MintWrappr, Trait, TraitType } from '~/wrap'
 import { useContractReads } from 'wagmi'
 import { useRouter } from 'next/router'
 import { deployments, WRAPPR } from '~/constants'
-import { ethers } from 'ethers'
+import { zeroAddress } from 'viem'
+import { Spinner } from '~/components/ui/spinner'
 
 const Wrappr: NextPage = () => {
   const router = useRouter()
   const { wrappr, chainId, tokenId } = router.query
   const wrapprContract = {
-    addressOrName: wrappr ? wrappr.toString() : ethers.constants.AddressZero,
+    addressOrName: wrappr ? wrappr.toString() : zeroAddress,
     contractInterface: WRAPPR,
   }
   const collectionId = wrappr?.toString().toLowerCase() + '0x' + Number(tokenId)?.toString(16)
@@ -64,94 +63,72 @@ const Wrappr: NextPage = () => {
   if (chainId && chainId != '35443' && deployments[Number(chainId)]['subgraph'] === undefined) {
     return (
       <Layout heading="Wrappr" content="Wrap now" back={() => router.push('/')}>
-        <Box display={'flex'} alignItems="center" justifyContent={'center'}>
-          <Text>This chain is not yet supported. Please switch to a supported chain.</Text>
-        </Box>
+        <div className="flex items-center justify-center">
+          <p>This chain is not yet supported. Please switch to a supported chain.</p>
+        </div>
       </Layout>
     )
   }
 
   // TODO: Add Back
   return (
     <Layout heading="Wrappr" content="Wrap now" back={() => router.push(`/${chainId}/${wrappr}`)}>
-      <Box padding="6">
-        <Stack
-          direction={{
-            xs: 'vertical',
-            md: 'horizontal',
-          }}
-        >
-          <Stack>
-            {data ? (
-              <Avatar src={uri?.['image']} size="96" shape="square" label={`Image for ${uri?.['name']}`} />
-            ) : qUri ? (
-              <Avatar src={qUri?.['image']} size="96" shape="square" label={`Image for ${uri?.['name']}`} />
-            ) : (
-              'No image found'
-            )}
+      <div className="p-6 flex flex-col md:flex-row">
+        <div>
+          {/* {data ? (
+            <Avatar src={uri?.['image']} size="96" shape="square" label={`Image for ${uri?.['name']}`} />
+          ) : qUri ? (
+            <Avatar src={qUri?.['image']} size="96" shape="square" label={`Image for ${uri?.['name']}`} />
+          ) : (
+            'No image found'
+          )} */}
 
-            <MintWrappr
-              chainId={4}
-              wrappr={wrappr ? wrappr.toString() : ethers.constants.AddressZero}
-              tokenId={Number(tokenId)}
-            />
-            <Link href="/clinic" passHref>
-              <a>Need help with your entity?</a>
+          <MintWrappr chainId={4} wrappr={wrappr ? wrappr.toString() : zeroAddress} tokenId={Number(tokenId)} />
+          <Link href="/clinic" passHref>
+            Need help with your entity?
+          </Link>
+          {(uri?.attributes[1].value == 'LLC' || uri?.attributes[1].value == 'UNA') && (
+            <Link href={`/${chainId}/${wrappr}/${tokenId}/ein`} passHref>
+              Apply for EIN
             </Link>
-            {(uri?.attributes[1].value == 'LLC' || uri?.attributes[1].value == 'UNA') && (
-              <Link href={`/${chainId}/${wrappr}/${tokenId}/ein`} passHref>
-                <a>Apply for EIN</a>
-              </Link>
+          )}
+        </div>
+        <div className="w-full">
+          <div>
+            <p>{qIsLoadingURI ? <Spinner /> : qUri ? qUri?.['name'] : 'No name found'}</p>
+            {qUri ? (
+              <p>{qUri?.['description']}</p>
+            ) : (
+              <p>{isLoading ? <Spinner /> : uri ? uri?.['description'] : 'No name found'}</p>
             )}
-          </Stack>
-          <Box width="full">
-            <Stack>
-              <Heading>{qIsLoadingURI ? <Spinner /> : qUri ? qUri?.['name'] : 'No name found'}</Heading>
-              {/* <Heading>
-                {isLoading ? <Spinner /> : uri ? uri?.['name'] : qUri ? qUri?.['name'] : 'No name found'}
-              </Heading> */}
-              {/* {qUri ? (
-                <Heading>{qUri?.['name']}</Heading>
-              ) : (
-                <Heading>{isLoading ? <Spinner /> : uri ? uri?.['name'] : 'No name found'}</Heading>
-              )} */}
-              {/* <Text as="p">
-                {isLoading ? <Spinner /> : uri ? uri?.['description'] : qUri ? qUri?.['description'] : 'No name found'}
-              </Text> */}
-              {qUri ? (
-                <Text as="p">{qUri?.['description']}</Text>
-              ) : (
-                <Text as="p">{isLoading ? <Spinner /> : uri ? uri?.['description'] : 'No name found'}</Text>
-              )}
-              <Heading>Traits</Heading>
-              <Stack>
-                {uri
-                  ? uri?.['attributes']?.map((trait: TraitType, index: number) => (
-                      <Trait key={index} trait_type={trait['trait_type']} value={trait['value']} isBig={false} />
-                    ))
-                  : qUri
-                  ? qUri?.['attributes']?.map((trait: TraitType, index: number) => (
-                      <Trait key={index} trait_type={trait['trait_type']} value={trait['value']} isBig={false} />
-                    ))
-                  : null}
-              </Stack>
-              <Stack>
-                <Trait
-                  trait_type={'Permissioned'}
-                  value={data?.['permissioned'] === null ? 'No' : data?.permissioned === true ? 'Yes' : 'No'}
-                  isBig={false}
-                />
-                <Trait
-                  trait_type={'Transferable'}
-                  value={data?.['transferability'] === null ? 'No' : data?.transferability === true ? 'Yes' : 'No'}
-                  isBig={false}
-                />
-                <Trait trait_type={'Owner'} value={data?.['owner'] || qOwner} isBig={false} />
-              </Stack>
-            </Stack>
-          </Box>
-        </Stack>
-      </Box>
+            <h2>Traits</h2>
+            <div>
+              {uri
+                ? uri?.['attributes']?.map((trait: TraitType, index: number) => (
+                    <Trait key={index} trait_type={trait['trait_type']} value={trait['value']} isBig={false} />
+                  ))
+                : qUri
+                ? qUri?.['attributes']?.map((trait: TraitType, index: number) => (
+                    <Trait key={index} trait_type={trait['trait_type']} value={trait['value']} isBig={false} />
+                  ))
+                : null}
+            </div>
+            <div>
+              <Trait
+                trait_type={'Permissioned'}
+                value={data?.['permissioned'] === null ? 'No' : data?.permissioned === true ? 'Yes' : 'No'}
+                isBig={false}
+              />
+              <Trait
+                trait_type={'Transferable'}
+                value={data?.['transferability'] === null ? 'No' : data?.transferability === true ? 'Yes' : 'No'}
+                isBig={false}
+              />
+              <Trait trait_type={'Owner'} value={data?.['owner'] || qOwner} isBig={false} />
+            </div>
+          </div>
+        </div>
+      </div>
     </Layout>
   )
 }