fix: handle image link on shared presentations (#595)

Signed-off-by: Urban Vidovič <urbanfoundit@gmail.com>

packages/dapp/src/app/[locale]/app/(public)/share-presentation/[id]/CredentialPanel.tsx

@@ -16,6 +16,7 @@ import { DIDDisplay } from '@/components/DIDDisplay';
 import JsonModal from '@/components/JsonModal';
 import { getFirstWord } from '@/utils/format';
 import { convertTypes, copyToClipboard } from '@/utils/string';
+import { ImageLink } from '@/components/ImageLink';
 
 interface FormattedPanelProps {
   credential: VerifiableCredential;
@@ -93,11 +94,11 @@ const CredentialSubject = ({
             }
 
             if (key === 'address') return <AddressDisplay address={value} />;
+            if (key === 'image') return <ImageLink value={value} />;
 
             const isObject = !(
               typeof value === 'string' || typeof value === 'number'
             );
-            // key is a string camel case, seperate it with spaces, e.g. CamelCase should be Camel Case
             key = key.replace(/([A-Z])/g, ' $1').trim();
             return (
               <div

packages/dapp/src/components/ImageLink/index.tsx

@@ -10,9 +10,9 @@ export const ImageLink = ({ value }: { value: string }) => {
       </h2>
       <div className="flex flex-row">
         <a
-          href={`${process.env.NEXT_PUBLIC_IPFS_GATEWAY}/ipfs/${value
-            .toString()
-            .slice('ipfs://'.length)}`}
+          href={`${
+            process.env.NEXT_PUBLIC_IPFS_GATEWAY || 'https://ipfs.io'
+          }/ipfs/${value.toString().slice('ipfs://'.length)}`}
           target="_blank"
           rel="noopener noreferrer"
           className="text-md animated-transition dark:text-navy-blue-300 cursor-pointer font-normal text-gray-700 underline underline-offset-2"