Use Stellar button

Author: pselle

src/components/FundAccountButton.tsx

@@ -1,17 +1,15 @@
-import React, { useRef } from 'react';
+import React, { useState } from 'react';
 import { useNotification } from '../providers/NotificationProvider';
+import { Button } from '@stellar/design-system';
 
 const FundAccountButton: React.FC = () => {
   const { addNotification } = useNotification();
-  const buttonRef = useRef<HTMLButtonElement | null>(null);
+  const [isDisabled, setIsDisabled] = useState(false);
   // TODO: replace with account from wallet
   const account = "GDVWY6R4RP37DQPAWBNQKQIZAGDVHUAYMYXKUDSY2O7PJWZNSIZIJNHQ";
 
   const handleFundAccount = async (account: string) => {
-    // Disable the button to prevent multiple clicks
-    if (buttonRef.current) {
-      buttonRef.current.disabled = true;
-    }
+    setIsDisabled(true);
 
     addNotification('Funding account, please wait…', 'primary');
     try {
@@ -29,15 +27,13 @@ const FundAccountButton: React.FC = () => {
       console.error('Error funding account:', error);
       addNotification('Error funding account. Please try again.', 'error');
     } finally {
-      if (buttonRef.current) {
-        buttonRef.current.disabled = false;
-      }
+      setIsDisabled(false);
     }
   };
 
   return (
     <div>
-      <button ref={buttonRef} onClick={handleFundAccount.bind(this, account)}>Fund Account</button>
+      <Button disabled={isDisabled} onClick={handleFundAccount.bind(this, account)} variant="primary" size="md">Fund Account</Button>
     </div>
   );
 };