Feat/UI feedback

package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@cowprotocol/cow-sdk": "^5.10.3",
-    "@kleros/ui-components-library": "^3.6.0",
+    "@kleros/ui-components-library": "^3.7.0",
     "@reown/appkit": "^1.7.11",
     "@reown/appkit-adapter-wagmi": "^1.7.11",
     "@swapr/sdk": "https://github.com/seer-pm/swapr-sdk#6dea7e63f7e05c84a4374717ee1ad5baca86f7de",
@@ -21,6 +21,7 @@
     "@yornaath/batshit": "^0.11.1",
     "clsx": "^2.1.1",
     "ethers": "5.8.0",
+    "framer-motion": "^12.23.26",
     "graphql-request": "^7.3.1",
     "graphql-tag": "^2.12.6",
     "lightweight-charts": "^5.0.8",

src/abi/CreditsManager.ts

@@ -0,0 +1,94 @@
+import { Abi } from "viem";
+
+export const CreditsManagerAbi: Abi = [
+  {
+    inputs: [
+      { internalType: "contract ERC20", name: "_token", type: "address" },
+      {
+        internalType: "contract SeerCredits",
+        name: "_seerCredits",
+        type: "address",
+      },
+    ],
+    stateMutability: "nonpayable",
+    type: "constructor",
+  },
+  {
+    inputs: [
+      { internalType: "address", name: "_user", type: "address" },
+      { internalType: "uint256", name: "_amount", type: "uint256" },
+    ],
+    name: "canSpendCredits",
+    outputs: [{ internalType: "bool", name: "", type: "bool" }],
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    inputs: [{ internalType: "address", name: "_governor", type: "address" }],
+    name: "changeGovernor",
+    outputs: [],
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    inputs: [
+      { internalType: "address", name: "to", type: "address" },
+      { internalType: "bytes", name: "data", type: "bytes" },
+      { internalType: "uint256", name: "amount", type: "uint256" },
+      { internalType: "contract ERC20", name: "outputToken", type: "address" },
+    ],
+    name: "execute",
+    outputs: [],
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    inputs: [],
+    name: "governor",
+    outputs: [{ internalType: "address", name: "", type: "address" }],
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    inputs: [],
+    name: "seerCredits",
+    outputs: [
+      { internalType: "contract SeerCredits", name: "", type: "address" },
+    ],
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    inputs: [
+      { internalType: "address", name: "_contract", type: "address" },
+      { internalType: "bool", name: "_whitelisted", type: "bool" },
+    ],
+    name: "setWhitelistedContract",
+    outputs: [],
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    inputs: [
+      { internalType: "contract ERC20", name: "_token", type: "address" },
+    ],
+    name: "sweepTokens",
+    outputs: [],
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    inputs: [],
+    name: "token",
+    outputs: [{ internalType: "contract ERC20", name: "", type: "address" }],
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    inputs: [{ internalType: "address", name: "", type: "address" }],
+    name: "whitelistedContracts",
+    outputs: [{ internalType: "bool", name: "", type: "bool" }],
+    stateMutability: "view",
+    type: "function",
+  },
+] as const;

src/abi/wrappedXDAI.ts

