update dapp styling

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/src/App.tsx

@@ -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/src/components/MainBoard.tsx.template.ejs

@@ -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/src/components/shared/AccountSelection.tsx.template.ejs

@@ -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>

packages/create-typink/templates/default/ui/src/components/shared/MainFooter.tsx

@@ -1,11 +1,10 @@
-import { Box, Flex, Link, Text } from '@chakra-ui/react';
-import React, { FC } from 'react';
-import NetworkSelection from '@/components/shared/NetworkSelection.tsx';
-import { Props } from 'typink';
+import { Box, Flex, Image, Link, Text } from '@chakra-ui/react';
+import React from 'react';
+import { GithubSvgIcon, XSvgIcon } from '@/components/shared/icons.tsx';
 
-const MainFooter: FC<Props> = () => {
+export default function MainFooter() {
   return (
-    <Box borderTop={1} borderStyle='solid' borderColor='gray.200'>
+    <Box borderTop={1} borderStyle='solid' borderColor='var(--chakra-colors-chakra-border-color)'>
       <Flex
         maxWidth='container.lg'
         px={4}
@@ -25,44 +24,16 @@ const MainFooter: FC<Props> = () => {
         </Box>
         <Flex gap={6}>
           <a href='https://twitter.com/realsinzii' target='_blank'>
-            <svg
-              width='24'
-              aria-hidden='true'
-              focusable='false'
-              data-prefix='fab'
-              data-icon='twitter'
-              className='svg-inline--fa fa-twitter fa-xl text-gray-600 hover:text-gray-800'
-              role='img'
-              xmlns='http://www.w3.org/2000/svg'
-              viewBox='0 0 512 512'>
-              <path
-                fill='currentColor'
-                d='M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z'></path>
-            </svg>
+            <XSvgIcon />
           </a>
           <a href='https://github.com/dedotdev/typink-dapp-template' target='_blank'>
-            <svg
-              width='24'
-              aria-hidden='true'
-              focusable='false'
-              data-prefix='fab'
-              data-icon='github'
-              className='svg-inline--fa fa-github fa-xl text-gray-600 hover:text-gray-800'
-              role='img'
-              xmlns='http://www.w3.org/2000/svg'
-              viewBox='0 0 496 512'>
-              <path
-                fill='currentColor'
-                d='M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z'></path>
-            </svg>
+            <GithubSvgIcon />
           </a>
           <a href='https://dedot.dev' target='_blank'>
-            <img width={25} src='/dedot-dark-logo.png' />
+            <Image width={25} src='/dedot-dark-logo.png' />
           </a>
         </Flex>
       </Flex>
     </Box>
   );
-};
-
-export default MainFooter;
+}

packages/create-typink/templates/default/ui/src/components/shared/MainHeader.tsx

@@ -1,14 +1,17 @@
-import { Box, Container, Flex, Image } from '@chakra-ui/react';
+import { Box, Container, Flex, Image, useColorMode } from '@chakra-ui/react';
+import React from 'react';
 import AccountSelection from '@/components/shared/AccountSelection.tsx';
 import NetworkSelection from '@/components/shared/NetworkSelection.tsx';
+import ThemeModeButton from '@/components/shared/ThemeModeButton.tsx';
 import WalletSelection from '@/components/shared/WalletSelection.tsx';
 import { useTypink } from 'typink';
 
 export default function MainHeader() {
   const { signer } = useTypink();
+  const { colorMode } = useColorMode();
 
   return (
-    <Box borderBottom={1} borderStyle='solid' borderColor='gray.200'>
+    <Box borderBottom={1} borderStyle='solid' borderColor='var(--chakra-colors-chakra-border-color)'>
       <Container
         maxWidth='container.lg'
         px={4}
@@ -20,10 +23,20 @@ export default function MainHeader() {
         h={16}>
         <a href='/'>
           <Box>
-            <Image h={6} src='/typink-logo.png' />
+            <Image
+              h={6}
+              src={colorMode === 'light' ? '/typink-text-dark-logo.png' : '/typink-text-light-logo.png'}
+              display={{ base: 'none', md: 'block' }}
+            />
+            <Image
+              h={6}
+              src={colorMode === 'light' ? '/typink-dark-logo.png' : '/typink-light-logo.png'}
+              display={{ base: 'block', md: 'none' }}
+            />
           </Box>
         </a>
         <Flex gap={2}>
+          <ThemeModeButton />
           <NetworkSelection />
           {signer ? <AccountSelection /> : <WalletSelection />}
         </Flex>