update dapp styling

Author: sinzii

packages/create-typink/templates/default/contracts/package.json

@@ -8,6 +8,6 @@
   "type": "module",
   "dependencies": {
     "dedot": "^0.6.1",
-    "typink": "0.0.1-alpha.3"
+    "typink": "0.0.1-alpha.4"
   }
 }

packages/create-typink/templates/default/ui/package.json.template.ejs

@@ -30,7 +30,7 @@
     "react-dom": "^18.3.1",
     "react-toastify": "^9.1.3",
     "react-use": "^17.6.0",
-    "typink": "0.0.1-alpha.3"
+    "typink": "0.0.1-alpha.4"
   },
   "devDependencies": {
     "@dedot/chaintypes": "^0.44.0",

packages/create-typink/templates/default/ui/public/typink-dark-logo.png

@@ -1,23 +1,23 @@
 import { Box, Flex } from '@chakra-ui/react';
+import MainBoard from '@/components/MainBoard.tsx';
 import BalanceInsufficientAlert from '@/components/shared/BalanceInsufficientAlert.tsx';
 import MainFooter from '@/components/shared/MainFooter';
 import MainHeader from '@/components/shared/MainHeader';
-import MainBoard from '@/components/MainBoard.tsx';
+import TypinkIntroduction from '@/components/shared/TypinkIntroduction.tsx';
 
-function App() {
+export default function App() {
   return (
     <Flex direction='column' minHeight='100vh'>
       <MainHeader />
-      <Box maxWidth='container.lg' mx='auto' my={4} px={4} flex={1} w='full'>
-        <BalanceInsufficientAlert />
+      <Box maxWidth='container.lg' mx='auto' my={12} px={4} flex={1} w='full'>
+        <TypinkIntroduction />
 
         <Box mt={8} mx={{ base: 0, md: 32 }}>
+          <BalanceInsufficientAlert />
           <MainBoard />
         </Box>
       </Box>
       <MainFooter />
     </Flex>
   );
 }
-
-export default App;

packages/create-typink/templates/default/ui/public/typink-light-logo.png

@@ -6,52 +6,42 @@ import PendingText from '@/components/shared/PendingText.tsx';
 import { useApp } from '@/providers/AppProvider.tsx';
 import { shortenAddress } from '@/utils/string.ts';
 import { txToaster } from '@/utils/txToaster.tsx';
-import { useBalance, useContractQuery, useContractTx, useTypink, useWatchContractEvent } from 'typink';
+import { useContractQuery, useContractTx, useWatchContractEvent } from 'typink';
 
 export default function GreetBoard() {
-  const { connectedAccount } = useTypink();
   const { greeterContract: contract } = useApp();
   const [message, setMessage] = useState('');
   const setMessageTx = useContractTx(contract, 'setMessage');
-  const balance = useBalance(connectedAccount?.address);
 
   const { data: greet, isLoading } = useContractQuery({
     contract,
     fn: 'greet',
     watch: true,
   });
 
-  const handleUpdateGreeting = async () => {
-    if (!contract || !message) return;
-
-    if (!connectedAccount) {
-      toast.info('Please connect to your wallet');
-      return;
-    }
+  const handleUpdateGreeting = async (e: any) => {
+    e?.preventDefault();
 
-    if (balance?.free === 0n) {
-      toast.error('Balance insufficient to make transaction.');
-      return;
-    }
+    if (!contract || !message) return;
 
-    const toaster = txToaster('Signing transaction...');
+    const toaster = txToaster();
 
     try {
       await setMessageTx.signAndSend({
         args: [message],
-        callback: ({ status }) => {
+        callback: (result) => {
+          const { status } = result;
           console.log(status);
 
           if (status.type === 'BestChainBlockIncluded') {
             setMessage('');
           }
 
-          toaster.updateTxStatus(status);
+          toaster.onTxProgress(result);
         },
       });
     } catch (e: any) {
-      console.error(e, e.message);
-      toaster.onError(e);
+      toaster.onTxError(e);
     }
   };
 
@@ -92,16 +82,19 @@ export default function GreetBoard() {
 
   return (
     <Box>
-      <Heading size='md'>Greeter Contract</Heading>
+      <Heading size='md' mb={2}>
+        Sample Greeter Contract
+      </Heading>
+      <Text>Send a greeting message to the world!</Text>
       <Flex my={4} gap={2}>
-        <Text>Greeting Message:</Text>
+        <Text>Message:</Text>
         <PendingText fontWeight='600' isLoading={isLoading} color='primary.500'>
           {greet}
         </PendingText>
       </Flex>
-      <form>
+      <form onSubmit={handleUpdateGreeting}>
         <FormControl>
-          <FormLabel>Update greeting message:</FormLabel>
+          <FormLabel>Update message:</FormLabel>
           <Input
             type='input'
             maxLength={50}
@@ -111,12 +104,7 @@ export default function GreetBoard() {
           />
           <FormHelperText>Max 50 characters</FormHelperText>
         </FormControl>
-        <Button
-          size='sm'
-          mt={4}
-          isDisabled={!message}
-          isLoading={setMessageTx.inBestBlockProgress}
-          onClick={handleUpdateGreeting}>
+        <Button type='submit' size='sm' mt={4} isDisabled={!message} isLoading={setMessageTx.inBestBlockProgress}>
           Update Greeting
         </Button>
       </form>
@@ -171,23 +159,24 @@ export default function Psp22Board() {
   const mintNewToken = async () => {
     if (!tokenDecimal) return;
 
-    const toaster = txToaster('Signing transaction...');
+    const toaster = txToaster();
     try {
       await mintTx.signAndSend({
         args: [BigInt(100 * Math.pow(10, tokenDecimal))],
-        callback: ({ status }) => {
+        callback: (result) => {
+          const { status } = result;
           console.log(status);
 
           if (status.type === 'BestChainBlockIncluded') {
             refreshTotalSupply();
           }
 
-          toaster.updateTxStatus(status);
+          toaster.onTxProgress(result);
         },
       });
     } catch (e: any) {
       console.error(e);
-      toaster.onError(e);
+      toaster.onTxError(e);
     }
   };
 

packages/create-typink/templates/default/ui/public/typink-pink.svg

@@ -3,6 +3,7 @@ import { Box, Button, Flex, Menu, MenuButton, MenuDivider, MenuItem, MenuList, T
 import { useEffect, useMemo } from 'react';
 import { useWalletConnector } from '@/providers/WalletConnectorProvider.tsx';
 import { shortenAddress } from '@/utils/string.ts';
+import { ChevronDownIcon } from '@chakra-ui/icons';
 import { formatBalance, useBalances, useTypink } from 'typink';
 
 function ConnectedWallet() {
@@ -43,7 +44,7 @@ export default function AccountSelection() {
   return (
     <Box>
       <Menu autoSelect={false}>
-        <MenuButton as={Button} variant='outline'>
+        <MenuButton as={Button} variant='outline' rightIcon={<ChevronDownIcon boxSize='5' />}>
           <Flex align='center' gap={2}>
             <Text fontWeight='semi-bold' fontSize='md'>
               {name}
@@ -87,6 +88,7 @@ import { Box, Button, Flex, Menu, MenuButton, MenuDivider, MenuItem, MenuList, T
 import { useEffect, useMemo } from 'react';
 import { useWalletConnector } from '@/providers/WalletConnectorProvider.tsx';
 import { shortenAddress } from '@/utils/string.ts';
+import { ChevronDownIcon } from '@chakra-ui/icons';
 import { formatBalance, useBalances, useTypink } from 'typink';
 
 function ConnectedWallet() {
@@ -131,7 +133,7 @@ export default function AccountSelection() {
   return (
     <Box>
       <Menu autoSelect={false}>
-        <MenuButton as={Button} variant='outline'>
+        <MenuButton as={Button} variant='outline' rightIcon={<ChevronDownIcon boxSize='5' />}>
           <Flex align='center' gap={2}>
             <Text fontWeight='semi-bold' fontSize='md'>
               {name}
@@ -175,6 +177,7 @@ import { Box, Button, Flex, Menu, MenuButton, MenuDivider, MenuItem, MenuList, T
 import { useEffect, useMemo } from 'react';
 import WalletSelection, { ButtonStyle } from '@/components/shared/WalletSelection.tsx';
 import { shortenAddress } from '@/utils/string.ts';
+import { ChevronDownIcon } from '@chakra-ui/icons';
 import { formatBalance, useBalances, useTypink } from 'typink';
 
 function ConnectedWallet() {
@@ -212,12 +215,12 @@ export default function AccountSelection() {
   return (
     <Box>
       <Menu autoSelect={false}>
-        <MenuButton as={Button} variant='outline'>
+        <MenuButton as={Button} variant='outline' rightIcon={<ChevronDownIcon boxSize='5' />}>
           <Flex align='center' gap={2}>
             <Text fontWeight='semi-bold' fontSize='md'>
               {name}
             </Text>
-            <Text fontSize='sm' fontWeight='400'>
+            <Text fontSize='sm' fontWeight='400' display={{ base: 'none', md: 'inline' }}>
               ({shortenAddress(address)})
             </Text>
           </Flex>
@@ -241,6 +244,11 @@ export default function AccountSelection() {
             </MenuItem>
           ))}
           <MenuDivider />
+          <WalletSelection
+            buttonStyle={ButtonStyle.MENU_ITEM}
+            buttonLabel='Switch Wallet'
+            buttonProps={{ color: 'primary.500' }}
+          />
           <MenuItem onClick={disconnect} color='red.500'>
             Sign Out
           </MenuItem>