Merge pull request #65 from BreadchainCoop/development

Development

.github/workflows/integration.yml

@@ -1,29 +1,31 @@
 name: Integration
 
 on:
+  workflow_dispatch:
   pull_request:
     branches: [main, development]
 
 env:
   NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID: xxxx
   NEXT_PUBLIC_QUIKNODE_URL: xxxx
   NEXT_PUBLIC_ALCHEMY_MAINNET_API_KEY: xxxx
+  HARDHAT_RPC_URL: ${{ secrets.HARDHAT_RPC_URL }}
 
 jobs:
   linting:
     name: ESLint
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v4
         with:
           version: 9.0.6
 
       - name: Setup node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 20
           cache: "pnpm"
@@ -39,15 +41,15 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repo
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v4
         with:
           version: 9.0.6
 
       - name: Setup node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 20
           cache: "pnpm"
@@ -64,15 +66,15 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repo
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v4
         with:
           version: 9.0.6
 
       - name: Setup node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 20
           cache: "pnpm"

hardhat.config.js

@@ -1,9 +1,9 @@
 require("@nomicfoundation/hardhat-toolbox-viem");
 require("dotenv").config();
 
-const RPC_URL = process.env.RPC_URL;
+const HARDHAT_RPC_URL = process.env.HARDHAT_RPC_URL;
 
