Move icons into the lib folder so they can be shared accross modules

app/components/CarbonBalancesCard/index.tsx

@@ -1,18 +1,20 @@
 import { Spinner, Text } from "@klimadao/lib/components";
 import { urls } from "@klimadao/lib/constants";
+import {
+  BCTIcon,
+  C3TIcon,
+  KLIMAIcon,
+  MCO2Icon,
+  NBOIcon,
+  NCTIcon,
+  TCO2Icon,
+  UBOIcon,
+  USDCIcon,
+} from "@klimadao/lib/resources";
 import { Trans } from "@lingui/macro";
 import AccountBalanceWalletIcon from "@mui/icons-material/AccountBalanceWallet";
 import OpenInNewIcon from "@mui/icons-material/OpenInNew";
 import Image, { StaticImageData } from "next/image";
-import BCT from "public/icons/BCT.png";
-import C3T from "public/icons/C3T.png";
-import KLIMA from "public/icons/KLIMA.png";
-import MCO2 from "public/icons/MCO2.png";
-import NBO from "public/icons/NBO.png";
-import NCT from "public/icons/NCT.png";
-import TCO2 from "public/icons/TCO2.png";
-import UBO from "public/icons/UBO.png";
-import USDC from "public/icons/USDC.png";
 import { useSelector } from "react-redux";
 import {
   selectBalances,
@@ -22,17 +24,17 @@ import {
 import * as styles from "./styles";
 
 export const iconMap = {
-  ubo: UBO,
-  nbo: NBO,
-  bct: BCT,
-  nct: NCT,
-  tco2: TCO2,
-  c3t: C3T,
-  klima: KLIMA,
-  sklima: KLIMA,
-  wsklima: KLIMA,
-  usdc: USDC,
-  mco2: MCO2,
+  ubo: UBOIcon,
+  nbo: NBOIcon,
+  bct: BCTIcon,
+  nct: NCTIcon,
+  tco2: TCO2Icon,
+  c3t: C3TIcon,
+  klima: KLIMAIcon,
+  sklima: KLIMAIcon,
+  wsklima: KLIMAIcon,
+  usdc: USDCIcon,
+  mco2: MCO2Icon,
 };
 
 /**
@@ -106,7 +108,7 @@ export const CarbonBalancesCard = (props: {
     if (!projectTokens[addr]) return;
     const { symbol, quantity } = projectTokens[addr];
     const formattedBalance = formatTonnes({ amount: quantity, locale });
-    const icon = symbol.startsWith("TCO2-") ? TCO2 : C3T;
+    const icon = symbol.startsWith("TCO2-") ? TCO2Icon : C3TIcon;
     assetInfo.push({
       assetName: symbol,
       balance: formattedBalance,

app/components/views/ChooseBond/index.tsx

@@ -1,8 +1,17 @@
 import { cx } from "@emotion/css";
 import { Text } from "@klimadao/lib/components";
 import { Bond } from "@klimadao/lib/constants";
+import {
+  BCTIcon,
+  KLIMABCTLPIcon,
+  KLIMAMCO2LPIcon,
+  KLIMAUSDCLPIcon,
+  MCO2Icon,
+  NBOIcon,
+  UBOIcon,
+} from "@klimadao/lib/resources";
 import { trimWithPlaceholder } from "@klimadao/lib/utils";
-import { t, Trans } from "@lingui/macro";
+import { Trans, t } from "@lingui/macro";
 import SpaOutlined from "@mui/icons-material/SpaOutlined";
 import { calcBondDetails, getIsInverse } from "actions/bonds";
 import { DisclamerModal } from "components/DisclaimerModal";
@@ -53,14 +62,14 @@ export const useBond = (bond: Bond) => {
     discount: bondState?.bondDiscount,
     disabled: disabledBonds[bond],
     icon: {
-      ubo: "/icons/UBO.png",
-      nbo: "/icons/NBO.png",
-      mco2: "/icons/MCO2.png",
-      bct: "/icons/BCT.png",
-      klima_bct_lp: "/icons/BCT-KLIMA-LP.png",
-      klima_usdc_lp: "/icons/KLIMA-USDC-LP.png",
-      klima_mco2_lp: "/icons/KLIMA-MCO2-LP.png",
-      inverse_usdc: "/icons/KLIMA-USDC-LP.png",
+      ubo: UBOIcon,
+      nbo: NBOIcon,
+      mco2: MCO2Icon,
+      bct: BCTIcon,
+      klima_bct_lp: KLIMABCTLPIcon,
+      klima_usdc_lp: KLIMAUSDCLPIcon,
+      klima_mco2_lp: KLIMAMCO2LPIcon,
+      inverse_usdc: KLIMAUSDCLPIcon,
       // future bond names go here
     }[bond],
     name: {

app/components/views/Offset/index.tsx

@@ -15,6 +15,7 @@ import {
   poolTokens,
   urls,
 } from "@klimadao/lib/constants";
+import { C3TIcon, FiatIcon, TCO2Icon } from "@klimadao/lib/resources";
 import { formatUnits, getTokenDecimals, safeAdd } from "@klimadao/lib/utils";
 import { Trans, t } from "@lingui/macro";
 import GppMaybeOutlined from "@mui/icons-material/GppMaybeOutlined";
@@ -41,9 +42,6 @@ import { isAddress, parseUnits } from "ethers-v6";
 import { tokenInfo } from "lib/getTokenInfo";
 import { useOffsetParams } from "lib/hooks/useOffsetParams";
 import { useTypedSelector } from "lib/hooks/useTypedSelector";
-import C3T from "public/icons/C3T.png";
-import Fiat from "public/icons/Fiat.png";
-import TCO2 from "public/icons/TCO2.png";
 import { ChangeEvent, useEffect, useRef, useState } from "react";
 import { useSelector } from "react-redux";
 import { useAppDispatch } from "state";
@@ -618,7 +616,7 @@ export const Offset = (props: Props) => {
   paymentMethodItems.unshift({
     description: "",
     disabled: false,
-    icon: Fiat,
+    icon: FiatIcon,
     key: "fiat",
     label: "Credit Card",
   });
@@ -644,7 +642,7 @@ export const Offset = (props: Props) => {
         disabled: true,
         description: "",
         key: "unknown",
-        icon: TCO2,
+        icon: TCO2Icon,
         label: "unknown",
       };
     }
@@ -654,7 +652,7 @@ export const Offset = (props: Props) => {
       disabled: false,
       description: "",
       key: token.address,
-      icon: isTCO2 ? TCO2 : C3T,
+      icon: isTCO2 ? TCO2Icon : C3TIcon,
       label: token.symbol,
     };
   });
@@ -890,7 +888,7 @@ export const Offset = (props: Props) => {
             icon={
               retirementTokenItems.find(
                 (t) => t.key === selectedRetirementToken
-              )?.icon ?? TCO2 // just to make ts happy
+              )?.icon ?? TCO2Icon // just to make ts happy
             }
             name={selectedRetirementToken}
             labelAlignment="start"
@@ -969,7 +967,7 @@ export const Offset = (props: Props) => {
               ? tokenInfo[paymentMethod].icon
               : retirementTokenItems.find(
                   (t) => t.key === selectedRetirementToken
-                )?.icon ?? TCO2
+                )?.icon ?? TCO2Icon
           }
           spenderAddress={addresses["mainnet"].retirementAggregatorV2}
           value={!isRetiringOwnCarbon ? cost.toString() : quantity}

app/components/views/Redeem/index.tsx

@@ -5,6 +5,7 @@ import {
   TextInfoTooltip,
 } from "@klimadao/lib/components";
 import { addresses } from "@klimadao/lib/constants";
+import { C3TIcon, TCO2Icon } from "@klimadao/lib/resources";
 import { formatUnits, getTokenDecimals, safeAdd } from "@klimadao/lib/utils";
 import { Trans, t } from "@lingui/macro";
 import InfoOutlined from "@mui/icons-material/InfoOutlined";
@@ -35,8 +36,6 @@ import {
   useRedeemParams,
 } from "lib/hooks/useRedeemParams";
 import { useTypedSelector } from "lib/hooks/useTypedSelector";
-import C3T from "public/icons/C3T.png";
-import TCO2 from "public/icons/TCO2.png";
 import { ChangeEvent, useEffect, useRef, useState } from "react";
 import { useSelector } from "react-redux";
 import { useAppDispatch } from "state";
@@ -358,8 +357,8 @@ export const Redeem = (props: Props) => {
   });
 
   const getProjectTokenIcon = () => {
-    if (pool === "ubo" || pool === "nbo") return C3T;
-    return TCO2;
+    if (pool === "ubo" || pool === "nbo") return C3TIcon;
+    return TCO2Icon;
   };
 
   return (

app/lib/getTokenInfo.ts

@@ -1,16 +1,18 @@
 import { AllowancesToken } from "@klimadao/lib/types/allowances";
 import { StaticImageData } from "next/image";
 
-import KlimaBCTLP from "public/icons/BCT-KLIMA-LP.png";
-import BCT from "public/icons/BCT.png";
-import KlimaMCO2LP from "public/icons/KLIMA-MCO2-LP.png";
-import KlimaUsdcLP from "public/icons/KLIMA-USDC-LP.png";
-import KLIMA from "public/icons/KLIMA.png";
-import MCO2 from "public/icons/MCO2.png";
-import NBO from "public/icons/NBO.png";
-import NCT from "public/icons/NCT.png";
-import UBO from "public/icons/UBO.png";
-import USDC from "public/icons/USDC.png";
+import {
+  BCTIcon,
+  KLIMABCTLPIcon,
+  KLIMAIcon,
+  KLIMAMCO2LPIcon,
+  KLIMAUSDCLPIcon,
+  MCO2Icon,
+  NBOIcon,
+  NCTIcon,
+  UBOIcon,
+  USDCIcon,
+} from "@klimadao/lib/resources";
 
 type TokenInfoMap = {
   [key in AllowancesToken]: {
@@ -21,25 +23,29 @@ type TokenInfoMap = {
 };
 
 export const tokenInfo: TokenInfoMap = {
-  ubo: { key: "ubo", icon: UBO, label: "UBO" },
-  nbo: { key: "nbo", icon: NBO, label: "NBO" },
-  bct: { key: "bct", icon: BCT, label: "BCT" },
-  nct: { key: "nct", icon: NCT, label: "NCT" },
-  mco2: { key: "mco2", icon: MCO2, label: "MCO2" },
-  usdc: { key: "usdc", icon: USDC, label: "USDC" },
-  klima: { key: "klima", icon: KLIMA, label: "KLIMA" },
-  sklima: { key: "sklima", icon: KLIMA, label: "sKLIMA" },
-  wsklima: { key: "wsklima", icon: KLIMA, label: "wsKLIMA" },
-  pklima: { key: "pklima", icon: KLIMA, label: "pklima" },
+  ubo: { key: "ubo", icon: UBOIcon, label: "UBO" },
+  nbo: { key: "nbo", icon: NBOIcon, label: "NBO" },
+  bct: { key: "bct", icon: BCTIcon, label: "BCT" },
+  nct: { key: "nct", icon: NCTIcon, label: "NCT" },
+  mco2: { key: "mco2", icon: MCO2Icon, label: "MCO2" },
+  usdc: { key: "usdc", icon: USDCIcon, label: "USDC" },
+  klima: { key: "klima", icon: KLIMAIcon, label: "KLIMA" },
+  sklima: { key: "sklima", icon: KLIMAIcon, label: "sKLIMA" },
+  wsklima: { key: "wsklima", icon: KLIMAIcon, label: "wsKLIMA" },
+  pklima: { key: "pklima", icon: KLIMAIcon, label: "pklima" },
   klimaUsdcLp: {
     key: "klimaUsdcLp",
-    icon: KlimaUsdcLP,
+    icon: KLIMAUSDCLPIcon,
     label: "KLIMA/USDC LP",
   },
-  klimaBctLp: { key: "klimaBctLp", icon: KlimaBCTLP, label: "KLIMA/BCT LP" },
+  klimaBctLp: {
+    key: "klimaBctLp",
+    icon: KLIMABCTLPIcon,
+    label: "KLIMA/BCT LP",
+  },
   klimaMco2Lp: {
     key: "klimaMco2Lp",
-    icon: KlimaMCO2LP,
+    icon: KLIMAMCO2LPIcon,
     label: "KLIMA/MCO2 LP",
   },
 };

carbon/lib/protocols.tsx

@@ -1,6 +1,5 @@
-import c3tIcon from "@klimadao/app/public/icons/C3T.png";
-import mco2Icon from "@klimadao/app/public/icons/MCO2.png";
-import tco2Icon from "@klimadao/app/public/icons/TCO2.png";
+import { C3TIcon, MCO2Icon, TCO2Icon } from "@klimadao/lib/resources";
+
 import { t } from "@lingui/macro";
 
 import OverviewCardIcon from "components/Graphics/OverviewCardIcon";
@@ -16,9 +15,9 @@ export function getProtocolFullName(protocol: Protocol) {
 
 /** Returns an Icon representing the given protocol */
 export function getProtocolIcon(protocol: Protocol) {
-  let icon: typeof c3tIcon = c3tIcon;
-  if (protocol == "tco2") icon = tco2Icon;
-  if (protocol == "mco2") icon = mco2Icon;
+  let icon: typeof C3TIcon = C3TIcon;
+  if (protocol == "tco2") icon = TCO2Icon;
+  if (protocol == "mco2") icon = MCO2Icon;
 
   return <OverviewCardIcon icon={icon} alt={protocol} />;
 }

carbon/lib/tokens.tsx

@@ -1,8 +1,10 @@
-import bctIcon from "@klimadao/app/public/icons/BCT.png";
-import mco2Icon from "@klimadao/app/public/icons/MCO2.png";
-import nboIcon from "@klimadao/app/public/icons/NBO.png";
-import nctIcon from "@klimadao/app/public/icons/NCT.png";
-import uboIcon from "@klimadao/app/public/icons/UBO.png";
+import {
+  BCTIcon,
+  MCO2Icon,
+  NBOIcon,
+  NCTIcon,
+  UBOIcon,
+} from "@klimadao/lib/resources";
 import { t } from "@lingui/macro";
 import OverviewCardIcon from "components/Graphics/OverviewCardIcon";
 import { queryTokenInfo } from "./charts/queries";
@@ -20,11 +22,11 @@ export function getTokenFullName(token: Token) {
 
 /** Returns an Icon representing the given Coin */
 export function getTokenIcon(token: Token) {
-  let icon: typeof bctIcon = bctIcon;
-  if (token == "nct") icon = nctIcon;
-  if (token == "mco2") icon = mco2Icon;
-  if (token == "ubo") icon = uboIcon;
-  if (token == "nbo") icon = nboIcon;
+  let icon: typeof BCTIcon = BCTIcon;
+  if (token == "nct") icon = NCTIcon;
+  if (token == "mco2") icon = MCO2Icon;
+  if (token == "ubo") icon = UBOIcon;
+  if (token == "nbo") icon = NBOIcon;
   return <OverviewCardIcon icon={icon} alt={token} />;
 }
 

lib/package.json

@@ -25,8 +25,10 @@
     "@types/react": "^18.2.0",
     "@typescript-eslint/eslint-plugin": "^5.59.1",
     "@typescript-eslint/parser": "^5.59.1",
+    "copyfiles": "^2.4.1",
     "eslint": "^8.39.0",
     "eslint-plugin-react": "^7.32.2",
+    "tsc-watch": "^6.0.4",
     "typescript": "^4.9.5"
   },
   "engines": {
@@ -40,11 +42,13 @@
     "./utils": "./out/utils/index.js",
     "./hooks": "./out/hooks/index.js",
     "./theme/*": "./theme/*",
+    "./resources": "./out/resources/index.js",
     "./abi/*": "./abi/*"
   },
   "scripts": {
-    "dev": "tsc --watch",
-    "build": "npm run lint && tsc",
+    "copyfiles": "copyfiles **/*.png out",
+    "dev": "tsc-watch --onSuccess \"npm run copyfiles\"",
+    "build": "npm run lint && tsc && npm run copyfiles",
     "lint": "eslint ."
   }
 }

lib/resources/declaration.d.ts

@@ -0,0 +1 @@
+declare module "*.png";

lib/resources/icons/index.ts

@@ -0,0 +1,13 @@
+export { default as KLIMABCTLPIcon } from "./BCT-KLIMA-LP.png";
+export { default as BCTIcon } from "./BCT.png";
+export { default as C3TIcon } from "./C3T.png";
+export { default as FiatIcon } from "./Fiat.png";
+export { default as KLIMAMCO2LPIcon } from "./KLIMA-MCO2-LP.png";
+export { default as KLIMAUSDCLPIcon } from "./KLIMA-USDC-LP.png";
+export { default as KLIMAIcon } from "./KLIMA.png";
+export { default as MCO2Icon } from "./MCO2.png";
+export { default as NBOIcon } from "./NBO.png";
+export { default as NCTIcon } from "./NCT.png";
+export { default as TCO2Icon } from "./TCO2.png";
+export { default as UBOIcon } from "./UBO.png";
+export { default as USDCIcon } from "./USDC.png";

lib/resources/index.ts

@@ -0,0 +1 @@
+export * from "./icons";