granulize app components, fix wallet-modal

discoverdefiteam · May 15, 2023 · 274a2ca · 274a2ca
1 parent 5b2083b
commit 274a2ca
Show file tree

Hide file tree

Showing 88 changed files with 4,371 additions and 1,429 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -1,5 +1,5 @@
 # Use the official Node.js v14.x image as the base image
-FROM node:14
+FROM node:16
 
 # Set the working directory to /app
 WORKDIR /app

diff --git a/components/chain-wallet-card.tsx → ...ents/apps/dashboard/chain-wallet-card.tsx b/components/chain-wallet-card.tsx → ...ents/apps/dashboard/chain-wallet-card.tsx
@@ -1,65 +1,65 @@
-import { Box, Button, Heading, HStack } from "@chakra-ui/react";
-import { ChainName, WalletStatus } from "@cosmos-kit/core";
-import { useChain } from "@cosmos-kit/react";
-import { useEffect } from "react";
-import { ConnectedShowAddress } from "./react";
-
-export const ChainWalletCard = ({
-  chainName,
-  type = "address-on-page",
-  setGlobalStatus,
-}: {
-  chainName: ChainName;
-  type: string;
-  setGlobalStatus?: (status: WalletStatus) => void;
-}) => {
-  const { chain, status, address, openView } = useChain(chainName);
-  useEffect(() => {
-    if (status == "Connecting") {
-      setGlobalStatus?.(WalletStatus.Connecting);
-    } else if (status == "Connected") {
-      setGlobalStatus?.(WalletStatus.Connected);
-    } else {
-      setGlobalStatus?.(WalletStatus.Disconnected);
-    }
-  }, [status]);
-
-  switch (type) {
-    case "address-in-modal":
-      return (
-        <HStack spacing="24px">
-          <Heading size="xs" textTransform="uppercase" minW={150}>
-            {chain.pretty_name}
-          </Heading>
-          <Button
-            isLoading={status === "Connecting"}
-            colorScheme="teal"
-            size="sm"
-            marginTop={6}
-            marginBottom={2}
-            onClick={openView}
-          >
-            View Address
-          </Button>
-        </HStack>
-      );
-    case "address-on-page":
-      return (
-        <HStack spacing="24px">
-          <Heading size="xs" textTransform="uppercase" minW={150}>
-            {chain.pretty_name}
-          </Heading>
-          <Box width={"full"} maxW={260}>
-            <ConnectedShowAddress
-              address={address}
-              isLoading={status === "Connecting"}
-              isRound={true}
-              size={"sm"}
-            />
-          </Box>
-        </HStack>
-      );
-    default:
-      throw new Error("No such chain card type: " + type);
-  }
-};
+import { Box, Button, Heading, HStack } from "@chakra-ui/react";
+import { ChainName, WalletStatus } from "@cosmos-kit/core";
+import { useChain } from "@cosmos-kit/react";
+import { useEffect } from "react";
+import { ConnectedShowAddress } from "./react";
+
+export const ChainWalletCard = ({
+  chainName,
+  type = "address-on-page",
+  setGlobalStatus,
+}: {
+  chainName: ChainName;
+  type: string;
+  setGlobalStatus?: (status: WalletStatus) => void;
+}) => {
+  const { chain, status, address, openView } = useChain(chainName);
+  useEffect(() => {
+    if (status == "Connecting") {
+      setGlobalStatus?.(WalletStatus.Connecting);
+    } else if (status == "Connected") {
+      setGlobalStatus?.(WalletStatus.Connected);
+    } else {
+      setGlobalStatus?.(WalletStatus.Disconnected);
+    }
+  }, [status]);
+
+  switch (type) {
+    case "address-in-modal":
+      return (
+        <HStack spacing="24px">
+          <Heading size="xs" textTransform="uppercase" minW={150}>
+            {chain.pretty_name}
+          </Heading>
+          <Button
+            isLoading={status === "Connecting"}
+            colorScheme="purple"
+            size="sm"
+            marginTop={6}
+            marginBottom={2}
+            onClick={openView}
+          >
+            View Address
+          </Button>
+        </HStack>
+      );
+    case "address-on-page":
+      return (
+        <HStack spacing="24px">
+          <Heading size="xs" textTransform="uppercase" minW={150}>
+            {chain.pretty_name}
+          </Heading>
+          <Box width={"full"} maxW={260}>
+            <ConnectedShowAddress
+              address={address}
+              isLoading={status === "Connecting"}
+              isRound={true}
+              size={"sm"}
+            />
+          </Box>
+        </HStack>
+      );
+    default:
+      throw new Error("No such chain card type: " + type);
+  }
+};
diff --git a/components/apps/dashboard.tsx → components/apps/dashboard/dashboard.tsx b/components/apps/dashboard.tsx → components/apps/dashboard/dashboard.tsx
@@ -18,8 +18,8 @@ import {
   import { useChain } from '@cosmos-kit/react';
   import { IoWalletOutline } from 'react-icons/io5';
 
-  import  {ChainWalletCard}  from '../chain-wallet-card';
-import { FaUserCircle } from "react-icons/fa";
+import  {ChainWalletCard}  from './chain-wallet-card';
+import  { FaUserCircle } from "react-icons/fa";
 
     const chainNames_1 = ['cosmoshub', 'osmosis'];
     const chainNames_2 = ['stargaze', 'akash'];
@@ -61,7 +61,7 @@ export default function DashboardContent(){
         <Button
           isLoading
           loadingText={`Connecting ${wallet?.prettyName}`}
-          colorScheme="teal"
+          colorScheme="purple"
           size="md"
           marginTop={6}
           marginBottom={2}
@@ -88,7 +88,7 @@ export default function DashboardContent(){
             {username}
           </Button>
           <Button
-            colorScheme="teal"
+            colorScheme="purple"
             onClick={async () => {
               await disconnect();
               setGlobalStatus(WalletStatus.Disconnected);
@@ -104,7 +104,7 @@ export default function DashboardContent(){
       <Button
         isLoading={false}
         loadingText={`Connecting ${wallet?.prettyName}`}
-        colorScheme="teal"
+        colorScheme="purple"
         size="md"
         marginTop={6}
         marginBottom={2}
@@ -117,7 +117,6 @@ export default function DashboardContent(){
 
     return (
       <div className="right-content">
-
         <SimpleGrid columns={1} spacing={10} maxW={'60%'} marginX="auto">
           <Flex justifyContent="end">
           </Flex>

diff --git a/components/apps/dashboard/index.ts b/components/apps/dashboard/index.ts
@@ -0,0 +1,3 @@
+export * from './chain-wallet-card';
+export * from './react';
+export * from './dashboard';
diff --git a/components/apps/dashboard/react/address-card.tsx b/components/apps/dashboard/react/address-card.tsx
@@ -0,0 +1,198 @@
+import {
+    Box,
+    Button,
+    Icon,
+    Image,
+    Text,
+    useClipboard,
+    useColorMode,
+  } from "@chakra-ui/react";
+  import { WalletStatus } from "@cosmos-kit/core";
+  import React, { ReactNode, useEffect, useState } from "react";
+  import { FaCheckCircle } from "react-icons/fa";
+  import { FiCopy } from "react-icons/fi";
+
+  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 (
+          <Box width={"full"} px={8}>
+            <ConnectedShowAddress
+              isLoading={walletStatus === "Connecting" ? true : false}
+              isRound={true}
+              size={"sm"}
+            />
+          </Box>
+        );
+    }
+  };