chore(profile): redirect from /a/ to /p/ (#1796)

* chore(profile): profile from account * wip * fix(profile): connected addresses * chore(profile): default /p/ route * wip:comment * wip * fix(profile): getAccountFromAddress * feat(account): check accountURNs match * chore(account): accountURN validation in account trpc * fix(profile): veiw others profile when not logged-in
proofzero · Feb 28, 2023 · 576c23f · 576c23f
1 parent 331623d
commit 576c23f
Show file tree

Hide file tree

Showing 26 changed files with 1,088 additions and 2,172 deletions.
diff --git a/apps/profile/app/components/profile/links/links.tsx b/apps/profile/app/components/profile/links/links.tsx
@@ -39,35 +39,26 @@ export const Links = ({ links, isOwner = false, displayName }: LinksProps) => {
           providerIcon: imageFromAddressType(link.provider),
         }))
         .map((link, i: number) => (
-          <button
+          <a
             key={`${link.name}-${link.url}-${i}`}
-            className="
-          bg-gray-100 hover:bg-gray-200
-          transition-colors
-          rounded-full
-          justify-center
-          items-center
-          w-full
-          py-5"
+            href={link.url}
+            className="flex flex-row justify-center items-center space-x-2.5
+            bg-gray-100 hover:bg-gray-200 transition-colors
+            rounded-full justify-center items-center w-full py-5"
+            rel="noreferrer"
+            target="_blank"
           >
-            <a
-              href={link.url}
-              className="flex flex-row justify-center items-center space-x-2.5"
-              rel="noreferrer"
-              target="_blank"
-            >
-              {link.providerIcon && (
-                <img
-                  src={link.providerIcon}
-                  alt="Something went wrong..."
-                  className="w-5 h-5"
-                />
-              )}
-              <Text weight="medium" className="text-gray-600">
-                {link.name}
-              </Text>
-            </a>
-          </button>
+            {link.providerIcon && (
+              <img
+                src={link.providerIcon}
+                alt="Something went wrong..."
+                className="w-5 h-5"
+              />
+            )}
+            <Text weight="medium" className="text-gray-600">
+              {link.name}
+            </Text>
+          </a>
         ))}
     </div>
   )

diff --git a/apps/profile/app/helpers/nfts.ts b/apps/profile/app/helpers/nfts.ts
@@ -1,12 +1,10 @@
-import {
-  gatewayFromIpfs,
-  getAuthzHeaderConditionallyFromToken,
-} from '@kubelt/utils'
+import { gatewayFromIpfs } from '@kubelt/utils'
 import { getGalaxyClient } from './clients'
-import { getAccountProfile, getAddressProfile } from './profile'
+import { getAccountProfile } from './profile'
 
-import type { AddressURN } from '@kubelt/urns/address'
-import type { Nft } from '@kubelt/galaxy-client'
+import type { AccountURN } from '@kubelt/urns/account'
+import { AccountURNSpace } from '@kubelt/urns/account'
+import type { Gallery, Nft } from '@kubelt/galaxy-client'
 /**
  * Nfts are being sorted server-side
  * this function then allows to merge client Nfts with newly-fetched Nfts
@@ -131,19 +129,13 @@ export const decorateNfts = (ownedNfts: any) => {
 }
 
 /**
- * Returns own gallery if JWT is provided or
- * target address gallery for which only
+ * Returns target address gallery for which only
  * owner property is required.
- * @param owner AddressURN of target profile. Can be undefined if JWT is provided.
- * @param jwt JWT of requester
+ * @param owner AccountURN of target profile. Can be undefined if JWT is provided.
  * @returns Gallery or empty array
  */
