Merge pull request #2117 from zeitgeistpm/moonbeam-usdc-config

Add USDC and refactor to reduce config duplication

components/create/editor/Editor.tsx

@@ -29,7 +29,10 @@ import { LiquidityInput } from "./inputs/Liquidity";
 import ModerationModeSelect from "./inputs/Moderation";
 import OracleInput from "./inputs/Oracle";
 import { AnswersInput } from "./inputs/answers";
-import { getMetadataForCurrency } from "lib/constants/supported-currencies";
+import {
+  getMetadataForCurrency,
+  supportedCurrencies,
+} from "lib/constants/supported-currencies";
 import Input from "components/ui/Input";
 import TimezoneSelect from "./inputs/TimezoneSelect";
 import { Loader } from "components/ui/Loader";
@@ -186,7 +189,10 @@ export const MarketEditor = () => {
                 </InfoPopover>
               </h2>
             </div>
-            <CurrencySelect options={["ZTG", "DOT"]} {...input("currency")} />
+            <CurrencySelect
+              options={supportedCurrencies.map((currency) => currency.name)}
+              {...input("currency")}
+            />
             {showLiquidityWarning && (
               <div className="center mb-8 mt-4">
                 <div className="w-full text-center text-sm text-gray-400 md:max-w-lg">

components/markets/BuyFullSetForm.tsx

@@ -1,25 +1,26 @@
-import { isRpcSdk, parseAssetId } from "@zeitgeistpm/sdk";
-import Input from "components/ui/Input";
+import {
+  IOBaseAssetId,
+  IOForeignAssetId,
+  isRpcSdk,
+  parseAssetId,
+} from "@zeitgeistpm/sdk";
 import TransactionButton from "components/ui/TransactionButton";
 import Decimal from "decimal.js";
 import { ZTG } from "lib/constants";
+import { lookupAssetImagePath } from "lib/constants/foreign-asset";
+import { useGlobalKeyPress } from "lib/hooks/events/useGlobalKeyPress";
+import { useAccountPoolAssetBalances } from "lib/hooks/queries/useAccountPoolAssetBalances";
 import { useAssetMetadata } from "lib/hooks/queries/useAssetMetadata";
 import { useBalance } from "lib/hooks/queries/useBalance";
+import { useMarket } from "lib/hooks/queries/useMarket";
 import { usePool } from "lib/hooks/queries/usePool";
 import { useExtrinsic } from "lib/hooks/useExtrinsic";
-import { useGlobalKeyPress } from "lib/hooks/events/useGlobalKeyPress";
 import { useSdkv2 } from "lib/hooks/useSdkv2";
 import { useNotifications } from "lib/state/notifications";
 import { useWallet } from "lib/state/wallet";
-import { useState, useEffect } from "react";
-import {
-  getMetadataForCurrency,
-  SupportedCurrencyTag,
-} from "lib/constants/supported-currencies";
-import Image from "next/image";
-import { useAccountPoolAssetBalances } from "lib/hooks/queries/useAccountPoolAssetBalances";
 import { formatNumberCompact } from "lib/util/format-compact";
-import { useMarket } from "lib/hooks/queries/useMarket";
+import Image from "next/image";
+import { useEffect, useState } from "react";
 
 const BuyFullSetForm = ({
   marketId,
@@ -112,23 +113,23 @@ const BuyFullSetForm = ({
 
   useGlobalKeyPress("Enter", handleSignTransaction);
 
-  const currencyMetadata = getMetadataForCurrency(
-    (metadata?.symbol && ["ZTG", "DOT"].includes(metadata.symbol)
-      ? metadata.symbol
-      : "ZTG") as SupportedCurrencyTag,
-  );
+  const imagePath = IOForeignAssetId.is(baseAssetId)
+    ? lookupAssetImagePath(baseAssetId.ForeignAsset)
+    : IOBaseAssetId.is(baseAssetId)
+      ? lookupAssetImagePath(baseAssetId.Ztg)
+      : "";
 
   return (
     <div className="w-full">
       <div>
         <div className="mb-7 flex items-center justify-center">
           <div className="flex items-center justify-center gap-2">
             <span>Your Balance: </span>
-            {currencyMetadata?.image && (
+            {imagePath && (
               <Image
                 width={20}
                 height={20}
-                src={currencyMetadata?.image}
+                src={imagePath}
                 alt="Currency token logo"
                 className="rounded-full"
               />
@@ -157,7 +158,7 @@ const BuyFullSetForm = ({
           </p>
           <p className="mb-7 text-center text-sm">
             <span className="text-sky-600">Price Per Set: </span>1{" "}
-            {currencyMetadata?.name}
+            {metadata?.name}
           </p>
         </div>
       </div>

lib/constants/chains.ts

@@ -6,12 +6,13 @@ import { ISubmittableResult } from "@polkadot/types/types";
 import { ZTG } from ".";
 import { calculateFreeBalance } from "lib/util/calc-free-balance";
 
-export type ChainName = "Rococo" | "Zeitgeist" | "Polkadot";
+export type ChainName = "Rococo" | "Zeitgeist" | "Polkadot" | "Moonbeam";
 
 export const CHAIN_IMAGES = {
   Rococo: "/currencies/rococo.png",
   Polkadot: "/currencies/dot.png",
   Zeitgeist: "/currencies/ztg.jpg",
+  Moonbeam: "/currencies/moonbeam.png",
 };
 
 interface Chain {

lib/constants/foreign-asset.ts

@@ -72,6 +72,14 @@ const PROD_FOREIGN_ASSET_METADATA: ForeignAssetMetadata = {
     tokenSymbol: "DOT",
     subsquidId: "DOT",
   },
+  1: {
+    originChain: "Moonbeam",
+    image: "/currencies/usdc.svg",
+    withdrawSupported: false,
+    coinGeckoId: "usd",
+    tokenSymbol: "USDC",
+    subsquidId: "USDC",
+  },
 };
 
 export const FOREIGN_ASSET_METADATA: ForeignAssetMetadata =

lib/constants/supported-currencies.ts

@@ -26,6 +26,13 @@ export const supportedCurrencies = [
     twColor: "polkadot",
     assetId: { ForeignAsset: 0 } as const,
   } satisfies CurrencyMetadata,
+  {
+    name: "USDC" as const,
+    description: "Create market with Moonbeam USDC.wh as the base asset.",
+    image: "/currencies/usdc.svg",
+    twColor: "usdc",
+    assetId: { ForeignAsset: 1 } as const,
+  } satisfies CurrencyMetadata,
 ] as const;
 
 export type SupportedCurrencyTag = Unpacked<

lib/state/market-creation/constants/currency.ts

@@ -8,4 +8,5 @@ import { SupportedCurrencyTag } from "lib/constants/supported-currencies";
 export const minBaseLiquidity: Record<SupportedCurrencyTag, number> = {
   ZTG: 200,
   DOT: 10,
+  USDC: 50,
 };

lib/state/market-creation/types/validation.ts

@@ -10,7 +10,10 @@ import {
 import { useChainTime } from "lib/state/chaintime";
 import { isNaN, isNumber } from "lodash-es";
 import * as z from "zod";
-import { SupportedCurrencyTag } from "../../../constants/supported-currencies";
+import {
+  SupportedCurrencyTag,
+  supportedCurrencies,
+} from "../../../constants/supported-currencies";
 import { minBaseLiquidity } from "../constants/currency";
 import { MarketFormData } from "./form";
 import { timelineAsBlocks } from "./timeline";
@@ -169,11 +172,8 @@ export const useMarketCreationFormValidator = (
  * Zod Schemas for individual form fields.
  * -------------
  */
-
-export const IOCurrency = z.enum<SupportedCurrencyTag, ["ZTG", "DOT"]>([
-  "ZTG",
-  "DOT",
-]);
+const supportedSymbols = supportedCurrencies.map((currency) => currency.name);
+export const IOCurrency = z.enum<SupportedCurrencyTag, any>(supportedSymbols);
 
 export const IOQuestion = z
   .string()

tailwind.config.js

@@ -272,6 +272,7 @@ module.exports = {
         "provincial-pink": "#FEF2F2",
         mariner: "#3056D3",
         polkadot: "rgb(230, 0, 122)",
+        usdc: "#2775ca",
         platinum: "#DFE0E6",
         powderblue: "#ECFAFF",
         discord: "#5364E6",