feat: add heading and cta to stamp sidebar

fixes: passportxyz#816

Co-authored-by: Lucian <[email protected]>

.gitignore

@@ -1,6 +1,7 @@
 node_modules
 .env
 .nvmrc
+.yarnrc
 
 # Logs
 logs
@@ -12,6 +13,7 @@ pnpm-debug.log*
 lerna-debug.log*
 
 # Editor directories and files
+.yarn/*
 .vscode/*
 !.vscode/extensions.json
 .idea

app/components/GenericBanner.tsx

@@ -1,24 +1,24 @@
-export function GenericBanner({ content }: { content: string }) {
+import { PlatformBanner } from "@gitcoin/passport-platforms/dist/commonjs/utils/platform";
+
+export function GenericBanner({ banner }: { banner: PlatformBanner }) {
   return (
     <div className="p-4">
       <div className="mt-10 rounded-lg border border-purple-infoElementBorder bg-purple-infoElementBG px-4 py-6">
-        <div className="flex flex-row items-center">
-          <h2 className="text-md mb-0 text-left font-bold text-gray-900">{content}</h2>
-        </div>
-
-        {/* <div className="mt-4 flex-grow">
-          <p className="text-left text-base leading-relaxed">{content.title}</p>
-          <div className="border-divider mt-3 border-t">
+        <div className="font-libre-franklin">
+          <h2 className="text-md mb-0 text-left font-bold text-gray-900">{banner.heading}</h2>
+          <h2 className="text-md mb-2 text-left text-gray-900">{banner.content}</h2>
+          <hr />
+          {banner.cta && (
             <a
+              href={banner.cta.url}
+              className="mx-auto mt-2 flex justify-center text-purple-gitcoinpurple"
               target="_blank"
               rel="noopener noreferrer"
-              href={content.href}
-              className="mx-auto mt-3 flex justify-center text-indigo-500"
             >
-              {content.link}
+              {banner.cta.label}
             </a>
-          </div>
-        </div> */}
+          )}
+        </div>
       </div>
     </div>
   );

app/components/GenericPlatform.tsx

@@ -389,7 +389,7 @@ export const GenericPlatform = ({ platFormGroupSpec, platform }: PlatformProps):
         selectedProviders={selectedProviders}
         setSelectedProviders={setSelectedProviders}
         isLoading={isLoading}
-        infoElement={platform.bannerContent ? <GenericBanner content={platform.bannerContent} /> : undefined}
+        infoElement={platform.banner ? <GenericBanner banner={platform.banner} /> : undefined}
         verifyButton={
           <>
             <button

platforms/src/Ens/App-Bindings.ts

@@ -8,8 +8,10 @@ export class EnsPlatform extends Platform {
   redirectUri: string = null;
   isEVM = true;
 
-  bannerContent =
-    "The ENS stamp only recognizes ENS domains if they are set to your account as primary ENS (or reverse record).";
+  banner = {
+    heading:
+      "The ENS stamp only recognizes ENS domains if they are set to your account as primary ENS (or reverse record).",
+  };
 
   async getProviderPayload(appContext: AppContext): Promise<ProviderPayload> {
     const result = await Promise.resolve({});

platforms/src/Gitcoin/App-Bindings.ts

@@ -6,7 +6,10 @@ export class GitcoinPlatform extends Platform {
   path = "github";
   clientId: string = null;
   redirectUri: string = null;
-  bannerContent = "The Gitcoin Grant stamp only recognizes contributions made during Gitcoin Grants rounds 1-15.";
+
+  banner = {
+    heading: "The Gitcoin Grant stamp only recognizes contributions made during Gitcoin Grants rounds 1-15.",
+  };
 
   constructor(options: PlatformOptions = {}) {
     super();

platforms/src/GnosisSafe/App-Bindings.ts

@@ -6,8 +6,10 @@ export class GnosisSafePlatform extends Platform {
   path = "GnosisSafe";
   isEVM = true;
 
-  bannerContent =
-    "Currently, we only recognize Gnosis Safes on the Ethereum main network. So you can't get that stamp through your Gnosis Safes on other networks.";
+  banner = {
+    heading:
+      "Currently, we only recognize Gnosis Safes on the Ethereum main network. So you can't get that stamp through your Gnosis Safes on other networks.",
+  };
 
   async getProviderPayload(appContext: AppContext): Promise<ProviderPayload> {
     const result = await Promise.resolve({});

platforms/src/GtcStaking/App-Bindings.ts

@@ -7,7 +7,14 @@ export class GTCStakingPlatform implements Platform {
   clientId: string = null;
   redirectUri: string = null;
 
-  bannerContent = "The GTC Staking stamp is only claimable during Gitcoin Grants rounds.";
+  banner = {
+    heading: "Stake your GTC on the new Identity Staking site.",
+    content: "Defend against sybil by staking on your own identity or somebody else's. By staking, the profile of stamps in the Passport becomes more unique.",
+    cta: {
+      label: "Go to Identity Staking",
+      url: "https://www.staking.passport.gitcoin.co/"
+    }
+  }
 
   async getProviderPayload(appContext: AppContext): Promise<ProviderPayload> {
     return {};

platforms/src/NFT/App-Bindings.ts

@@ -6,8 +6,10 @@ export class NFTPlatform extends Platform {
   path = "NFT";
   isEVM = true;
 
-  bannerContent =
-    "Currently, we only recognize NFTs on the Ethereum main network. So you can't get that stamp through your NFTs on other networks.";
+  banner = {
+    heading:
+      "Currently, we only recognize NFTs on the Ethereum main network. So you can't get that stamp through your NFTs on other networks.",
+  };
 
   async getProviderPayload(appContext: AppContext): Promise<ProviderPayload> {
     const result = await Promise.resolve({});

platforms/src/types.ts

@@ -65,7 +65,14 @@ export type AppContext = {
 export interface Platform {
   platformId: string;
   path?: string;
-  bannerContent?: string;
+  banner?: {
+    heading?: string;
+    content?: string;
+    cta?: {
+      label: string;
+      url: string;
+    }
+  };
   isEVM?: boolean;
   // TODO: shall we drop the getOAuthUrl and getProviderProof, given that we have getProviderPayload
   getOAuthUrl?(state: string): Promise<string>;

platforms/src/utils/platform.ts

@@ -8,13 +8,22 @@ export type PlatformOptions = {
   state?: string;
 };
 
+export type PlatformBanner = {
+  heading?: string;
+  content?: string;
+  cta?: {
+    label: string;
+    url: string;
+  };
+};
+
 export class Platform {
   platformId: string;
   path: string;
   clientId?: string;
   redirectUri?: string;
   state?: string;
-  bannerContent?: string;
+  banner?: PlatformBanner;
   isEVM?: boolean;
 
   async getProviderPayload(appContext: AppContext): Promise<ProviderPayload> {