feat(components): init setup icon

CHANGELOG.md

@@ -54,6 +54,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#216](https://github.com/alleslabs/celatone-frontend/pull/216) Change icon to Alles Labs icon set
 - [#227](https://github.com/alleslabs/celatone-frontend/pull/227) Refactor directory structure and components e.g. various tables
 - [#207](https://github.com/alleslabs/celatone-frontend/pull/207) Add cta to submit public project in list page
 - [#206](https://github.com/alleslabs/celatone-frontend/pull/206) Refactor copy functionality into one component

src/lib/app-fns/tx/clearAdmin.tsx

@@ -1,14 +1,13 @@
-import { Icon } from "@chakra-ui/react";
 import type {
   SigningCosmWasmClient,
   ChangeAdminResult,
 } from "@cosmjs/cosmwasm-stargate";
 import type { StdFee } from "@cosmjs/stargate";
 import { pipe } from "@rx-stream/pipe";
-import { MdCheckCircle } from "react-icons/md";
 import type { Observable } from "rxjs";
 
 import { ExplorerLink } from "lib/components/ExplorerLink";
+import { CustomIcon } from "lib/components/icon";
 import { AmpEvent, AmpTrack } from "lib/services/amplitude";
 import { TxStreamPhase } from "lib/types";
 import type { TxResultRendering, ContractAddr, HumanAddr } from "lib/types";
@@ -62,9 +61,13 @@ export const clearAdminTx = ({
           },
         ],
         receiptInfo: {
-          header: "Transaction Complete",
+          header: "Transaction Completed",
           headerIcon: (
-            <Icon as={MdCheckCircle} color="success.main" boxSize={6} />
+            <CustomIcon
+              name="check-circle-solid"
+              color="success.main"
+              boxSize="5"
+            />
           ),
         },
       } as TxResultRendering;

src/lib/app-fns/tx/common/catchTxError.tsx

@@ -1,9 +1,8 @@
-import { Icon } from "@chakra-ui/react";
-import { IoIosWarning } from "react-icons/io";
 import type { OperatorFunction } from "rxjs";
 import { catchError } from "rxjs";
 
 import { ExplorerLink } from "lib/components/ExplorerLink";
+import { CustomIcon } from "lib/components/icon";
 import { AmpEvent, AmpTrack } from "lib/services/amplitude";
 import type { TxResultRendering } from "lib/types";
 import { TxStreamPhase } from "lib/types";
@@ -50,7 +49,11 @@ export const catchTxError = (
       receiptInfo: {
         ...getReceiptInfo(error),
         headerIcon: (
-          <Icon as={IoIosWarning} boxSize="24px" color="error.light" />
+          <CustomIcon
+            name="alert-circle-solid"
+            color="error.light"
+            boxSize="5"
+          />
         ),
       },
       receipts: getTxHashReceipt(txHash),

src/lib/app-fns/tx/execute.tsx

@@ -1,14 +1,13 @@
-import { Icon } from "@chakra-ui/react";
 import type {
   ExecuteResult,
   SigningCosmWasmClient,
 } from "@cosmjs/cosmwasm-stargate";
 import type { Coin, StdFee } from "@cosmjs/stargate";
 import { pipe } from "@rx-stream/pipe";
-import { MdCheckCircle } from "react-icons/md";
 import type { Observable } from "rxjs";
 
 import { ExplorerLink } from "lib/components/ExplorerLink";
+import { CustomIcon } from "lib/components/icon";
 import { AmpEvent, AmpTrack } from "lib/services/amplitude";
 import type { Activity } from "lib/stores/contract";
 import type { ContractAddr, HumanAddr, TxResultRendering } from "lib/types";
@@ -80,9 +79,13 @@ export const executeContractTx = ({
           },
         ],
         receiptInfo: {
-          header: "Transaction Complete",
+          header: "Transaction Completed",
           headerIcon: (
-            <Icon as={MdCheckCircle} color="success.main" boxSize={6} />
+            <CustomIcon
+              name="check-circle-solid"
+              color="success.main"
+              boxSize="5"
+            />
           ),
         },
       } as TxResultRendering;

src/lib/app-fns/tx/migrate.tsx

@@ -1,14 +1,13 @@
-import { Icon } from "@chakra-ui/react";
 import type {
   MigrateResult,
   SigningCosmWasmClient,
 } from "@cosmjs/cosmwasm-stargate";
 import type { StdFee } from "@cosmjs/stargate";
 import { pipe } from "@rx-stream/pipe";
-import { MdCheckCircle } from "react-icons/md";
 import type { Observable } from "rxjs";
 
 import { ExplorerLink } from "lib/components/ExplorerLink";
+import { CustomIcon } from "lib/components/icon";
 import { AmpEvent, AmpTrack } from "lib/services/amplitude";
 import type { ContractAddr, HumanAddr, TxResultRendering } from "lib/types";
 import { TxStreamPhase } from "lib/types";
@@ -76,7 +75,7 @@ export const migrateContractTx = ({
         receiptInfo: {
           header: "Migration Completed",
           headerIcon: (
-            <Icon as={MdCheckCircle} fontSize="24px" color="success.main" />
+            <CustomIcon name="check-circle-solid" color="success.main" />
           ),
         },
         actionVariant: "migrate",

src/lib/app-fns/tx/resend.tsx

@@ -1,12 +1,12 @@
-import { Icon, Text } from "@chakra-ui/react";
+import { Text } from "@chakra-ui/react";
 import type { SigningCosmWasmClient } from "@cosmjs/cosmwasm-stargate";
 import type { EncodeObject } from "@cosmjs/proto-signing";
 import type { StdFee } from "@cosmjs/stargate";
 import { pipe } from "@rx-stream/pipe";
-import { MdCloudUpload } from "react-icons/md";
 import type { Observable } from "rxjs";
 
 import { ExplorerLink } from "lib/components/ExplorerLink";
+import { CustomIcon } from "lib/components/icon";
 import { AmpEvent, AmpTrack } from "lib/services/amplitude";
 import type { HumanAddr, TxResultRendering } from "lib/types";
 import { TxStreamPhase } from "lib/types";
@@ -65,7 +65,11 @@ export const resendTx = ({
             </Text>
           ),
           headerIcon: (
-            <Icon as={MdCloudUpload} fontSize="24px" color="text.dark" />
+            <CustomIcon
+              name="check-circle-solid"
+              color="success.main"
+              boxSize="5"
+            />
           ),
         },
         actionVariant: "resend",

src/lib/app-fns/tx/updateAdmin.tsx

@@ -1,14 +1,13 @@
-import { Icon } from "@chakra-ui/react";
 import type {
   ExecuteResult,
   SigningCosmWasmClient,
 } from "@cosmjs/cosmwasm-stargate";
 import type { StdFee } from "@cosmjs/stargate";
 import { pipe } from "@rx-stream/pipe";
-import { MdCheckCircle } from "react-icons/md";
 import type { Observable } from "rxjs";
 
 import { ExplorerLink } from "lib/components/ExplorerLink";
+import { CustomIcon } from "lib/components/icon";
 import { AmpEvent, AmpTrack } from "lib/services/amplitude";
 import type {
   Addr,
@@ -70,7 +69,7 @@ export const updateAdminTx = ({
         receiptInfo: {
           header: "Update Admin Complete",
           headerIcon: (
-            <Icon as={MdCheckCircle} color="success.main" boxSize={6} />
+            <CustomIcon name="check-circle-solid" color="success.main" />
           ),
         },
         actionVariant: "update-admin",

src/lib/app-fns/tx/upload.tsx

@@ -1,14 +1,13 @@
-import { Icon } from "@chakra-ui/react";
 import type {
   SigningCosmWasmClient,
   UploadResult,
 } from "@cosmjs/cosmwasm-stargate";
 import type { StdFee } from "@cosmjs/stargate";
 import { pipe } from "@rx-stream/pipe";
-import { MdCloudUpload } from "react-icons/md";
 import type { Observable } from "rxjs";
 
 import { ExplorerLink } from "lib/components/ExplorerLink";
+import { CustomIcon } from "lib/components/icon";
 import { AmpEvent, AmpTrack } from "lib/services/amplitude";
 import { TxStreamPhase } from "lib/types";
 import type { HumanAddr, TxResultRendering } from "lib/types";
@@ -87,9 +86,7 @@ export const uploadContractTx = ({
               {isMigrate ? "migrate" : "instantiate"} your code now?
             </>
           ),
-          headerIcon: (
-            <Icon as={MdCloudUpload} fontSize="24px" color="text.dark" />
-          ),
+          headerIcon: <CustomIcon name="upload-cloud" boxSize="5" />,
         },
         actionVariant: isMigrate ? "upload-migrate" : "upload",
       } as TxResultRendering;

src/lib/components/ButtonCard.tsx

@@ -1,7 +1,8 @@
 import type { FlexProps } from "@chakra-ui/react";
-import { Flex, Heading, Icon, Stack, Text } from "@chakra-ui/react";
+import { Flex, Heading, Stack, Text } from "@chakra-ui/react";
 import type { ReactNode } from "react";
-import { MdChevronRight } from "react-icons/md";
+
+import { CustomIcon } from "./icon";
 
 interface ButtonCardProps extends FlexProps {
   title: string;
@@ -51,6 +52,6 @@ export const ButtonCard = ({
         description
       )}
     </Stack>
-    <Icon as={MdChevronRight} color="pebble.600" fontSize="28px" />
+    <CustomIcon name="chevron-right" />
   </Flex>
 );

src/lib/components/ConnectWalletAlert.tsx

@@ -1,21 +1,20 @@
 import {
   Alert,
-  AlertIcon,
   AlertTitle,
   AlertDescription,
   Flex,
   Box,
   Button,
-  Icon,
   Text,
 } from "@chakra-ui/react";
 import type { AlertProps } from "@chakra-ui/react";
 import { useWallet } from "@cosmos-kit/react";
 import type { MouseEventHandler } from "react";
-import { MdLink } from "react-icons/md";
 
 import { AmpEvent, AmpTrack } from "lib/services/amplitude";
 
+import { CustomIcon } from "./icon";
+
 interface ConnectWalletAlertProps extends AlertProps {
   title?: string;
   subtitle?: string;
@@ -42,15 +41,15 @@ export const ConnectWalletAlert = ({
       justifyContent="space-between"
       py="12px"
     >
-      <Flex>
-        <AlertIcon />
+      <Flex gap={2}>
+        <CustomIcon name="wallet-solid" color="honeydew.main" boxSize="4" />
         <Box>
           <AlertTitle>{title}</AlertTitle>
           <AlertDescription>{subtitle}</AlertDescription>
         </Box>
       </Flex>
       <Button variant="ghost-info" gap={2} onClick={onClickConnect}>
-        <Icon as={MdLink} boxSize={4} />
+        <CustomIcon name="connect" color="honeydew.main" />
         <Text color="honeydew.main">Connect Wallet</Text>
       </Button>
     </Alert>

src/lib/components/ContractSelectSection.tsx

@@ -1,9 +1,8 @@
-import { Button, Flex, Icon, Text } from "@chakra-ui/react";
+import { Button, Flex, Text } from "@chakra-ui/react";
 import { useQuery } from "@tanstack/react-query";
 import { observer } from "mobx-react-lite";
 import { useEffect, useMemo } from "react";
 import { useForm } from "react-hook-form";
-import { MdMode, MdOutlineBookmarkBorder } from "react-icons/md";
 
 import { useCelatoneApp, useLCDEndpoint, useMobile } from "lib/app-provider";
 import { useContractStore } from "lib/providers/store";
@@ -12,6 +11,7 @@ import type { ContractLocalInfo } from "lib/stores/contract";
 import type { Addr, ContractAddr, Option } from "lib/types";
 
 import { ExplorerLink } from "./ExplorerLink";
+import { CustomIcon } from "./icon";
 import { EditContractDetailsModal, SaveContractDetailsModal } from "./modal";
 import {
   SelectContractAdmin,
@@ -101,7 +101,7 @@ const ContractDetailsButton = ({
           variant="ghost-gray"
           float="right"
           size="sm"
-          leftIcon={<Icon as={MdMode} boxSize="5" />}
+          leftIcon={<CustomIcon name="edit" color="text.dark" />}
         >
           Edit
         </Button>
@@ -120,7 +120,7 @@ const ContractDetailsButton = ({
           variant="outline-gray"
           float="right"
           size="sm"
-          leftIcon={<Icon as={MdOutlineBookmarkBorder} boxSize="5" />}
+          leftIcon={<CustomIcon name="bookmark" color="text.dark" />}
         >
           Add To List
         </Button>

src/lib/components/ErrorMessageRender.tsx

@@ -1,6 +1,7 @@
 import type { FlexProps } from "@chakra-ui/react";
-import { Flex, Icon, Text } from "@chakra-ui/react";
-import { IoIosWarning } from "react-icons/io";
+import { Flex, Text } from "@chakra-ui/react";
+
+import { CustomIcon } from "./icon";
 
 interface ErrorMessageRenderProps extends FlexProps {
   error: string;
@@ -11,7 +12,7 @@ export const ErrorMessageRender = ({
   ...restProps
 }: ErrorMessageRenderProps) => (
   <Flex gap={2} {...restProps}>
-    <Icon as={IoIosWarning} boxSize={4} color="error.main" />
+    <CustomIcon name="alert-circle-solid" color="error.main" boxSize="3" />
     <Text variant="body3" color="error.main">
       {error}
     </Text>

src/lib/components/InputWithIcon.tsx

@@ -1,8 +1,9 @@
-import { SearchIcon } from "@chakra-ui/icons";
 import type { InputProps } from "@chakra-ui/react";
 import { Input, InputGroup, InputRightElement } from "@chakra-ui/react";
 import type { ChangeEvent } from "react";
 
+import { CustomIcon } from "./icon";
+
 interface InputWithIconProps {
   placeholder: string;
   value: string;
@@ -23,8 +24,8 @@ const InputWithIcon = ({
       onChange={onChange}
       size={size}
     />
-    <InputRightElement h="56px" alignItems="center">
-      <SearchIcon color="gray.600" />
+    <InputRightElement h="56px" alignItems="center" mr="1">
+      <CustomIcon name="search" />
     </InputRightElement>
   </InputGroup>
 );