-if (!RPC_URL) throw new Error("RPC_URL not provided");
+if (!HARDHAT_RPC_URL) throw new Error("HARDHAT_RPC_URL not provided");
 
 /** @type import('hardhat/config').HardhatUserConfig */
 module.exports = {
@@ -13,7 +13,7 @@ module.exports = {
   networks: {
     hardhat: {
       forking: {
-        url: RPC_URL,
+        url: HARDHAT_RPC_URL,
       },
       mining: {
         auto: false,

package.json

@@ -7,7 +7,8 @@
     "hardhat": "env-cmd -f .env.hardhat.local hardhat node",
     "test": "playwright test",
     "ci:build": "CI=true next build",
-    "ci:test": "CI=true playwright test",
+    "ci:hardhat": "hardhat node",
+    "ci:test": "CI=true pnpm run ci:hardhat & sleep 3 && playwright test",
     "storybook:dev": "storybook dev -p 6006",
     "storybook:build": "storybook build",
     "storybook:serve": "serve storybook-static",
@@ -72,5 +73,6 @@
     "tailwindcss": "3.4.1",
     "ts-prune": "^0.10.3",
     "typescript": "^5"
-  }
+  },
+  "packageManager": "[email protected]+sha512.9df9cf27c91715646c7d675d1c9c8e41f6fce88246f1318c1aa6a1ed1aeb3c4f032fcdf4ba63cc69c4fe6d634279176b5358727d8f2cc1e65b65f43ce2f8bfb0"
 }

src/app/app.css

@@ -69,6 +69,49 @@
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
   }
+
+  .total-supply-border {
+    background: linear-gradient(canvas, canvas),
+      linear-gradient(120deg, hsl(278, 44%, 73%), hsl(35, 81%, 73%));
+    border: 4px solid transparent;
+    background-clip: padding-box, border-box;
+  }
+
+  .supply-light {
+    transform-origin: center;
+    animation-delay: 3000ms;
+    animation-name: supply-light-animation;
+    animation-duration: 3s;
+    animation-iteration-count: infinite;
+  }
+
+  @keyframes supply-light-animation {
+    0% {
+      transform: scale(100%);
+      opacity: 1;
+    }
+    20% {
+      transform: scale(100%);
+      opacity: 1;
+    }
+    40% {
+      transform: scale(0%);
+      opacity: 0;
+    }
+    60% {
+      transform: scale(0%);
+      opacity: 0;
+    }
+    80% {
+      transform: scale(100%);
+      opacity: 1;
+    }
+    100% {
+      transform: scale(100%);
+      opacity: 1;
+    }
+  }
+
   .spinner_QPB9 {
     transform-origin: center;
     animation: spinner_4N1C 2s linear infinite;

src/app/bakery/components/Input.tsx

@@ -11,7 +11,7 @@ function Input({ name, value, handleInputChange }: TProps) {
   return (
     <input
       name={name}
-      className="min-w-0 px-3 truncate text-ellipsis text-[2.3rem] sm:text-[2.5rem] text-breadgray-grey100 dark:text-neutral-200 bg-breadgray-ultra-white dark:bg-breadgray-grey300 placeholder-breadgray-grey100 dark:placeholder-neutral-200"
+      className="min-w-0 px-3 leading-3 truncate text-ellipsis text-[2.3rem] sm:text-[2.5rem] text-breadgray-grey100 dark:text-neutral-200 bg-breadgray-ultra-white dark:bg-breadgray-grey300 placeholder-breadgray-grey100 dark:placeholder-neutral-200"
       placeholder="00.00"
       inputMode="decimal"
       autoComplete="off"

src/app/bakery/components/Swap/SwapUI.tsx

@@ -6,9 +6,7 @@ export function PanelHeader({ children }: { children: ReactNode }) {
 
 export function PanelContent({ children }: { children: ReactNode }) {
   return (
-    <div className="flex flex-col items-start pb-2 justify-between">
-      {children}
-    </div>
+    <div className="flex flex-col items-start justify-between">{children}</div>
   );
 }
 
@@ -45,15 +43,15 @@ export function PanelBalance({ children }: { children: ReactNode }) {
 
 export function PanelContainer({ children }: { children: ReactNode }) {
   return (
-    <div className="w-full p-2 sm:px-8 sm:py-6 md:px-6  text-gray-300 bg-breadgray-ultra-white border border-1 border-breadgray-light-grey dark:border-none dark:bg-breadgray-grey300 rounded ">
+    <div className="w-full p-2 sm:px-8 sm:py-3 md:px-6 text-gray-300 bg-breadgray-ultra-white border border-1 border-breadgray-light-grey dark:border-none dark:bg-breadgray-grey300 rounded">
       {children}
     </div>
   );
 }
 
 export function PanelLabel({ children }: { children: ReactNode }) {
   return (
-    <span className="text-sm inline-block text-breadgray-rye dark:text-neutral-400 pl-3 pb-2">
+    <span className="text-sm inline-block text-breadgray-rye dark:text-neutral-400 pl-3">
       {children}
     </span>
   );
@@ -69,19 +67,19 @@ export function TokenLabelContainer({ children }: { children: ReactNode }) {
 
 export function TokenLabelText({ children }: { children: ReactNode }) {
   return (
-    <span className="ml-4 font-medium text-xl text-breadgray-grey100 dark:text-gray-300">
+    <span className="ml-2 font-medium text-xl text-breadgray-grey100 dark:text-gray-300">
       {children}
     </span>
   );
 }
 
 export function TokenBalanceContainer({ children }: { children: ReactNode }) {
-  return <div className="h-8 flex items-center justify-end">{children}</div>;
+  return <div className="h-6 flex items-center justify-end">{children}</div>;
 }
 
 export function TokenBalanceText({ children }: { children: ReactNode }) {
   return (
-    <div className="p-2 font-medium text-breadgray-rye dark:text-neutral-400 text-xs sm:text-[0.85rem] text-right">
+    <div className="px-2 font-medium text-breadgray-rye dark:text-neutral-400 text-xs sm:text-[0.85rem] text-right">
       {children}
     </div>
   );

src/app/bakery/components/TotalSupply.tsx

@@ -17,7 +17,7 @@ export function TotalSupply() {
   return (
     <div className="flex justify-center pb-2">
       <div className="flex items-center gap-2 p-2 bg-white dark:bg-breadgray-charcoal rounded">
-        <span className="rounded-full w-2 h-2 bg-status-success" />
+        <span className="rounded-full w-2 h-2 bg-status-success supply-light" />
         <span className="text-xl font-semibold">
           {data
             ? formatSupply(parseInt(formatUnits(BigInt(data as string), 18)))

src/app/core/components/Button/Button.tsx

@@ -15,7 +15,7 @@ export const ButtonVariants = {
   small: "px-4 py-2 text-sm",
   regular: "px-4 py-2 text-base",
   large: "px-7 py-2.5 text-lg sm:text-lg",
-  xl: "px-7 py-4 text-xl sm:text-2xl",
+  xl: "px-7 py-3 text-xl sm:text-xl tracking-wider",
 };
 
 const Button = forwardRef(

src/app/core/hooks/WagmiProvider/WagmiProvider.tsx

@@ -4,8 +4,6 @@ import { RainbowKitProvider, darkTheme } from "@rainbow-me/rainbowkit";
 
 import { getConfig } from "./config/getConfig";
 
-const { chains, config } = getConfig();
-
 const baseTheme = darkTheme({
   accentColor: "#E873D3",
   accentColorForeground: "#2E2E2E",
@@ -26,6 +24,8 @@ const theme = {
 };
 
 export function WagmiProvider({ children }: { children: ReactNode }) {
+  const { chains, config } = getConfig();
+
   return (
     <WagmiConfig config={config}>
       <RainbowKitProvider modalSize="compact" theme={theme} chains={chains}>

src/app/core/hooks/WagmiProvider/config/devConfig.ts

@@ -5,7 +5,9 @@ import { gnosis, hardhat } from "wagmi/chains";
 import { connectorsForWallets } from "@rainbow-me/rainbowkit";
 
 import { publicProvider } from "wagmi/providers/public";
+
 import { getWallets } from "./wallets";
+import { mockWallet } from "./mockWallet";
 
 const WALLET_CONNECT_PROJECT_ID =
   process.env.NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID;
@@ -40,7 +42,7 @@ const projectId = WALLET_CONNECT_PROJECT_ID;
 const connectors = connectorsForWallets([
   {
     groupName: "Wallets",
-    wallets: getWallets(chains, projectId),
+    wallets: [...getWallets(chains, projectId), mockWallet({ chains })],
   },
 ]);
 

src/app/core/hooks/WagmiProvider/config/getConfig.ts

@@ -1,14 +1,9 @@
 export function getConfig() {
-  if (process.env.NODE_ENV === "development") {
+  if (process.env.NODE_ENV !== "production") {
     const { devConfig, devChains } = require("./devConfig");
     return { chains: devChains, config: devConfig };
   }
 
-  if (process.env.NEXT_PUBLIC_TEST_CONNECTOR === "true") {
-    const { chains, config } = require("./testConfig");
-    return { chains, config };
-  }
-
   const { prodConfig, prodChains } = require("./prodConfig");
   return { chains: prodChains, config: prodConfig };
 }

src/app/core/hooks/WagmiProvider/config/mockWallet.ts

@@ -0,0 +1,27 @@
+import { MockConnector } from "wagmi/connectors/mock";
+import { Chain, createWalletClient, http } from "viem";
+import { hardhat } from "viem/chains";
+
+export function mockWallet({ chains }: { chains: Chain[] }) {
+  return {
+    id: "mock",
+    name: "Mock Wallet",
+    iconUrl: "",
+    iconBackground: "",
+    createConnector() {
+      const connector = new MockConnector({
+        chains,
+        options: {
+          walletClient: createWalletClient({
+            transport: http("http://localhost:8545"),
+            chain: hardhat,
+            account: "0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266",
+            key: "0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80",
+            pollingInterval: 100,
+          }),
+        },
+      });
+      return { connector };
+    },
+  };
+}

src/app/core/hooks/WagmiProvider/config/prodConfig.ts

@@ -3,17 +3,11 @@ import { jsonRpcProvider } from "wagmi/providers/jsonRpc";
 
 import { gnosis } from "wagmi/chains";
 import { connectorsForWallets } from "@rainbow-me/rainbowkit";
-import {
-  metaMaskWallet,
-  rainbowWallet,
-  argentWallet,
-  injectedWallet,
-  ledgerWallet,
-  trustWallet,
-} from "@rainbow-me/rainbowkit/wallets";
+
 import { publicProvider } from "wagmi/providers/public";
 import { getWallets } from "./wallets";
 import { SafeConnector } from "wagmi/connectors/safe";
+import { mockWallet } from "./mockWallet";
 
 const NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID =
   process.env.NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID;
@@ -50,7 +44,9 @@ const projectId = NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID;
 const connectors = connectorsForWallets([
   {
     groupName: "Wallets",
-    wallets: getWallets(chains, projectId),
+    wallets: process.env.CI
+      ? [...getWallets(chains, projectId), mockWallet({ chains })]
+      : [...getWallets(chains, projectId)],
   },
 ]);
 

src/app/core/hooks/WagmiProvider/config/wallets.ts

@@ -5,7 +5,6 @@ import {
   walletConnectWallet,
 } from "@rainbow-me/rainbowkit/wallets";
 import { Chain } from "wagmi";
-import { SafeConnector } from "wagmi/connectors/safe";
 
 export function getWallets(chains: Chain[], projectId: string) {
   return [

src/chainConfig.ts

@@ -15,8 +15,6 @@ export interface IConfig {
   [chainId: number]: ChainConfiguration;
 }
 
-// test contract address: 0x2993bD6dA994378Eadf1A5ba5c9017FdFc92f111
-
 function getConfig(): IConfig {
   if (process.env.NODE_ENV === "development") {
     return {