add apps/website cicd

AFK-AlignedFamKernel · Oct 2, 2024 · c43d477 · c43d477
1 parent 1cff141
commit c43d477
Show file tree

Hide file tree

Showing 10 changed files with 169 additions and 107 deletions.
diff --git a/.github/workflows/afk-community.yml → .github/workflows/mobile-app.yml b/.github/workflows/afk-community.yml → .github/workflows/mobile-app.yml
@@ -1,4 +1,4 @@
-name: CI
+name: Mobile App
 
 on:
   push:

diff --git a/.github/workflows/web-app.yml b/.github/workflows/web-app.yml
@@ -0,0 +1,64 @@
+name: Web App
+
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - "apps/website/**"
+  pull_request:
+    branches:
+      - main
+    paths:
+      - "apps/website/**"
+
+jobs:
+  check-app:
+    runs-on: ubuntu-latest
+
+    defaults:
+      run:
+        working-directory: ./apps/website
+
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20.x"
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
+
+      - name: Setup pnpm cache
+        uses: actions/cache@v4
+        with:
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install Dependencies
+        run: |
+          if [ -f "apps/website/pnpm-lock.yaml" ]; then
+            pnpm install --frozen-lockfile
+          else
+            pnpm install
+          fi
+
+      - name: Prettier Format Check
+        run: pnpm prettier:check
+
+      - name: ESLint Check
+        run: pnpm lint
+
+      - name: TypeScript Check
+        run: pnpm ts:check
diff --git a/apps/website/package.json b/apps/website/package.json
@@ -10,9 +10,9 @@
     "build:nostr_sdk": "cd ../.. && pnpm run build:nostr_sdk",
     "lint": "next lint",
     "lint:fix": "next lint --fix",
