feat(marmalade-marketplace): Add styled pages, navbar, create-token, …

…create-sale (#2391)

* chore: marmalade sales

* rename react-ui to kode-ui

* rename to kode-ui

* fix test error

* remove test failure

* Theming support

* Create Sale, wip

* Create Sale, work in progress

* Create Sale, work in progress

* Style updates

* add client-utils/webauthn and apply to marketplace app

* add styled marketplace navbar

* remove styles from create-token component

* add styles to mint page

* clean up errors

* Generate kode-icons

* Fixes for Mytokens

* fix uri attachment

* add PINATA_JWT to .env.example

* remove whitespaces

* remove background, remove if statement in uri

* Fixed the mytokens test

---------

Co-authored-by: Ivan Magaš <imagas96@gmail.com>
Co-authored-by: ggobugi27 <ggobugi27@github.com>
Co-authored-by: jermaine150 <jermaine150@gmail.com>

packages/apps/marmalade-marketplace/.env.example

@@ -1,12 +1,9 @@
 NEXT_PUBLIC_GRAPHQL_ENDPOINT=http://localhost:4000/graphql
-
 NEXT_PUBLIC_API_URL=http://localhost:3000
+NEXT_PUBLIC_WALLET_URL=https://spirekey.kadena.io/
 
-NEXT_PUBLIC_WALLET_URL=https://webauthn-wallet.vercel.app
-
-NEXT_PUBLIC_CHAINWEB_API_HOST=http://api.testnet.chainweb.com
+NEXT_PUBLIC_CHAINWEB_API_HOST=https://api.testnet.chainweb.com
 NEXT_PUBLIC_NETWORK_NAME=testnet04
-
 NEXT_PUBLIC_CHAIN_IDS="0,1"
 
 # Optional parameter to specify the start block for the event indexer.
@@ -20,3 +17,5 @@ NEXT_PUBLIC_FAUCET_CONTRACT=n_d8cbb935f9cd9d2399a5886bb08caed71f9bad49.coin-fauc
 NEXT_PUBLIC_FAUCET_ACCOUNT=c:Ecwy85aCW3eogZUnIQxknH8tG8uXHM5QiC__jeI0nWA
 
 NEXT_PUBLIC_WEBAUTHN_WALLET=n_eef68e581f767dd66c4d4c39ed922be944ede505.webauthn-wallet
+
+PINATA_JWT=your-jwt

packages/apps/marmalade-marketplace/src/__tests__/pages/mytokens.test.tsx

@@ -2,14 +2,17 @@ import { expect, test } from 'vitest'
 import { render, screen, waitFor } from '@testing-library/react';
 import { useAccount } from '@/hooks/account';
 import { getTokens } from '@/graphql/queries/client';
+import { getWebauthnAccount } from "@kadena/client-utils/webauthn";
 import MyTokens from '@/pages/mytokens'
 
 // Mocking the custom hooks and functions
 vi.mock('@/hooks/account');
 vi.mock('@/graphql/queries/client');
+vi.mock("@kadena/client-utils/webauthn");
 
 const mockUseAccount = vi.mocked(useAccount);
 const mockGetTokens = vi.mocked(getTokens);
+const mockGetWebauthnAccount = vi.mocked(getWebauthnAccount);
 
 // Mocking the Token component
 vi.mock('@/components/Token', () => ({
@@ -46,6 +49,7 @@ describe('MyTokens component', () => {
 
     mockUseAccount.mockReturnValue(mockAccountContext);
     mockGetTokens.mockResolvedValue(mockTokens);
+    mockGetWebauthnAccount.mockResolvedValue('test-account');
 
     render(<MyTokens />);
 

packages/apps/marmalade-marketplace/src/components/CollectionForm/index.tsx

@@ -1,16 +1,22 @@
 import React, { FC } from 'react';
 import { TextField, Button } from '@kadena/kode-ui';
 import * as styles from '@/styles/create-token.css';
+import CrudCard from '@/components/CrudCard';
 
 interface CollectionFormProps {
   collectionInput: { [key: string]: string };
   handleCollectionInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
 const CollectionForm: FC<CollectionFormProps> = ({ collectionInput, handleCollectionInputChange,  }) => (
-  <div className={styles.formSection}>
+  <CrudCard
+    title="Collection"
+    description={[
+      "Provide a Collection ID"
+    ]}
+  >
     <TextField label="Collection ID" name="collectionId" value={collectionInput.collectionId} onChange={handleCollectionInputChange} />
-  </div>
+  </CrudCard>
 );
 
 export default CollectionForm;