fix(chain-template): change text and styles

cosmology-tech · Aug 22, 2024 · 8476be5 · 8476be5
1 parent ef1bcd1
commit 8476be5
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 43 deletions.
diff --git a/examples/chain-template/components/common/Sidebar/NavItems.tsx b/examples/chain-template/components/common/Sidebar/NavItems.tsx
@@ -46,8 +46,8 @@ const navItems: NavItem[] = [
   },
   {
     icon: 'document',
-    label: 'Documents',
-    href: '/documents',
+    label: 'Docs',
+    href: '/docs',
   },
 ];
 

diff --git a/examples/chain-template/components/staking/StakingSection.tsx b/examples/chain-template/components/staking/StakingSection.tsx
@@ -16,7 +16,7 @@ export const StakingSection = ({ chainName }: { chainName: ChainName }) => {
   );
 
   return (
-    <Box my="$16">
+    <Box my="$16" maxWidth="$containerLg" mx="auto">
       {!isWalletConnected ? (
         <Box
           height="$28"
@@ -25,7 +25,7 @@ export const StakingSection = ({ chainName }: { chainName: ChainName }) => {
           alignItems="center"
         >
           <Text fontWeight="$semibold" fontSize="$xl">
-            Please connect the wallet
+            Please connect your wallet
           </Text>
         </Box>
       ) : isLoading || isFetchingLogos || !data ? (

diff --git a/examples/chain-template/components/voting/Voting.tsx b/examples/chain-template/components/voting/Voting.tsx
@@ -1,38 +1,38 @@
-import { useState } from "react";
-import { useChain } from "@cosmos-kit/react";
+import { useState } from 'react';
+import { useChain } from '@cosmos-kit/react';
 import {
   Proposal as IProposal,
   ProposalStatus,
   TallyResult,
-} from "interchain-query/cosmos/gov/v1/gov";
+} from 'interchain-query/cosmos/gov/v1/gov';
 import {
   BasicModal,
   Box,
   GovernanceProposalItem,
   Spinner,
   Text,
   useColorModeValue,
-} from "@interchain-ui/react";
-import { useModal, useVotingData } from "@/hooks";
-import { Proposal } from "@/components";
-import { formatDate } from "@/utils";
+} from '@interchain-ui/react';
+import { useModal, useVotingData } from '@/hooks';
+import { Proposal } from '@/components';
+import { formatDate } from '@/utils';
 
 function status(s: ProposalStatus) {
   switch (s) {
     case ProposalStatus.PROPOSAL_STATUS_UNSPECIFIED:
-      return "pending";
+      return 'pending';
     case ProposalStatus.PROPOSAL_STATUS_DEPOSIT_PERIOD:
-      return "pending";
+      return 'pending';
     case ProposalStatus.PROPOSAL_STATUS_VOTING_PERIOD:
-      return "pending";
+      return 'pending';
     case ProposalStatus.PROPOSAL_STATUS_PASSED:
-      return "passed";
+      return 'passed';
     case ProposalStatus.PROPOSAL_STATUS_REJECTED:
-      return "rejected";
+      return 'rejected';
     case ProposalStatus.PROPOSAL_STATUS_FAILED:
-      return "rejected";
+      return 'rejected';
     default:
-      return "pending";
+      return 'pending';
   }
 }
 
@@ -53,7 +53,7 @@ export function Voting({ chainName }: VotingProps) {
   const { address } = useChain(chainName);
   const [proposal, setProposal] = useState<IProposal>();
   const { data, isLoading, refetch } = useVotingData(chainName);
-  const { modal, open: openModal, close: closeModal, setTitle } = useModal("");
+  const { modal, open: openModal, close: closeModal, setTitle } = useModal('');
 
   function onClickProposal(index: number) {
     const proposal = data.proposals![index];
@@ -72,23 +72,21 @@ export function Voting({ chainName }: VotingProps) {
           position="relative"
           attributes={{ onClick: () => onClickProposal(index) }}
         >
-          {data.votes[proposal.id.toString()]
-            ? (
-              <Box
-                position="absolute"
-                px="$4"
-                py="$2"
-                top="$4"
-                right="$6"
-                borderRadius="$md"
-                backgroundColor="$green400"
-              >
-                <Text color="$white" fontSize="$xs" fontWeight="$bold">
-                  Voted
-                </Text>
-              </Box>
-            )
-            : null}
+          {data.votes[proposal.id.toString()] ? (
+            <Box
+              position="absolute"
+              px="$4"
+              py="$2"
+              top="$4"
+              right="$6"
+              borderRadius="$md"
+              backgroundColor="$green400"
+            >
+              <Text color="$white" fontSize="$xs" fontWeight="$bold">
+                Voted
+              </Text>
+            </Box>
+          ) : null}
           <GovernanceProposalItem
             id={`# ${proposal.id?.toString()}`}
             key={proposal.submitTime?.getTime()}
@@ -116,18 +114,20 @@ export function Voting({ chainName }: VotingProps) {
       p="$8"
       borderRadius="$md"
       justifyContent="center"
-      display={isLoading ? "flex" : "none"}
+      display={isLoading ? 'flex' : 'none'}
     >
       <Spinner
         size="$5xl"
-        color={useColorModeValue("$blackAlpha800", "$whiteAlpha900")}
+        color={useColorModeValue('$blackAlpha800', '$whiteAlpha900')}
       />
     </Box>
   );
 
   return (
-    <Box mb="$20" position="relative">
-      <Text fontWeight="600" fontSize="$2xl">Proposals</Text>
+    <Box mb="$20" position="relative" maxWidth="$containerLg" mx="auto">
+      <Text fontWeight="600" fontSize="$2xl">
+        Proposals
+      </Text>
 
       {address ? Loading : null}
 
@@ -136,7 +136,9 @@ export function Voting({ chainName }: VotingProps) {
       <BasicModal
         title={
           <Box maxWidth="40rem">
-            <Text fontSize="$xl" fontWeight="$bold">{modal.title}</Text>
+            <Text fontSize="$xl" fontWeight="$bold">
+              {modal.title}
+            </Text>
           </Box>
         }
         isOpen={modal.open}

diff --git a/examples/chain-template/hooks/common/useTx.ts b/examples/chain-template/hooks/common/useTx.ts
@@ -33,7 +33,7 @@ export const useTx = (chainName: string) => {
       toast({
         type: 'error',
         title: 'Wallet not connected',
-        description: 'Please connect the wallet',
+        description: 'Please connect your wallet',
       });
       return;
     }

diff --git a/examples/chain-template/pages/documents.tsx → examples/chain-template/pages/docs.tsx b/examples/chain-template/pages/documents.tsx → examples/chain-template/pages/docs.tsx
@@ -34,7 +34,7 @@ const tabs: Tab[] = [
   },
 ];
 
-export default function SidebarHomePage() {
+export default function DocsPage() {
   const [activeTab, setActiveTab] = useState(0);
 
   const { isTablet, isMobile } = useDetectBreakpoints();