update cosmos-kit and starship

components/card.tsx

@@ -0,0 +1,115 @@
+import { useChain } from "@cosmos-kit/react";
+import {
+  Box,
+  GridItem,
+  Icon,
+  Stack,
+  useColorModeValue,
+} from "@chakra-ui/react";
+import { MouseEventHandler, useEffect } from "react";
+import { FiAlertTriangle } from "react-icons/fi";
+import {
+  Astronaut,
+  Error,
+  Connected,
+  ConnectedShowAddress,
+  ConnectedUserInfo,
+  Connecting,
+  ConnectStatusWarn,
+  CopyAddressBtn,
+  Disconnected,
+  NotExist,
+  Rejected,
+  RejectedWarn,
+  WalletConnectComponent,
+} from ".";
+
+export const WalletCardSection = ({ chainName }: { chainName: string }) => {
+  const { connect, openView, status, username, address, message, wallet } =
+    useChain(chainName);
+
+  // Events
+  const onClickConnect: MouseEventHandler = async (e) => {
+    e.preventDefault();
+    await connect();
+  };
+
+  const onClickOpenView: MouseEventHandler = (e) => {
+    e.preventDefault();
+    openView();
+  };
+
+  // Components
+  const connectWalletButton = (
+    <WalletConnectComponent
+      walletStatus={status}
+      disconnect={
+        <Disconnected buttonText="Connect Wallet" onClick={onClickConnect} />
+      }
+      connecting={<Connecting />}
+      connected={
+        <Connected buttonText={"My Wallet"} onClick={onClickOpenView} />
+      }
+      rejected={<Rejected buttonText="Reconnect" onClick={onClickConnect} />}
+      error={<Error buttonText="Change Wallet" onClick={onClickOpenView} />}
+      notExist={
+        <NotExist buttonText="Install Wallet" onClick={onClickOpenView} />
+      }
+    />
+  );
+
+  const connectWalletWarn = (
+    <ConnectStatusWarn
+      walletStatus={status}
+      rejected={
+        <RejectedWarn
+          icon={<Icon as={FiAlertTriangle} mt={1} />}
+          wordOfWarning={`${wallet?.prettyName}: ${message}`}
+        />
+      }
+      error={
+        <RejectedWarn
+          icon={<Icon as={FiAlertTriangle} mt={1} />}
+          wordOfWarning={`${wallet?.prettyName}: ${message}`}
+        />
+      }
+    />
+  );
+
+  const userInfo = username && (
+    <ConnectedUserInfo username={username} icon={<Astronaut />} />
+  );
+  const addressBtn = (
+    <CopyAddressBtn
+      walletStatus={status}
+      connected={<ConnectedShowAddress address={address} isLoading={false} />}
+    />
+  );
+
+  return (
+    <>
+      {connectWalletWarn && <GridItem>{connectWalletWarn}</GridItem>}
+      <GridItem px={6}>
+        <Stack
+          justifyContent="center"
+          alignItems="center"
+          borderRadius="lg"
+          bg={useColorModeValue("white", "blackAlpha.400")}
+          boxShadow={useColorModeValue(
+            "0 0 2px #dfdfdf, 0 0 6px -2px #d3d3d3",
+            "0 0 2px #363636, 0 0 8px -2px #4f4f4f"
+          )}
+          spacing={4}
+          px={4}
+          py={{ base: 6, md: 12 }}
+        >
+          {userInfo}
+          {addressBtn}
+          <Box w="full" maxW={{ base: 52, md: 64 }}>
+            {connectWalletButton}
+          </Box>
+        </Stack>
+      </GridItem>
+    </>
+  );
+};

components/index.tsx

@@ -0,0 +1,4 @@
+export * from "./types";
+export * from "./react";
+export * from "./wallet";
+export * from "./card";

components/react/address-card.tsx

