Replace cardinal with civic

components/App.tsx

@@ -1,5 +1,4 @@
 import { ThemeProvider } from 'next-themes'
-import { WalletIdentityProvider } from '@cardinal/namespaces-components'
 import dynamic from 'next/dynamic'
 import React, { useEffect, useMemo } from 'react'
 import Head from 'next/head'
@@ -274,15 +273,13 @@ export function AppContents(props: Props) {
       <GoogleTag />
       <ErrorBoundary>
         <ThemeProvider defaultTheme="Dark">
-          <WalletIdentityProvider appName={'Realms'}>
-            <GatewayProvider>
-              <NavBar />
-              <Notifications />
-              <TransactionLoader></TransactionLoader>
-              <NftVotingCountingModal />
-              <PageBodyContainer>{props.children}</PageBodyContainer>
-            </GatewayProvider>
-          </WalletIdentityProvider>
+          <GatewayProvider>
+            <NavBar />
+            <Notifications />
+            <TransactionLoader></TransactionLoader>
+            <NftVotingCountingModal />
+            <PageBodyContainer>{props.children}</PageBodyContainer>
+          </GatewayProvider>
         </ThemeProvider>
       </ErrorBoundary>
     </div>

components/ConnectWalletButton.tsx

@@ -1,8 +1,6 @@
 import { useRouter } from 'next/router'
-import { AddressImage, DisplayAddress } from '@cardinal/namespaces-components'
 import styled from '@emotion/styled'
 import { Menu } from '@headlessui/react'
-import { UserCircleIcon } from '@heroicons/react/outline'
 import {
   BackspaceIcon,
   CheckCircleIcon,
@@ -12,14 +10,14 @@ import { abbreviateAddress } from '@utils/formatting'
 import { useCallback, useEffect, useState } from 'react'
 import Switch from './Switch'
 import { notify } from '@utils/notifications'
-import { Profile } from '@components/Profile'
+import {Profile, ProfileImage} from '@components/Profile'
 import Loading from './Loading'
 import { WalletName, WalletReadyState } from '@solana/wallet-adapter-base'
 import { useWallet } from '@solana/wallet-adapter-react'
 import { ExternalLinkIcon } from '@heroicons/react/outline'
-import useLegacyConnectionContext from '@hooks/useLegacyConnectionContext'
 import { DEFAULT_PROVIDER } from '../utils/wallet-adapters'
 import useViewAsWallet from '@hooks/useViewAsWallet'
+import { ProfileName } from "@components/Profile/ProfileName";
 
 const StyledWalletProviderLabel = styled.p`
   font-size: 0.65rem;
@@ -40,7 +38,6 @@ const ConnectWalletButton = (props) => {
     publicKey: realPublicKey,
     connected,
   } = useWallet()
-  const connection = useLegacyConnectionContext()
 
   const publicKey = debugAdapter?.publicKey ?? realPublicKey
 
@@ -112,18 +109,7 @@ const ConnectWalletButton = (props) => {
           ) : null}
           {connected && publicKey ? (
             <div className="hidden w-12 pr-2 sm:block">
-              <AddressImage
-                dark={true}
-                connection={connection.current}
-                address={publicKey}
-                height="40px"
-                width="40px"
-                placeholder={
-                  <div className="flex items-center justify-center flex-shrink-0 w-10 h-10 mr-2 rounded-full bg-bkg-4">
-                    <UserCircleIcon className="h-9 text-fgd-3 w-9" />
-                  </div>
-                }
-              />{' '}
+              <ProfileImage publicKey={publicKey} expanded={false} className="h-9 text-fgd-3 w-9" />
             </div>
           ) : (
             <div className="hidden pl-2 pr-2 sm:block">
@@ -134,13 +120,12 @@ const ConnectWalletButton = (props) => {
             {connected && publicKey ? (
               <>
                 {connected && publicKey ? (
-                  <DisplayAddress
-                    connection={connection.current}
-                    address={publicKey!}
-                    width="100px"
-                    height="20px"
-                    dark={true}
-                  />
+                    <ProfileName
+                        publicKey={publicKey}
+                        width="100px"
+                        height="20px"
+                        dark={true}
+                    />
                 ) : null}
                 <StyledWalletProviderLabel className="font-normal text-fgd-3">
                   {walletAddressFormatted}

components/DelegateCard.tsx

@@ -12,7 +12,6 @@ import { CashIcon, CreditCardIcon } from '@heroicons/react/solid'
 import Button from './Button'
 import Checkbox from '@components/inputs/Checkbox'
 import Divider from './Divider'
-import { DisplayAddress } from '@cardinal/namespaces-components'
 import { tryParseKey } from 'tools/validators/pubkey'
 import { XCircleIcon } from '@heroicons/react/outline'
 import Tooltip from './Tooltip'
@@ -24,6 +23,7 @@ import {
 import { useRealmQuery } from '@hooks/queries/realm'
 import { useConnection } from '@solana/wallet-adapter-react'
 import { fetchProgramVersion } from '@hooks/queries/useProgramVersionQuery'
+import { ProfileName } from "@components/Profile";
 
 const DelegateCard = () => {
   const ownTokenRecord = useUserCommunityTokenOwnerRecord().data?.result
@@ -161,12 +161,11 @@ const DelegateCard = () => {
               </div>
               {ownCouncilTokenRecord?.account.governanceDelegate && (
                 <div className="flex items-center content-center">
-                  <DisplayAddress
-                    connection={connection}
-                    address={ownCouncilTokenRecord?.account.governanceDelegate}
-                    height="12px"
-                    width="100px"
-                    dark={true}
+                  <ProfileName
+                      publicKey={ownCouncilTokenRecord?.account.governanceDelegate}
+                      height="12px"
+                      width="100px"
+                      dark={true}
                   />
                   <Tooltip content={'Remove Delegate'}>
                     <XCircleIcon
@@ -186,9 +185,8 @@ const DelegateCard = () => {
 
               {ownTokenRecord?.account.governanceDelegate && (
                 <div className="flex items-center content-center">
-                  <DisplayAddress
-                    connection={connection}
-                    address={ownTokenRecord?.account.governanceDelegate}
+                  <ProfileName
+                    publicKey={ownTokenRecord?.account.governanceDelegate}
                     height="12px"
                     width="100px"
                     dark={true}

components/Members/MemberOverview.tsx

@@ -1,4 +1,3 @@
-import { DisplayAddress } from '@cardinal/namespaces-components'
 import { getExplorerUrl } from '@components/explorer/tools'
 import {
   ChatAltIcon,
@@ -54,6 +53,7 @@ import {
 } from '@hooks/queries/digitalAssets'
 import { useNftRegistrarCollection } from '@hooks/useNftRegistrarCollection'
 import { NFT_PLUGINS_PKS } from '@constants/plugins'
+import {ProfileName} from "@components/Profile/ProfileName";
 
 const RevokeMembership: FC<{ member: PublicKey; mint: PublicKey }> = ({
   member,
@@ -401,9 +401,8 @@ const MemberOverview = ({
     <>
       <div className="flex items-center justify-between mb-2 py-2">
         <h2 className="mb-0">
-          <DisplayAddress
-            connection={connection.current}
-            address={walletPublicKey}
+          <ProfileName
+            publicKey={walletPublicKey}
             height="12px"
             width="100px"
             dark={true}

components/Members/MembersTabs.tsx

@@ -1,19 +1,19 @@
 import { FunctionComponent, useMemo } from 'react'
-import { LogoutIcon, UserCircleIcon } from '@heroicons/react/outline'
+import { LogoutIcon } from '@heroicons/react/outline'
 import tokenPriceService from '@utils/services/tokenPrice'
 import { fmtMintAmount } from '@tools/sdk/units'
 import { PublicKey } from '@solana/web3.js'
-import { AddressImage, DisplayAddress } from '@cardinal/namespaces-components'
 import { Member } from '@utils/uiTypes/members'
 import { MintInfo } from '@solana/spl-token'
 import { useRealmQuery } from '@hooks/queries/realm'
 import {
   useRealmCommunityMintInfoQuery,
   useRealmCouncilMintInfoQuery,
 } from '@hooks/queries/mintInfo'
-import useLegacyConnectionContext from '@hooks/useLegacyConnectionContext'
 import { useRealmConfigQuery } from '@hooks/queries/realmConfig'
 import { NFT_PLUGINS_PKS } from '@constants/plugins'
+import {ProfileName} from "@components/Profile/ProfileName";
+import {ProfileImage} from "@components/Profile";
 
 interface MembersTabsProps {
   activeTab: Member
@@ -109,13 +109,11 @@ const MemberItems = ({
     councilVotes && !councilVotes.isZero()
       ? fmtMintAmount(councilMint, councilVotes)
       : null
-  const connection = useLegacyConnectionContext()
 
   const renderAddressName = useMemo(() => {
     return (
-      <DisplayAddress
-        connection={connection.current}
-        address={new PublicKey(walletAddress)}
+      <ProfileName
+        publicKey={new PublicKey(walletAddress)}
         height="12px"
         width="100px"
         dark={true}
@@ -125,14 +123,7 @@ const MemberItems = ({
   }, [walletAddress])
   const renderAddressImage = useMemo(
     () => (
-      <AddressImage
-        dark={true}
-        connection={connection.current}
-        address={new PublicKey(walletAddress)}
-        height="32px"
-        width="32px"
-        placeholder={<UserCircleIcon className="w-6 h-6 text-fgd-3" />}
-      />
+        <ProfileImage publicKey={new PublicKey(walletAddress)} expanded={false} className="w-6 h-6 text-fgd-3" />
     ),
     // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO please fix, it can cause difficult bugs. You might wanna check out https://bobbyhadz.com/blog/react-hooks-exhaustive-deps for info. -@asktree
     [walletAddress]

components/Profile/ProfileImage.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react'
-import { useProfile } from '@components/Profile'
+import { useProfile } from '@components/Profile/useProfile'
 import ImgWithLoader from '@components/ImgWithLoader'
 import { PublicKey } from '@solana/web3.js'
 import { LoadingDots } from '@components/Loading'
@@ -25,14 +25,30 @@ export const ProfileImage: FC<Props> = ({ publicKey, expanded, className }) => {
   if (!profile && loading) return <LoadingDots />
 
   // No civic profile - show placeholder
-  if (!profile || !profile.image) return <UserCircleIcon className={classes} />
+  if (!profile || !profile.image) {
+    return<a
+        className="underline"
+        target="_blank"
+        href={'https://civic.me/' + publicKey?.toString()}
+        rel="noreferrer"
+    >
+      <UserCircleIcon className={classes}/>
+    </a>
+  }
 
   // Show civic profile image with loader as image loads
   return (
-    <ImgWithLoader
-      src={profile.image.url}
-      className={classes}
-      alt="Profile pic"
-    />
+      <a
+          className="underline"
+          target="_blank"
+          href={'https://civic.me/' + publicKey?.toString()}
+          rel="noreferrer"
+      >
+        <ImgWithLoader
+            src={profile.image.url}
+            className={classes}
+            alt="Profile pic"
+        />
+      </a>
   )
 }

components/Profile/ProfileName.tsx

@@ -0,0 +1,40 @@
+import React, { FC } from 'react'
+import { useProfile } from '@components/Profile/useProfile';
+import { PublicKey } from '@solana/web3.js';
+import ContentLoader from "react-content-loader";
+import {ShortAddress} from "@components/Profile/ShortAddress";
+
+type Props = { publicKey?: PublicKey, height?: string;
+  width?: string;
+  dark?: boolean;
+  style?: React.CSSProperties; }
+export const ProfileName: FC<Props> = ({ publicKey, height = "13",
+                                         width = "300",
+                                         dark = false,
+                                         style, }) => {
+  const { profile, loading } = useProfile(publicKey)
+
+
+  if (!publicKey) return <></>;
+  return loading ? (
+      <div
+          style={{
+            ...style,
+            height,
+            width,
+            overflow: "hidden",
+          }}
+      >
+        <ContentLoader
+            backgroundColor={dark ? "#333" : undefined}
+            foregroundColor={dark ? "#555" : undefined}
+        >
+          <rect style={{ ...style }} x={0} y={0} width={width} height={height} />
+        </ContentLoader>
+      </div>
+  ) : (
+      <div style={{ display: "flex", gap: "5px", ...style }}>
+        {profile?.name?.value || <ShortAddress address={publicKey} />}
+      </div>
+  );
+}

components/Profile/ShortAddress.tsx

@@ -0,0 +1,16 @@
+import {PublicKey} from "@solana/web3.js";
+import React, {FC} from "react";
+import {shortenAddress} from "@utils/address";
+
+export const ShortAddress:FC<{address: PublicKey | undefined }> = ({address}) => {
+    if (!address) return <></>;
+    return (
+        <a
+            href={`https://explorer.solana.com/address/${address.toString()}`}
+            target="_blank"
+            rel="noopener noreferrer"
+        >
+            {shortenAddress(address.toString())}
+        </a>
+    );
+};

components/Profile/index.ts

@@ -1,4 +1,5 @@
 export { Profile } from './Profile'
 export { ProfilePopup } from './ProfilePopup'
 export { ProfileImage } from './ProfileImage'
+export { ProfileName } from './ProfileName'
 export { useProfile } from './useProfile'

components/Profile/useProfile.ts

@@ -8,15 +8,24 @@ type Profile = BaseProfile & {
   exists: boolean
 }
 
+const profiles = new Map<string, Promise<BaseProfile>>()
+
 const getProfile = async (
   publicKey: PublicKey,
   connection?: Connection
-): Promise<BaseProfile> =>
-  CivicProfile.get(publicKey.toBase58(), {
-    solana: {
-      connection,
-    },
-  })
+): Promise<BaseProfile> => {
+    const cached = profiles.get(publicKey.toBase58());
+    if (cached) return cached;
+    const promise = CivicProfile.get(publicKey.toBase58(), {
+        solana: {
+            connection,
+        },
+    });
+
+    profiles.set(publicKey.toBase58(), promise)
+
+    return promise;
+}
 
 const profileIsSet = (profile: BaseProfile): boolean =>
   !!profile.name || !!profile.image || !!profile.headline