-    "prettier:fix": "pnpm prettier --write 'src/**/*.tsx'",
-    "prettier:fix:ts": "pnpm prettier --write 'src/**/*.ts'",
-    "check-types": "tsc --noEmit"
+    "prettier": "prettier --write \"src/**/*.{ts,tsx}\"",
+    "prettier:check": "prettier --check \"src/**/*.{ts,tsx}\"",
+    "ts:check": "tsc --noEmit"
   },
   "dependencies": {
     "@avnu/avnu-sdk": "^2.0.0",

diff --git a/apps/website/src/app/components/Navbar.tsx b/apps/website/src/app/components/Navbar.tsx
@@ -4,12 +4,12 @@ import Link from 'next/link';
 import React, {useState} from 'react';
 import {createPortal} from 'react-dom';
 
-import MenuNav from './MenuNav';
 import {MobileNavBar} from './MobileNavBar';
 import {NavigationLinks} from './NavigationLinks';
+
 export function Navbar() {
   const [toggleNav, setToggleNav] = useState(false);
-  const [toggleParamsNav, setToggleParamsNav] = useState(false);
+
   return (
     <div className="desktop:py-[26px] py-3 px-6 desktop:px-[120px] bg-black flex justify-between items-center">
       <div className="flex items-center gap-x-[10px] text">
@@ -24,19 +24,6 @@ export function Navbar() {
       </div>
       <NavigationLinks />
 
-      {/* <button
-        onClick={() => {
-          setToggleParamsNav(true);
-          window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
-        }}
-      >
-        <img src="assets/hamburger-icon.svg" className="w-6 h-6" alt="" />
-      </button> */}
-
-      {/* <MenuNav></MenuNav> */}
-      {/* {toggleParamsNav &&
-        createPortal(<MenuNav setToggle={setToggleParamsNav} toggle={toggleParamsNav} />, document.body)
-      } */}
       <div className="desktop:flex hidden items-center gap-x-4 font-bold text-sm leading-[16px]">
         <button className="py-[15px] px-[48px] bg-white">
           <a href="https://afk-community.xyz" target="_blank">

diff --git a/apps/website/src/app/providers.tsx b/apps/website/src/app/providers.tsx
@@ -3,7 +3,7 @@
 import '@rainbow-me/rainbowkit/styles.css';
 
 import {ChakraProvider} from '@chakra-ui/react';
-import {getDefaultConfig, RainbowKitProvider} from '@rainbow-me/rainbowkit';
+import {RainbowKitProvider} from '@rainbow-me/rainbowkit';
 import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
 import {Chain} from 'viem';
 import {createConfig, http} from 'wagmi';
@@ -12,15 +12,9 @@ import {mainnet, sepolia} from 'wagmi/chains';
 
 import StarknetProvider from '@/context/StarknetProvider';
 
-// import {TanstackProvider} from 'afk_nostr_sdk';
-// import {NostrProvider} from 'afk_nostr_sdk';
-
 const kakarotEvm: Chain = {
   id: 1802203764,
   name: 'Kakarot Sepolia',
-  // network: "Scroll Sepolia Testnet",
-  // iconUrl: '/assets/scroll.svg',
-  // iconBackground: '#fff',
   nativeCurrency: {
     decimals: 18,
     name: 'Ethereum',
@@ -34,7 +28,6 @@ const kakarotEvm: Chain = {
     default: {name: 'Explorer', url: 'https://sepolia.kakarotscan.org/'},
     etherscan: {name: 'Explorer', url: 'https://sepolia.kakarotscan.org/'},
   },
-  // testnet: true,
 };
 
 export const config = createConfig({
@@ -46,32 +39,18 @@ export const config = createConfig({
   },
 });
 
-const configRainbow = getDefaultConfig({
-  appName: 'My RainbowKit App',
-  projectId: 'YOUR_PROJECT_ID',
-  chains: [mainnet, sepolia],
-  transports: {
-    [mainnet.id]: http('https://eth-mainnet.g.alchemy.com/v2/...'),
-    [sepolia.id]: http('https://eth-sepolia.g.alchemy.com/v2/...'),
-  },
-});
-
 const queryClient = new QueryClient();
 
 export default function Providers({children}: {children: React.ReactNode}) {
   return (
-    <>
-      <ChakraProvider
-      // theme={theme}
-      >
-        <StarknetProvider>
-          <WagmiProvider config={config}>
-            <QueryClientProvider client={queryClient}>
-              <RainbowKitProvider>{children}</RainbowKitProvider>
-            </QueryClientProvider>
-          </WagmiProvider>
-        </StarknetProvider>
-      </ChakraProvider>
-    </>
+    <ChakraProvider>
+      <StarknetProvider>
+        <WagmiProvider config={config}>
+          <QueryClientProvider client={queryClient}>
+            <RainbowKitProvider>{children}</RainbowKitProvider>
+          </QueryClientProvider>
+        </WagmiProvider>
+      </StarknetProvider>
+    </ChakraProvider>
   );
 }
diff --git a/apps/website/src/constants/misc.ts b/apps/website/src/constants/misc.ts
@@ -1,18 +1,20 @@
 import {BASE_URL as AVNU_BASE_URL, SEPOLIA_BASE_URL as AVNU_SEPOLIA_BASE_URL} from '@avnu/avnu-sdk';
 import {constants} from 'starknet';
 
-export enum Entrypoint {
+export const Entrypoint = {
   // ERC-20
-  NAME = 'name',
-  SYMBOL = 'symbol',
-  APPROVE = 'approve',
-  TRANSFER = 'transfer',
+  NAME: 'name',
+  SYMBOL: 'symbol',
+  APPROVE: 'approve',
+  TRANSFER: 'transfer',
 
   // Escrow
-  DEPOSIT = 'deposit',
-  CLAIM = 'claim',
-  GET_DEPOSIT = 'get_deposit',
-}
+  DEPOSIT: 'deposit',
+  CLAIM: 'claim',
+  GET_DEPOSIT: 'get_deposit',
+} as const;
+
+export type EntrypointType = (typeof Entrypoint)[keyof typeof Entrypoint];
 
 export const NETWORK_NAME = process.env.NETWORK_NAME as constants.NetworkName;
 if (!NETWORK_NAME) throw new Error('NETWORK_NAME is not set');

diff --git a/apps/website/src/utils/errors.ts b/apps/website/src/utils/errors.ts
@@ -1,18 +1,24 @@
-const ErrorCodesArray = [
-  'BAD_REQUEST',
-  'INVALID_EVENT',
-  'INVALID_EVENT_SIGNATURE',
-  'INVALID_EVENT_CONTENT',
-  'INVALID_ADDRESS',
-  'DEPOSIT_NOT_FOUND',
-  'INVALID_GAS_AMOUNT',
-  'TRANSACTION_ERROR',
-  'ESTIMATION_ERROR',
-  'NO_ROUTE_FOUND',
-] as const;
+export const ErrorCodes = {
+  BAD_REQUEST: 'BAD_REQUEST',
+  INVALID_EVENT: 'INVALID_EVENT',
+  INVALID_EVENT_SIGNATURE: 'INVALID_EVENT_SIGNATURE',
+  INVALID_EVENT_CONTENT: 'INVALID_EVENT_CONTENT',
+  INVALID_ADDRESS: 'INVALID_ADDRESS',
+  DEPOSIT_NOT_FOUND: 'DEPOSIT_NOT_FOUND',
+  INVALID_GAS_AMOUNT: 'INVALID_GAS_AMOUNT',
+  TRANSACTION_ERROR: 'TRANSACTION_ERROR',
+  ESTIMATION_ERROR: 'ESTIMATION_ERROR',
+  NO_ROUTE_FOUND: 'NO_ROUTE_FOUND',
+} as const;
 
-export type ErrorCode = (typeof ErrorCodesArray)[number];
+export type ErrorCode = (typeof ErrorCodes)[keyof typeof ErrorCodes];
 
-export const ErrorCode = Object.fromEntries(ErrorCodesArray.map((code) => [code, code])) as {
-  [K in ErrorCode]: K;
+export const ErrorCode = {
+  ...ErrorCodes,
+  isErrorCode: (code: string): code is ErrorCode => code in ErrorCodes,
 };
+
+// Type guard function
+export function isErrorCode(code: string): code is ErrorCode {
+  return code in ErrorCodes;
+}
diff --git a/packages/pixel_ui/src/App.tsx b/packages/pixel_ui/src/App.tsx
@@ -6,7 +6,7 @@ import {
   useNetwork,
   useConnect
 } from '@starknet-react/core';
-import { connect } from 'starknetkit-next';
+import { connect, ConnectorData, StarknetWindowObject } from 'starknetkit-next';
 
 import './App.css';
 import CanvasContainer from './canvas/CanvasContainer.js';
@@ -15,22 +15,23 @@ import TabsFooter from './footer/TabsFooter.js';
 import TabPanel from './tabs/TabPanel.js';
 import { usePreventZoom, useLockScroll } from './utils/Window.js';
 import { backendUrl, wsUrl, devnetMode, allowedMethods, expiry, metaData, dappKey, getProvider } from './utils/Consts.js';
-import logo from './resources/logo.png';
 import canvasConfig from './configs/canvas.config.json';
 import { fetchWrapper, getTodaysStartTime } from './services/apiService.js';
 import art_peace_abi from './contracts/art_peace.abi.json';
 import username_store_abi from './contracts/username_store.abi.json';
 import canvas_nft_abi from './contracts/canvas_nft.abi.json';
 import NotificationPanel from './tabs/NotificationPanel.js';
 import ModalPanel from './ui/ModalPanel.js';
-import Hamburger from './resources/icons/Hamburger.png';
 import useMediaQuery from './hooks/useMediaQuery.js';
 import {
   openSession,
   createSessionRequest,
-  buildSessionAccount
+  buildSessionAccount,
+  SessionParams,
+  AllowedMethod,
+  OffChainSession
 } from '@argent/x-sessions';
-import { constants, provider, stark } from 'starknet';
+import { constants, provider, Signature, stark } from 'starknet';
 // import { useMediaQuery } from 'react-responsive';
 
 interface IApp {
@@ -41,6 +42,10 @@ interface IApp {
 }
 
 function App({ contractAddress, canvasAddress, nftAddress, factoryAddress }: IApp) {
+
+  const logo = require('./resources/logo.png');
+  const Hamburger = require('./resources/icons/Hamburger.png');
+
   // Window management
   usePreventZoom();
   const tabs = ['Canvas', 'Factions', 'Quests', 'Vote', 'NFTs', 'Account'];
@@ -585,11 +590,11 @@ function App({ contractAddress, canvasAddress, nftAddress, factoryAddress }: IAp
   const [nftWidth, setNftWidth] = useState(null);
   const [nftHeight, setNftHeight] = useState(null);
   // Starknet wallet
-  const [wallet, setWallet] = useState(null);
-  const [connectorData, setConnectorData] = useState(null);
+  const [wallet, setWallet] = useState<StarknetWindowObject | null>(null);
+  const [connectorData, setConnectorData] = useState<ConnectorData | null>(null);
   const [_connector, setConnector] = useState(null);
-  const [_sessionRequest, setSessionRequest] = useState(null);
-  const [_accountSessionSignature, setAccountSessionSignature] = useState(null);
+  const [_sessionRequest, setSessionRequest] = useState<OffChainSession | null>(null);
+  const [_accountSessionSignature, setAccountSessionSignature] = useState<string[] | Signature | null>(null);
   const [isSessionable, setIsSessionable] = useState(false);
   const [usingSessionKeys, setUsingSessionKeys] = useState(false);
 
@@ -606,6 +611,8 @@ function App({ contractAddress, canvasAddress, nftAddress, factoryAddress }: IAp
   //   }
   //   connect({ connector });
   // };
+
+  // @ts-ignore
   const canSession = (wallet) => {
     let sessionableIds = [
       'argentX',
@@ -739,12 +746,12 @@ function App({ contractAddress, canvasAddress, nftAddress, factoryAddress }: IAp
     let chainId = await provider.getChainId();
     const accountSessionSignature = await openSession({
       wallet: wallet,
-      sessionParams: sessionParams,
+      sessionParams: sessionParams as SessionParams,
       // chainId: constants.StarknetChainId.SN_SEPOLIA?.toString() as constants.StarknetChainId
       chainId: chainId ?? constants.StarknetChainId.SN_SEPOLIA
     });
     const sessionRequest = createSessionRequest(
-      allowedMethods,
+      allowedMethods as AllowedMethod[],
       BigInt(expiry),
       metaData(false),
       dappKey.publicKey
@@ -834,7 +841,7 @@ function App({ contractAddress, canvasAddress, nftAddress, factoryAddress }: IAp
           setLastPlacedTime={setLastPlacedTime}
         />
         {(!isMobile || activeTab === tabs[0]) && (
-          <img src={logo?.src} alt='logo' className='App__logo--mobile' />
+          <img src={logo} alt='logo' className='App__logo--mobile' />
         )}
         <div
           className={
@@ -984,7 +991,7 @@ function App({ contractAddress, canvasAddress, nftAddress, factoryAddress }: IAp
                   setFooterExpanded(!footerExpanded);
                 }}
               >
-                <img src={Hamburger?.src} alt='Tabs' className='ExpandTabs__icon' />
+                <img src={Hamburger} alt='Tabs' className='ExpandTabs__icon' />
               </div>
             )}
             {isFooterSplit && footerExpanded && (

diff --git a/packages/pixel_ui/src/custom.d.ts b/packages/pixel_ui/src/custom.d.ts
@@ -0,0 +1,4 @@
+declare module '*.png' {
+    const content: string;
+    export default content;
+}