@@ -0,0 +1,155 @@
+import { Abi } from "viem";
+
+export const wrappedXDAIAbi: Abi = [
+  {
+    constant: true,
+    inputs: [],
+    name: "name",
+    outputs: [{ name: "", type: "string" }],
+    payable: false,
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    constant: false,
+    inputs: [
+      { name: "guy", type: "address" },
+      { name: "wad", type: "uint256" },
+    ],
+    name: "approve",
+    outputs: [{ name: "", type: "bool" }],
+    payable: false,
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: "totalSupply",
+    outputs: [{ name: "", type: "uint256" }],
+    payable: false,
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    constant: false,
+    inputs: [
+      { name: "src", type: "address" },
+      { name: "dst", type: "address" },
+      { name: "wad", type: "uint256" },
+    ],
+    name: "transferFrom",
+    outputs: [{ name: "", type: "bool" }],
+    payable: false,
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    constant: false,
+    inputs: [{ name: "wad", type: "uint256" }],
+    name: "withdraw",
+    outputs: [],
+    payable: false,
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: "decimals",
+    outputs: [{ name: "", type: "uint8" }],
+    payable: false,
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    constant: true,
+    inputs: [{ name: "", type: "address" }],
+    name: "balanceOf",
+    outputs: [{ name: "", type: "uint256" }],
+    payable: false,
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: "symbol",
+    outputs: [{ name: "", type: "string" }],
+    payable: false,
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    constant: false,
+    inputs: [
+      { name: "dst", type: "address" },
+      { name: "wad", type: "uint256" },
+    ],
+    name: "transfer",
+    outputs: [{ name: "", type: "bool" }],
+    payable: false,
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    constant: false,
+    inputs: [],
+    name: "deposit",
+    outputs: [],
+    payable: true,
+    stateMutability: "payable",
+    type: "function",
+  },
+  {
+    constant: true,
+    inputs: [
+      { name: "", type: "address" },
+      { name: "", type: "address" },
+    ],
+    name: "allowance",
+    outputs: [{ name: "", type: "uint256" }],
+    payable: false,
+    stateMutability: "view",
+    type: "function",
+  },
+  { payable: true, stateMutability: "payable", type: "fallback" },
+  {
+    anonymous: false,
+    inputs: [
+      { indexed: true, name: "src", type: "address" },
+      { indexed: true, name: "guy", type: "address" },
+      { indexed: false, name: "wad", type: "uint256" },
+    ],
+    name: "Approval",
+    type: "event",
+  },
+  {
+    anonymous: false,
+    inputs: [
+      { indexed: true, name: "src", type: "address" },
+      { indexed: true, name: "dst", type: "address" },
+      { indexed: false, name: "wad", type: "uint256" },
+    ],
+    name: "Transfer",
+    type: "event",
+  },
+  {
+    anonymous: false,
+    inputs: [
+      { indexed: true, name: "dst", type: "address" },
+      { indexed: false, name: "wad", type: "uint256" },
+    ],
+    name: "Deposit",
+    type: "event",
+  },
+  {
+    anonymous: false,
+    inputs: [
+      { indexed: true, name: "src", type: "address" },
+      { indexed: false, name: "wad", type: "uint256" },
+    ],
+    name: "Withdrawal",
+    type: "event",
+  },
+] as const;

src/app/(homepage)/components/Header/index.tsx

@@ -6,13 +6,15 @@ import SeerLogo from "@/components/SeerLogo";
 import SeerHeaderBackground from "@/assets/png/seer-header-bg.png";
 import ChartBar from "@/assets/svg/chart-bar.svg";
 
