Kudos UI (#168)

src/components/common/TokensGrid.jsx

@@ -3,9 +3,8 @@ import { ImageSrc, ReducerNames } from '../../utils/constants';
 import { Item, TokenDetails, ValidTokenComponent } from './TokenDetails';
 
 const TokensGrid = () => {
-  const { fvToken, kycToken, ogToken, vibeToken, regenToken } = useSelector(
-    (state) => state[ReducerNames.SBT]
-  );
+  const { fvToken, kycToken, ogToken, vibeToken, regenToken, kudosToken } =
+    useSelector((state) => state[ReducerNames.SBT]);
 
   return (
     <div className="flex flex-col gap-y-10 flex-wrap gap-5">
@@ -54,6 +53,15 @@ const TokensGrid = () => {
           <TokenDetails data={regenToken} />
         </Item>
       )}
+      {kudosToken && (
+        <Item imageSrc={ImageSrc.ProofOfKudos}>
+          <ValidTokenComponent />
+          <h2 className="font-bold text-3xl my-1 mb-5">
+            My Kudos Soul Bound Token
+          </h2>
+          <TokenDetails data={kudosToken} />
+        </Item>
+      )}
     </div>
   );
 };

src/pages/Activate.jsx

@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import ImageTextBlock from '../components/common/ImageTextBlock';
 import { useDispatch } from 'react-redux';
 import { updateTrackerStatus } from '../redux/reducer/tracker';
-import { ImageSrc } from '../utils/constants';
+import { ImageSrc, Links } from '../utils/constants';
 
 const ActivatePage = () => {
   const dispatch = useDispatch();
@@ -83,7 +83,8 @@ const ActivatePage = () => {
           />
           <ImageTextBlock
             imageSrc={ImageSrc.NDCKudos}
-            isAvailable={false}
+            onClick={() => window.open(Links.KUDOS_WIDGET, '_blank')}
+            isAvailable={true}
             title="NDC Kudos"
             description='The NDC Kudos platform aims to create a reputation point system where humans can give each other recognition known as "Kudos." With enough social proof, you can mint a "Proof of Kudos" Soul Bound Token to display your contribution and your reputation in the NEAR ecosystem.'
             buttonText="Give a Kudo"

src/pages/CommunitySBT.jsx

@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 import { useDispatch } from 'react-redux';
 import { updateTrackerStatus } from '../redux/reducer/tracker';
 import ImageTextBlock from '../components/common/ImageTextBlock';
-import { ImageSrc } from '../utils/constants';
+import { ImageSrc, Links } from '../utils/constants';
 
 const CommunitySBTPage = () => {
   const dispatch = useDispatch();
@@ -70,6 +70,8 @@ const CommunitySBTPage = () => {
               description="This SBT is a unique badge earned by attending special events and passing vibe checks. It grants exclusive access to high-caliber gatherings, turning them into celebrations of our collective spirit."
             />
             <ImageTextBlock
+              isAvailable={true}
+              onClick={() => window.open(Links.KUDOS_WIDGET, '_blank')}
               imageSrc={ImageSrc.ProofOfKudos}
               title="Proof of Kudos"
               description="This SBT is an electrifying badge bestowed upon individuals who have garnered immense praise, backed by overwhelming social proof."

src/pages/auth/Home.jsx

@@ -26,6 +26,7 @@ const Home = () => {
     og_contract,
     regen_issuer_contract,
     vibe_issuer_contract,
+    kudos_issuer_contract,
   } = getConfig();
   useEffect(() => {
     // fetching only when logged in (without steps) state active
@@ -34,6 +35,7 @@ const Home = () => {
       fetchTokens();
       fetchRegenToken();
       fetchVibeToken();
+      fetchKudosToken();
     }
   }, [activePageIndex]);
 
@@ -108,6 +110,29 @@ const Home = () => {
     }
   };
 
+  const fetchKudosToken = async () => {
+    try {
+      const data = await wallet.viewMethod({
+        contractId: app_contract,
+        method: 'sbt_tokens_by_owner',
+        args: {
+          account: wallet.accountId,
+          issuer: kudos_issuer_contract,
+        },
+      });
+      if (data?.[0]?.[1]) {
+        for (const token of data[0][1]) {
+          // if class = 1 => Kudos token
+          if (token.metadata.class === 1) {
+            dispatch(updateTokens({ type: TokenTypes.KUDOS, value: token }));
+          }
+        }
+      }
+    } catch (error) {
+      toast.error('An error occured while fetching Kudos SBT details');
+    }
+  };
+
   const fetchTokens = async () => {
     try {
       const data = await wallet.viewMethod({

src/redux/reducer/sbtsReducer.js

@@ -54,6 +54,7 @@ export const sbtReducer = createSlice({
     tokenRemoveSuccess: false,
     continueLoop: false, // for transfer and burn
     isUserHuman: false, // true if user has any SBT Token
+    kudosToken: null,
   },
   reducers: {
     updateTokens: (state, action) => {
@@ -74,6 +75,9 @@ export const sbtReducer = createSlice({
         case TokenTypes.REGEN:
           state.regenToken = value;
           break;
+        case TokenTypes.KUDOS:
+          state.kudosToken = value;
+          break;
         default:
           break;
       }
@@ -82,7 +86,8 @@ export const sbtReducer = createSlice({
         state.kycToken ||
         state.ogToken ||
         state.vibeToken ||
-        state.regenToken;
+        state.regenToken ||
+        state.kudosToken;
     },
     handleErrorMessage: (state, action) => {
       state.error = action.payload;
@@ -94,6 +99,7 @@ export const sbtReducer = createSlice({
       state.ogToken = null;
       state.vibeToken = null;
       state.regenToken = null;
+      state.kudosToken = null;
     },
     updateTokenRemoveStatus: (state, action) => {
       state.tokenRemoveSuccess = !state.tokenRemoveSuccess;

src/utils/config.js

@@ -20,6 +20,7 @@ export function getConfig() {
         fractal_api: 'https://back.justfortestinc.site',
         fractal_link: 'https://app.fractal.id',
         fractal_client_id: '6l6ze953tTjsog6VjZaCsCJ8LgiL_UqySA-E2f3ljPw',
+        kudos_issuer_contract: 'kudos.ndctools.near',
         ...commonConfig,
       };
     case 'dev':
@@ -35,6 +36,7 @@ export function getConfig() {
         fractal_api: 'https://staging.justfortestinc.site',
         fractal_link: 'https://app.next.fractal.id',
         fractal_client_id: 'D6SgXZQdWYk0D8ILkIGpNK75ufFpxD0Mp9sHFb_2oM8',
+        kudos_issuer_contract: 'kudos-v1.gwg.testnet',
         // fractal_client_id: '2KdWlqCWoyMtfIHTEI60NgqDA015d0Uy2r5KieoZS3M', // for http://localhost:3000
         ...commonConfig,
       };

src/utils/constants.js

@@ -20,6 +20,7 @@ export const TokenTypes = {
   FV: 'FV',
   VIBE: 'Vibe',
   REGEN: 'Regen',
+  KUDOS: 'Kudos',
 };
 
 export const ReducerNames = {
@@ -96,3 +97,7 @@ export const ImageSrc = {
   CommunityFund:
     'https://bafkreicvwvjtybib7nodjus5ynomjasp3xskz2et5tkrx6k7t3h7dsq2za.ipfs.nftstorage.link/',
 };
+
+export const Links = {
+  KUDOS_WIDGET: 'https://near.org/kudos.ndctools.near/widget/NDC.Kudos.Main',
+};