From 7859655dd092067ed6b6865fd617e51ff2f1b123 Mon Sep 17 00:00:00 2001
From: Chibuotu Amadi <chibuotu@gmail.com>
Date: Tue, 17 Jan 2023 23:23:03 +0100
Subject: [PATCH] feat: add heading and cta to stamp sidebar

fixes: #816

Co-authored-by: Lucian <lucian@gitcoin.co>
---
 .gitignore                               |  2 ++
 app/components/GenericBanner.tsx         | 26 ++++++++++++------------
 app/components/GenericPlatform.tsx       |  2 +-
 platforms/src/Ens/App-Bindings.ts        |  6 ++++--
 platforms/src/Gitcoin/App-Bindings.ts    |  5 ++++-
 platforms/src/GnosisSafe/App-Bindings.ts |  6 ++++--
 platforms/src/GtcStaking/App-Bindings.ts |  9 +++++++-
 platforms/src/NFT/App-Bindings.ts        |  6 ++++--
 platforms/src/types.ts                   |  9 +++++++-
 platforms/src/utils/platform.ts          | 11 +++++++++-
 10 files changed, 58 insertions(+), 24 deletions(-)

diff --git a/.gitignore b/.gitignore
index 773c16f41d..f16f429bdf 100644
--- a/.gitignore
+++ b/.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
diff --git a/app/components/GenericBanner.tsx b/app/components/GenericBanner.tsx
index d80a585639..d92e976c05 100644
--- a/app/components/GenericBanner.tsx
+++ b/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>
   );
diff --git a/app/components/GenericPlatform.tsx b/app/components/GenericPlatform.tsx
index 40f0182bef..96490987e6 100644
--- a/app/components/GenericPlatform.tsx
+++ b/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
diff --git a/platforms/src/Ens/App-Bindings.ts b/platforms/src/Ens/App-Bindings.ts
index 6db657991b..04c5d25a5c 100644
--- a/platforms/src/Ens/App-Bindings.ts
+++ b/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({});
diff --git a/platforms/src/Gitcoin/App-Bindings.ts b/platforms/src/Gitcoin/App-Bindings.ts
index e4a764b563..eebbccdc06 100644
--- a/platforms/src/Gitcoin/App-Bindings.ts
+++ b/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();
diff --git a/platforms/src/GnosisSafe/App-Bindings.ts b/platforms/src/GnosisSafe/App-Bindings.ts
index f7a5452347..943e0cc13a 100644
--- a/platforms/src/GnosisSafe/App-Bindings.ts
+++ b/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({});
diff --git a/platforms/src/GtcStaking/App-Bindings.ts b/platforms/src/GtcStaking/App-Bindings.ts
index 2718af8af6..ac8c8db6e2 100644
--- a/platforms/src/GtcStaking/App-Bindings.ts
+++ b/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 {};
diff --git a/platforms/src/NFT/App-Bindings.ts b/platforms/src/NFT/App-Bindings.ts
index 09bc707d55..dde96d6dcb 100644
--- a/platforms/src/NFT/App-Bindings.ts
+++ b/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({});
diff --git a/platforms/src/types.ts b/platforms/src/types.ts
index 53a832b4ae..a1ba56a683 100644
--- a/platforms/src/types.ts
+++ b/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>;
diff --git a/platforms/src/utils/platform.ts b/platforms/src/utils/platform.ts
index 2e77ea9d5c..8ad3eb58d9 100644
--- a/platforms/src/utils/platform.ts
+++ b/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> {