chore: UI transition when wallet is already connected (#177)

* chore: wallet auto transition when already connected

* chore: display connected address

* chore: skip first step if wallet connected

* chore: remove useeffect from mint stepper

ui/src/components/core/button/button.styles.ts

@@ -126,17 +126,6 @@ const getButtonCompoundVariant = ({
         '&:focus, &:active': {
           backgroundColor: `$${color}3`,
         },
-
-        '&:disabled': {
-          backgroundColor: `initial`,
-          '&:hover': {
-            color: `$${color}11`,
-            backgroundColor: `initial`,
-          },
-          '& img, & svg': {
-            filter: 'grayscale(100%)',
-          },
-        },
       };
 
     default:

ui/src/views/mint/mint-stepper.tsx

@@ -12,6 +12,7 @@ export const MintStepper: React.FC = () => {
   const {
     transaction: { isSuccess },
   } = Mint.useTransactionContext();
+
   const {
     form: {
       isValid: [, setIsValid],

ui/src/views/mint/wallet-step/connect-wallet-button.tsx

@@ -1,6 +1,6 @@
 import { ConnectKitButton } from 'connectkit';
 
-import { Button, Stepper } from '@/components';
+import { Stepper } from '@/components';
 
 import { ButtonConnection } from '../button-connection';
 
@@ -9,19 +9,14 @@ export const ConnectWalletButton: React.FC = () => {
 
   return (
     <ConnectKitButton.Custom>
-      {({ isConnected, show, truncatedAddress, address }) => {
+      {({ isConnected, show, address }) => {
         if (isConnected && address) {
-          return (
+          nextStep();
-            <Button onClick={nextStep} css={{ color: '$slate12' }}>
-              {truncatedAddress}. Continue
-            </Button>
-          );
         } else {
           return (
             <ButtonConnection
               icon={'ethereum'}
-              label={' Connect Wallet'}
+              label={'Connect Wallet'}
-              disabled={isConnected}
               onClick={show}
             />
           );