+import { metadata } from "@/consts/markets";
+
 import Countdown from "./Countdown";
 
 const Header: React.FC = () => {
   return (
     <div className="flex flex-col items-start gap-4">
       <h1 className="text-klerosUIComponentsPrimaryText text-2xl font-semibold">
-        Session 1 - Movies Experiment
+        {metadata.name}
       </h1>
       <div className="flex flex-wrap gap-4">
         <div className="flex items-center gap-2">
@@ -31,19 +33,23 @@ const Header: React.FC = () => {
         className={clsx(
           "relative mt-8 box-border w-full overflow-hidden rounded-xl",
           "border-gradient-purple-blue",
+          "flex flex-col gap-2",
         )}
       >
         <Image
           src={SeerHeaderBackground}
           alt="Seer header background"
           className="absolute -z-2 size-full object-cover max-md:opacity-35"
         />
-        <div className="flex size-full flex-wrap items-center gap-6 px-6 py-3.75">
+        <div className="flex size-full flex-wrap items-center gap-6 px-6 pt-3.75">
           <SeerLogo />
           <p className="text-klerosUIComponentsPrimaryText text-base">
-            If watched, what score will Clément give to the movie?
+            {metadata.question}
           </p>
         </div>
+        <p className="text-klerosUIComponentsSecondaryText px-6 pb-3.75 text-xs whitespace-pre">
+          {metadata.questionDescription}
+        </p>
       </div>
     </div>
   );

src/app/(homepage)/components/ParticipateSection/CsvUpload/CsvDownload.tsx

@@ -0,0 +1,26 @@
+import { useCallback } from "react";
+
+import { useMarketsStore } from "@/store/markets";
+
+import LightButton from "@/components/LightButton";
+
+import { downloadCsvFile, generateMarketCsv } from "@/utils/csv";
+
+const CsvDownload: React.FC = () => {
+  const markets = useMarketsStore((state) => state.markets);
+  const handleDownload = useCallback(() => {
+    const csv = generateMarketCsv(markets);
+    downloadCsvFile("market-predictions.csv", csv);
+  }, [markets]);
+
+  return (
+    <LightButton
+      text="Download template csv"
+      onPress={handleDownload}
+      small
+      className="[&_.button-text]:text-klerosUIComponentsSecondaryText"
+    />
+  );
+};
+
+export default CsvDownload;

src/app/(homepage)/components/ParticipateSection/CsvUpload/index.tsx

@@ -7,7 +7,9 @@ import { useToggle } from "react-use";
 import { useMarketsStore } from "@/store/markets";
 
 import { isUndefined } from "@/utils";
-import { parseMarketCSV } from "@/utils/parseCsvFile";
+import { parseMarketCSV } from "@/utils/csv";
+
+import CsvDownload from "./CsvDownload";
 
 interface ICsvUploadPopup {
   isOpen: boolean;
@@ -65,13 +67,13 @@ const CsvUploadPopup: React.FC<ICsvUploadPopup> = ({
             )}
           >
             <span className="text-klerosUIComponentsSecondaryText text-sm">
-              marketId,score
+              marketName,score
             </span>
             <span className="text-klerosUIComponentsPrimaryText text-sm">
-              0x105d957043ee12f7705efa072af11e718f8c5b83,49.45
+              Judge Dredd (1995),49.45
             </span>
             <span className="text-klerosUIComponentsPrimaryText text-sm">
-              0x68af0afe82dda5c9c26e6a458a143caad35708d6,53.52
+              Bacurau (2019),53.52
             </span>
             <span className="text-klerosUIComponentsSecondaryText text-sm">
               ...
@@ -82,6 +84,7 @@ const CsvUploadPopup: React.FC<ICsvUploadPopup> = ({
             Gnosis ecosystem.
           </span>
         </div>
+        <CsvDownload />
         <FileUploader
           className="w-full"
           callback={(file) => {

src/app/(homepage)/components/ParticipateSection/TradeWallet/DepositInterface.tsx

@@ -7,14 +7,15 @@ import { useAccount, useBalance } from "wagmi";
 import { useDepositToTradeExecutor } from "@/hooks/tradeWallet/useDepositToTradeExecutor";
 import { useTokenBalance } from "@/hooks/useTokenBalance";
 
-import AmountInput, { TokenType } from "@/components/AmountInput";
+import AmountInput from "@/components/AmountInput";
 import LightButton from "@/components/LightButton";
 
 import CloseIcon from "@/assets/svg/close-icon.svg";
 
 import { isUndefined } from "@/utils";
 
 import { collateral } from "@/consts";
+import { TokenType } from "@/consts/tokens";
 
 interface DepositInterfaceProps {
   isOpen: boolean;

src/app/(homepage)/components/ParticipateSection/TradeWallet/ProjectBalances/index.tsx

@@ -21,7 +21,7 @@ const ProjectBalances: React.FC = () => {
   );
   return (
     <CustomAccordion
-      className="w-full [&_#body-wrapper]:px-0 [&_#expand-button]:px-4!"
+      className="w-full max-w-full [&_#body-wrapper]:px-0 [&_#expand-button]:px-4!"
       items={[
         {
           title: (