Merge pull request #164 from smit1625/give-buttons-type-button

Assign type="button" attribute to button tags

packages/ui/ant-design/src/WalletConnectButton.tsx

@@ -6,6 +6,7 @@ import { WalletIcon } from './WalletIcon';
 export const WalletConnectButton: FC<ButtonProps> = ({
     type = 'primary',
     size = 'large',
+    htmlType = 'button',
     children,
     disabled,
     onClick,
@@ -40,6 +41,7 @@ export const WalletConnectButton: FC<ButtonProps> = ({
             icon={<WalletIcon wallet={wallet} />}
             type={type}
             size={size}
+            htmlType={htmlType}
             {...props}
         >
             {content}

packages/ui/ant-design/src/WalletDisconnectButton.tsx

@@ -6,6 +6,7 @@ import { WalletIcon } from './WalletIcon';
 export const WalletDisconnectButton: FC<ButtonProps> = ({
     type = 'primary',
     size = 'large',
+    htmlType = 'button',
     children,
     disabled,
     onClick,
@@ -39,6 +40,7 @@ export const WalletDisconnectButton: FC<ButtonProps> = ({
             icon={<WalletIcon wallet={wallet} />}
             type={type}
             size={size}
+            htmlType={htmlType}
             {...props}
         >
             {content}

packages/ui/ant-design/src/WalletMenuItem.tsx

@@ -16,6 +16,7 @@ export const WalletMenuItem: FC<WalletMenuItemProps> = ({ onClick, wallet, ...pr
                 icon={<WalletIcon wallet={wallet} className="wallet-adapter-modal-menu-button-icon" />}
                 type="text"
                 className="wallet-adapter-modal-menu-button"
+                htmlType="button"
                 block
             >
                 {wallet.name}

packages/ui/ant-design/src/WalletModalButton.tsx

@@ -6,6 +6,7 @@ export const WalletModalButton: FC<ButtonProps> = ({
     children = 'Select Wallet',
     type = 'primary',
     size = 'large',
+    htmlType = 'button',
     onClick,
     ...props
 }) => {
@@ -20,7 +21,7 @@ export const WalletModalButton: FC<ButtonProps> = ({
     );
 
     return (
-        <Button onClick={handleClick} type={type} size={size} {...props}>
+        <Button onClick={handleClick} type={type} size={size} htmlType={htmlType} {...props}>
             {children}
         </Button>
     );

packages/ui/ant-design/src/WalletMultiButton.tsx

@@ -11,7 +11,13 @@ import { WalletConnectButton } from './WalletConnectButton';
 import { WalletIcon } from './WalletIcon';
 import { WalletModalButton } from './WalletModalButton';
 
-export const WalletMultiButton: FC<ButtonProps> = ({ type = 'primary', size = 'large', children, ...props }) => {
+export const WalletMultiButton: FC<ButtonProps> = ({
+    type = 'primary',
+    size = 'large',
+    htmlType = 'button',
+    children,
+    ...props
+}) => {
     const { publicKey, wallet, disconnect } = useWallet();
     const { setVisible } = useWalletModal();
 
@@ -24,14 +30,14 @@ export const WalletMultiButton: FC<ButtonProps> = ({ type = 'primary', size = 'l
 
     if (!wallet) {
         return (
-            <WalletModalButton type={type} size={size} {...props}>
+            <WalletModalButton type={type} size={size} htmlType={htmlType} {...props}>
                 {children}
             </WalletModalButton>
         );
     }
     if (!base58) {
         return (
-            <WalletConnectButton type={type} size={size} {...props}>
+            <WalletConnectButton type={type} size={size} htmlType={htmlType} {...props}>
                 {children}
             </WalletConnectButton>
         );
@@ -46,6 +52,7 @@ export const WalletMultiButton: FC<ButtonProps> = ({ type = 'primary', size = 'l
                             icon={<WalletIcon wallet={wallet} />}
                             type={type}
                             size={size}
+                            htmlType={htmlType}
                             className="wallet-adapter-multi-button-menu-button"
                             block
                             {...props}
@@ -85,7 +92,7 @@ export const WalletMultiButton: FC<ButtonProps> = ({ type = 'primary', size = 'l
             }
             trigger={['click']}
         >
-            <Button icon={<WalletIcon wallet={wallet} />} type={type} size={size} {...props}>
+            <Button icon={<WalletIcon wallet={wallet} />} type={type} size={size} htmlType={htmlType} {...props}>
                 {content}
             </Button>
         </Dropdown>

packages/ui/material-ui/src/WalletConnectButton.tsx

@@ -6,6 +6,7 @@ import { WalletIcon } from './WalletIcon';
 export const WalletConnectButton: FC<ButtonProps> = ({
     color = 'primary',
     variant = 'contained',
+    type = 'button',
     children,
     disabled,
     onClick,
@@ -37,6 +38,7 @@ export const WalletConnectButton: FC<ButtonProps> = ({
         <Button
             color={color}
             variant={variant}
+            type={type}
             onClick={handleClick}
             disabled={disabled || !wallet || connecting || connected}
             startIcon={<WalletIcon wallet={wallet} />}

packages/ui/material-ui/src/WalletDialogButton.tsx

@@ -6,6 +6,7 @@ export const WalletDialogButton: FC<ButtonProps> = ({
     children = 'Select Wallet',
     color = 'primary',
     variant = 'contained',
+    type = 'button',
     onClick,
     ...props
 }) => {
@@ -20,7 +21,7 @@ export const WalletDialogButton: FC<ButtonProps> = ({
     );
 
     return (
-        <Button color={color} variant={variant} onClick={handleClick} {...props}>
+        <Button color={color} variant={variant} type={type} onClick={handleClick} {...props}>
             {children}
         </Button>
     );

packages/ui/material-ui/src/WalletDisconnectButton.tsx

@@ -6,6 +6,7 @@ import { WalletIcon } from './WalletIcon';
 export const WalletDisconnectButton: FC<ButtonProps> = ({
     color = 'primary',
     variant = 'contained',
+    type = 'button',
     children,
     disabled,
     onClick,
@@ -36,6 +37,7 @@ export const WalletDisconnectButton: FC<ButtonProps> = ({
         <Button
             color={color}
             variant={variant}
+            type={type}
             onClick={handleClick}
             disabled={disabled || !wallet}
             startIcon={<WalletIcon wallet={wallet} />}

packages/ui/material-ui/src/WalletMultiButton.tsx

@@ -53,6 +53,7 @@ const useStyles = makeStyles((theme: Theme) => ({
 export const WalletMultiButton: FC<ButtonProps> = ({
     color = 'primary',
     variant = 'contained',
+    type = 'button',
     children,
     ...props
 }) => {
@@ -70,14 +71,14 @@ export const WalletMultiButton: FC<ButtonProps> = ({
 
     if (!wallet) {
         return (
-            <WalletDialogButton color={color} variant={variant} {...props}>
+            <WalletDialogButton color={color} variant={variant} type={type} {...props}>
                 {children}
             </WalletDialogButton>
         );
     }
     if (!base58) {
         return (
-            <WalletConnectButton color={color} variant={variant} {...props}>
+            <WalletConnectButton color={color} variant={variant} type={type} {...props}>
                 {children}
             </WalletConnectButton>
         );
@@ -88,6 +89,7 @@ export const WalletMultiButton: FC<ButtonProps> = ({
             <Button
                 color={color}
                 variant={variant}
+                type={type}
                 startIcon={<WalletIcon wallet={wallet} />}
                 onClick={(event) => setAnchor(event.currentTarget)}
                 aria-controls="wallet-menu"
@@ -112,6 +114,7 @@ export const WalletMultiButton: FC<ButtonProps> = ({
                     <Button
                         color={color}
                         variant={variant}
+                        type={type}
                         startIcon={<WalletIcon wallet={wallet} />}
                         className={styles.root}
                         onClick={(event) => setAnchor(undefined)}

packages/ui/react-ui/src/Button.tsx

@@ -20,6 +20,7 @@ export const Button: FC<ButtonProps> = (props) => {
             onClick={props.onClick}
             style={{ justifyContent, ...props.style }}
             tabIndex={props.tabIndex || 0}
+            type="button"
         >
             {props.startIcon && <i className="wallet-adapter-button-start-icon">{props.startIcon}</i>}
             {props.children}

packages/ui/vue-ui/src/WalletButton.vue

@@ -12,7 +12,7 @@ export default defineComponent({
 </script>
 
 <template>
-    <button class="wallet-adapter-button" :style="`justify-content: ${justifyContent};`">
+    <button class="wallet-adapter-button" :style="`justify-content: ${justifyContent};`" type="button">
         <i v-if="$slots['start-icon']" className="wallet-adapter-button-start-icon">
             <slot name="start-icon"></slot>
         </i>