Merge pull request #866 from alleslabs/feature/cfe-342-sticky-cta

[CFE-342] Feature: sticky CTA
alleslabs · Apr 30, 2024 · 6e03186 · 6e03186
2 parents b062897 + 6604b9c
commit 6e03186
Show file tree

Hide file tree

Showing 29 changed files with 467 additions and 344 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -43,6 +43,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#866](https://github.com/alleslabs/celatone-frontend/pull/866) Update upload code CTA to sticky bar
 - [#872](https://github.com/alleslabs/celatone-frontend/pull/872) Change Query/Execute page to Interact Contract
 - [#895](https://github.com/alleslabs/celatone-frontend/pull/895) Show collection address and creator on the collection list page
 

diff --git a/src/lib/components/WasmPageContainer.tsx b/src/lib/components/WasmPageContainer.tsx
@@ -1,26 +1,24 @@
-import { Flex } from "@chakra-ui/react";
+import type { BoxProps } from "@chakra-ui/react";
+import { Box } from "@chakra-ui/react";
 import type { ReactNode } from "react";
 
 type WasmPageContainerProps = {
   children: ReactNode;
-  width?: string;
+  boxProps?: BoxProps;
 };
 
-const WasmPageContainer = ({
-  children,
-  width = "540px",
-}: WasmPageContainerProps) => (
-  <Flex
+const WasmPageContainer = ({ children, boxProps }: WasmPageContainerProps) => (
+  <Box
     as="main"
     align="center"
-    width={width}
+    w={540}
     mx="auto"
-    py={12}
-    direction="column"
     minH="inherit"
+    py={12}
+    {...boxProps}
   >
     {children}
-  </Flex>
+  </Box>
 );
 
 export default WasmPageContainer;
diff --git a/src/lib/components/button/ResendButton.tsx b/src/lib/components/button/ResendButton.tsx
@@ -8,7 +8,7 @@ import {
   useResendTx,
   useSimulateFeeQuery,
 } from "lib/app-provider";
-import { useTxBroadcast } from "lib/providers/tx-broadcast";
+import { useTxBroadcast } from "lib/hooks";
 import type { Gas, Message, Msg, Option } from "lib/types";
 import { camelToSnake, encode } from "lib/utils";
 

diff --git a/src/lib/components/layouts/FooterCTA.tsx b/src/lib/components/layouts/FooterCTA.tsx
@@ -0,0 +1,37 @@
+import type { ButtonProps } from "@chakra-ui/react";
+import { Box, Button, Flex, Spinner } from "@chakra-ui/react";
+
+interface FooterCTAProps {
+  loading?: boolean;
+  cancelButton: ButtonProps;
+  cancelLabel?: string;
+  actionButton: ButtonProps;
+  actionLabel?: string;
+}
+
+export const FooterCTA = ({
+  loading = false,
+  cancelButton,
+  cancelLabel = "Previous",
+  actionButton,
+  actionLabel = "Submit",
+}: FooterCTAProps) => (
+  <Box
+    w="full"
+    bg="gray.900"
+    h="70px"
+    bottom="0"
+    position="sticky"
+    zIndex={2}
+    id="footer-cta"
+  >
+    <Flex align="center" justify="space-between" w="540px" h="full" mx="auto">
+      <Button variant="outline-gray" w="128px" {...cancelButton}>
+        {cancelLabel}
+      </Button>
+      <Button variant="primary" w="128px" {...actionButton}>
+        {loading ? <Spinner size="md" variant="light" /> : actionLabel}
+      </Button>
+    </Flex>
+  </Box>
+);
diff --git a/src/lib/components/layouts/index.ts b/src/lib/components/layouts/index.ts
@@ -0,0 +1 @@
+export * from "./FooterCTA";
diff --git a/src/lib/components/modal/contract/ClearAdmin.tsx b/src/lib/components/modal/contract/ClearAdmin.tsx
@@ -4,7 +4,7 @@ import { useCallback } from "react";
 import { ActionModal } from "../ActionModal";
 import { AmpEvent, track } from "lib/amplitude";
 import { useClearAdminTx } from "lib/app-provider";
-import { useTxBroadcast } from "lib/providers/tx-broadcast";
+import { useTxBroadcast } from "lib/hooks";
 import type { BechAddr32 } from "lib/types";
 
 interface ClearAdminModalProps {

diff --git a/src/lib/components/tx/TxReceiptRender.tsx b/src/lib/components/tx/TxReceiptRender.tsx
@@ -49,8 +49,13 @@ const variantStyle: Record<
 };
 
 const ReceiptRow = ({ title, value, html }: TxReceipt) => (
-  <Flex fontSize="14px" w="full" direction={{ base: "column", md: "row" }}>
-    <Text variant="body2" mb={{ base: 1, md: 0 }}>
+  <Flex
+    fontSize="14px"
+    w="full"
+    direction={{ base: "column", md: "row" }}
+    gap={4}
+  >
+    <Text variant="body2" mb={{ base: 1, md: 0 }} whiteSpace="nowrap">
       {title}
     </Text>
     {html || (

diff --git a/src/lib/components/upload/CodeHashBox.tsx b/src/lib/components/upload/CodeHashBox.tsx
@@ -1,4 +1,4 @@
-import { Flex, Text } from "@chakra-ui/react";
+import { Box, Text } from "@chakra-ui/react";
 
 import type { Option } from "lib/types";
 
@@ -7,7 +7,7 @@ interface CodeHashBoxProps {
 }
 
 export const CodeHashBox = ({ codeHash }: CodeHashBoxProps) => (
-  <Flex position="relative">
+  <Box position="relative">
     <Text
       position="absolute"
       variant="body3"
@@ -18,7 +18,7 @@ export const CodeHashBox = ({ codeHash }: CodeHashBoxProps) => (
     >
       Code Hash
     </Text>
-    <Flex
+    <Box
       border="1px"
       borderRadius="5px"
       px={3}
@@ -30,7 +30,7 @@ export const CodeHashBox = ({ codeHash }: CodeHashBoxProps) => (
       overflowX="auto"
       overflowY="hidden"
     >
-      <Text>{codeHash}</Text>
-    </Flex>
-  </Flex>
+      <Text whiteSpace="nowrap">{codeHash}</Text>
+    </Box>
+  </Box>
 );