@@ -0,0 +1,190 @@
+import {
+  Box,
+  Button,
+  Icon,
+  Text,
+  useClipboard,
+  useColorMode,
+  Image,
+} from "@chakra-ui/react";
+import { WalletStatus } from "@cosmos-kit/core";
+import { FaCheckCircle } from "react-icons/fa";
+import { FiCopy } from "react-icons/fi";
+import React, { ReactNode, useEffect, useState } from "react";
+
+import { CopyAddressType } from "../types";
+import { handleChangeColorModeValue } from "./handleChangeColor";
+
+const SIZES = {
+  lg: {
+    height: 12,
+    walletImageSize: 7,
+    icon: 5,
+    fontSize: "md",
+  },
+  md: {
+    height: 10,
+    walletImageSize: 6,
+    icon: 4,
+    fontSize: "sm",
+  },
+  sm: {
+    height: 7,
+    walletImageSize: 5,
+    icon: 3.5,
+    fontSize: "sm",
+  },
+};
+
+export function stringTruncateFromCenter(str: string, maxLength: number) {
+  const midChar = "…"; // character to insert into the center of the result
+
+  if (str.length <= maxLength) return str;
+
+  // length of beginning part
+  const left = Math.ceil(maxLength / 2);
+
+  // start index of ending part
+  const right = str.length - Math.floor(maxLength / 2) + 1;
+
+  return str.substring(0, left) + midChar + str.substring(right);
+}
+
+export const ConnectedShowAddress = ({
+  address,
+  walletIcon,
+  isLoading,
+  isRound,
+  size = "md",
+  maxDisplayLength,
+}: CopyAddressType) => {
+  const { hasCopied, onCopy } = useClipboard(address ? address : "");
+  const [displayAddress, setDisplayAddress] = useState("");
+  const { colorMode } = useColorMode();
+  const defaultMaxLength = {
+    lg: 14,
+    md: 16,
+    sm: 18,
+  };
+
+  useEffect(() => {
+    if (!address) setDisplayAddress("address not identified yet");
+    if (address && maxDisplayLength)
+      setDisplayAddress(stringTruncateFromCenter(address, maxDisplayLength));
+    if (address && !maxDisplayLength)
+      setDisplayAddress(
+        stringTruncateFromCenter(
+          address,
+          defaultMaxLength[size as keyof typeof defaultMaxLength]
+        )
+      );
+  }, [address]);
+
+  return (
+    <Button
+      title={address}
+      variant="unstyled"
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
+      borderRadius={isRound ? "full" : "lg"}
+      border="1px solid"
+      borderColor={handleChangeColorModeValue(
+        colorMode,
+        "gray.200",
+        "whiteAlpha.300"
+      )}
+      w="full"
+      h={SIZES[size as keyof typeof SIZES].height}
+      minH="fit-content"
+      pl={2}
+      pr={2}
+      color={handleChangeColorModeValue(
+        colorMode,
+        "gray.700",
+        "whiteAlpha.600"
+      )}
+      transition="all .3s ease-in-out"
+      isDisabled={!address && true}
+      isLoading={isLoading}
+      _hover={{
+        bg: "rgba(142, 142, 142, 0.05)",
+      }}
+      _focus={{
+        outline: "none",
+      }}
+      _disabled={{
+        opacity: 0.6,
+        cursor: "not-allowed",
+        borderColor: "rgba(142, 142, 142, 0.1)",
+        _hover: {
+          bg: "transparent",
+        },
+        _active: {
+          outline: "none",
+        },
+        _focus: {
+          outline: "none",
+        },
+      }}
+      onClick={onCopy}
+    >
+      {address && walletIcon && (
+        <Box
+          borderRadius="full"
+          w="full"
+          h="full"
+          minW={SIZES[size as keyof typeof SIZES].walletImageSize}
+          minH={SIZES[size as keyof typeof SIZES].walletImageSize}
+          maxW={SIZES[size as keyof typeof SIZES].walletImageSize}
+          maxH={SIZES[size as keyof typeof SIZES].walletImageSize}
+          mr={2}
+          opacity={0.85}
+        >
+          <Image alt={displayAddress} src={walletIcon} />
+        </Box>
+      )}
+      <Text
+        fontSize={SIZES[size as keyof typeof SIZES].fontSize}
+        fontWeight="normal"
+        letterSpacing="0.4px"
+        opacity={0.75}
+      >
+        {displayAddress}
+      </Text>
+      {address && (
+        <Icon
+          as={hasCopied ? FaCheckCircle : FiCopy}
+          w={SIZES[size as keyof typeof SIZES].icon}
+          h={SIZES[size as keyof typeof SIZES].icon}
+          ml={2}
+          opacity={0.9}
+          color={
+            hasCopied
+              ? "green.400"
+              : handleChangeColorModeValue(
+                  colorMode,
+                  "gray.500",
+                  "whiteAlpha.400"
+                )
+          }
+        />
+      )}
+    </Button>
+  );
+};
+
+export const CopyAddressBtn = ({
+  walletStatus,
+  connected,
+}: {
+  walletStatus: WalletStatus;
+  connected: ReactNode;
+}) => {
+  switch (walletStatus) {
+    case "Connected":
+      return <>{connected}</>;
+    default:
+      return <></>;
+  }
+};