-export const getGallery = async (owner: string, jwt?: string) => {
-  // TODO: get from account
-  const profile = jwt
-    ? await getAccountProfile(jwt)
-    : await getAddressProfile(owner as AddressURN)
-
+export const getGallery = async (accountURN: AccountURN) => {
+  const profile = await getAccountProfile({ accountURN })
   const { gallery } = profile
 
   return gallery || []
@@ -166,7 +158,7 @@ const getMoreNfts = (fetcher: any, request: string) => {
 }
 
 export const getMoreNftsGallery = (fetcher: any, accountURN: string) => {
-  const query = generateQuery([{ name: 'owner', value: accountURN }])
+  const query = generateQuery([{ name: 'accountURN', value: accountURN }])
   const request = `/nfts/gallery?${query}`
   getMoreNfts(fetcher, request)
 }
@@ -219,13 +211,17 @@ export const getMoreNftsAllCollections = (
 
 // ------ end of the VERY HIGHLY IMPURE FUNCTIONS TO FETCH NFTS
 
-export const getGalleryWithMetadata = async (owner: string, jwt?: string) => {
-  const gallery = await getGallery(owner, jwt)
+export const getGalleryWithMetadata = async (accountURN: AccountURN) => {
+  const gallery = await getGallery(accountURN)
 
   if (!gallery || !gallery.length) {
     return { gallery: [] }
   }
 
+  return await getGalleryMetadata(gallery)
+}
+
+export const getGalleryMetadata = async (gallery: Gallery[]) => {
   const galaxyClient = await getGalaxyClient()
 
   const { getNFTMetadataBatch: metadata } = await galaxyClient.getNFTMetadata(
@@ -238,18 +234,18 @@ export const getGalleryWithMetadata = async (owner: string, jwt?: string) => {
         })
       ),
     },
-    // Optional for when called by
-    // a non authenticated visitor
-    // of a public profile
-    getAuthzHeaderConditionallyFromToken(jwt)
+    /**
+     * Since gallery exists in public-only mode
+     * we do not need to specify JWT here
+     */
+    {}
   )
 
   const ownedNfts: decoratedNft[] | undefined = metadata?.ownedNfts.map(
     (nft) => {
       return decorateNft(nft as Nft)
     }
   )
-
   // Setup og tag data
   // check generate and return og image
 

diff --git a/apps/profile/app/helpers/profile.ts b/apps/profile/app/helpers/profile.ts
@@ -1,25 +1,32 @@
-import type { Profile, Link, Gallery, Node } from '@kubelt/galaxy-client'
 import { CryptoAddressType, OAuthAddressType } from '@kubelt/types/address'
 import type { AddressURN } from '@kubelt/urns/address'
 import { getAuthzHeaderConditionallyFromToken } from '@kubelt/utils'
 import { getGalaxyClient } from '~/helpers/clients'
 import { imageFromAddressType } from './icons'
-
-export const getAccountProfile = async (jwt: string) => {
+import type { FullProfile } from '~/types'
+import type { AccountURN } from '@kubelt/urns/account'
+
+export const getAccountProfile = async ({
+  jwt,
+  accountURN,
+}: {
+  jwt?: string
+  accountURN?: AccountURN
+}) => {
   const galaxyClient = await getGalaxyClient()
 
   const profileRes = await galaxyClient.getProfile(
-    undefined,
+    accountURN ? { targetAccountURN: accountURN } : undefined,
     getAuthzHeaderConditionallyFromToken(jwt)
   )
 
   const { profile, links, gallery, connectedAddresses } = profileRes
-  return { profile, links, gallery, connectedAddresses } as {
-    profile: Profile
-    links: Link[]
-    gallery: Gallery[]
-    connectedAddresses: Node[]
-  }
+  return {
+    ...profile,
+    links,
+    gallery,
+    addresses: connectedAddresses,
+  } as FullProfile
 }
 
 export const getAuthorizedApps = async (jwt: string) => {
@@ -40,26 +47,10 @@ export const getAccountAddresses = async (jwt: string) => {
     getAuthzHeaderConditionallyFromToken(jwt)
   )
 
-  const addresses = addressesRes.connectedAddresses
+  const addresses = addressesRes.addresses
   return addresses
 }
 
-export const getAddressProfile = async (addressURN: AddressURN) => {
-  const galaxyClient = await getGalaxyClient()
-  const addressProfile = await galaxyClient.getProfileFromAddress({
-    addressURN,
-  })
-
-  const profile = addressProfile
-
-  return {
-    ...profile.profile,
-    links: profile.links,
-    gallery: profile.gallery,
-    connectedAccounts: profile.connectedAddresses,
-  }
-}
-
 export const getAddressProfiles = async (
   jwt: string,
   addressURNList: AddressURN[]

diff --git a/apps/profile/app/root.tsx b/apps/profile/app/root.tsx
@@ -39,7 +39,7 @@ import HeadNav, { links as headNavLink } from '~/components/head-nav'
 
 import * as gtag from '~/utils/gtags.client'
 import { getProfileSession } from './utils/session.server'
-import { getRedirectUrlForProfile } from './utils/redirects.server'
+import { AccountURNSpace } from '@kubelt/urns/account'
 import { parseJwt } from './utils/session.server'
 import { getAccountProfile } from './helpers/profile'
 import type { AccountURN } from '@kubelt/urns/account'
@@ -91,19 +91,14 @@ export const loader: LoaderFunction = async ({ request }) => {
 
     accountURN = parseJwt(jwt).sub as AccountURN
 
-    const fetchedLoggedInProfile = await getAccountProfile(jwt)
+    const fetchedLoggedInProfile = await getAccountProfile({ jwt })
 
     if (!fetchedLoggedInProfile)
       throw new Error('Could not retrieve logged in use profile.')
 
-    loggedInUserProfile = {
-      ...fetchedLoggedInProfile.profile,
-      links: fetchedLoggedInProfile.links,
-      gallery: fetchedLoggedInProfile.gallery,
-      addresses: fetchedLoggedInProfile.connectedAddresses,
-    }
+    loggedInUserProfile = fetchedLoggedInProfile
 
-    basePath = getRedirectUrlForProfile(loggedInUserProfile)
+    basePath = `/p/${AccountURNSpace.decode(accountURN)}`
   }
 
   return json({

diff --git a/apps/profile/app/routes/$type.$address.tsx b/apps/profile/app/routes/$type.$address.tsx
@@ -19,7 +19,7 @@ import {
   HiOutlineQuestionMarkCircle,
 } from 'react-icons/hi'
 
-import { getProfileSession } from '~/utils/session.server'
+import { getProfileSession, parseJwt } from '~/utils/session.server'
 import { getGalaxyClient } from '~/helpers/clients'
 import { ogImageFromProfile } from '~/helpers/ogImage'
 
@@ -29,15 +29,13 @@ import {
   gatewayFromIpfs,
   getAuthzHeaderConditionallyFromToken,
 } from '@kubelt/utils'
-import type { AddressURN } from '@kubelt/urns/address'
 import { AddressURNSpace } from '@kubelt/urns/address'
 
 import { Cover } from '~/components/profile/cover/Cover'
 import ProfileTabs from '~/components/profile/tabs/tabs'
 import ProfileLayout from '~/components/profile/layout'
 
 import defaultOG from '~/assets/Rollup_profiles_OG.png'
-import { getRedirectUrlForProfile } from '~/utils/redirects.server'
 import {
   CryptoAddressType,
   NodeType,
@@ -57,27 +55,26 @@ export const loader: LoaderFunction = async ({ request, params }) => {
   const session = await getProfileSession(request)
   if (!address) throw new Error('No address provided in URL')
 
-  // redirect from accountURN to first addressURNs
-  if (type === 'p') {
-    const { addresses } = await galaxyClient.getConnectedAddressesFromAccount({
-      accountURN: AccountURNSpace.urn(address),
-    })
+  // redirect from any addressURN to its addressURNs
+  if (type === 'a') {
+    const { account }: { account: AccountURN } =
+      await galaxyClient.getAccountUrnFromAddress({
+        addressURN: AddressURNSpace.urn(address),
+      })
 
-    return redirect(
-      `/a/${AddressURNSpace.decode(addresses?.[0].baseUrn as AddressURN)}`
-    )
+    return redirect(`/p/${AccountURNSpace.decode(account)}`)
   }
 
-  const urn = AddressURNSpace.urn(address)
+  const accountURN = AccountURNSpace.urn(address) as AccountURN
 
   // if not handle is this let's assume this is an idref
   let profile, jwt
   try {
     const user = session.get('user')
     jwt = user?.accessToken
-    profile = await galaxyClient.getProfileFromAddress(
+    profile = await galaxyClient.getProfile(
       {
-        addressURN: urn,
+        targetAccountURN: accountURN,
       },
       getAuthzHeaderConditionallyFromToken(jwt)
     )
@@ -93,14 +90,7 @@ export const loader: LoaderFunction = async ({ request, params }) => {
       addresses: profile.connectedAddresses || [],
     }
 
-    if (type === 'a') {
-      const redirectUrl = getRedirectUrlForProfile(profile)
-      const originalRoute = `/${type}/${address}`
-      //Redirect if we've found a better route
-      if (redirectUrl && originalRoute !== redirectUrl)
-        return redirect(redirectUrl)
-      //otherwise stay on current route
-    } else if (type === 'u') {
+    if (type === 'u') {
       //TODO: galaxy search by handle
       console.error('Not implemented')
     } else {
@@ -115,7 +105,8 @@ export const loader: LoaderFunction = async ({ request, params }) => {
     const splittedUrl = request.url.split('/')
     const path = splittedUrl[splittedUrl.length - 1]
 
-    const matches = profile.addresses?.filter((addr) => urn === addr.baseUrn)
+    // Check if the accountURN in jwt matches with accountURN in URL
+    const isOwner = jwt ? parseJwt(jwt).sub === accountURN : false
 
     const cryptoAddresses = profile.addresses?.filter(
       (addr) => addr.rc.node_type === NodeType.Crypto
@@ -125,14 +116,14 @@ export const loader: LoaderFunction = async ({ request, params }) => {
       uname: profile.handle || address,
       ogImage: ogImage || defaultOG,
       profile,
-      addressURN: urn,
+      accountURN,
       cryptoAddresses,
       path,
-      isOwner: jwt && matches && matches.length > 0 ? true : false,
+      isOwner,
     })
   } catch (e) {
     console.log(
-      `Galaxy did not return a profile for address ${urn}. Moving on.`
+      `Galaxy did not return a profile for address ${accountURN}. Moving on.`
     )
     throw new Response('No address found', { status: 404 })
   }
@@ -173,13 +164,13 @@ export const meta: MetaFunction = ({
 const UserAddressLayout = () => {
   //TODO: this needs to be optimized so profile isn't fetched from the loader
   //but used from context alone.
-  const { profile, cryptoAddresses, path, isOwner, addressURN } =
+  const { profile, cryptoAddresses, path, isOwner, accountURN } =
     useLoaderData<{
       profile: FullProfile
       cryptoAddresses: Node[]
       path: string
       isOwner: boolean
-      addressURN: string
+      accountURN: string
     }>()
 
   const ctx = useOutletContext<{
@@ -188,7 +179,6 @@ const UserAddressLayout = () => {
     // from root.tsx
     // but if not logged in
     // is null...
-    accountURN: AccountURN
   }>()
 
   const finalProfile = profile ?? ctx.profile
@@ -305,10 +295,9 @@ const UserAddressLayout = () => {
     >
       <Outlet
         context={{
-          addressURN: addressURN,
+          accountURN,
           profile: finalProfile,
           cryptoAddresses,
-          path,
           isOwner,
         }}
       />