Initial commit: simple frontend helper for mortgageFi, basic debt repayment and debt viewing functionality works, tested for both cbbtc and wbtc and not weth

components/ConnectButton.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import { useWeb3Modal } from '@web3modal/wagmi/react';
+import { useAccount, useDisconnect } from 'wagmi';
+import { formatAddress } from '@/utils/format';
+
+export function ConnectButton() {
+  const { open } = useWeb3Modal();
+  const { address, isConnected } = useAccount();
+  const { disconnect } = useDisconnect();
+
+  const handleConnect = () => {
+    open();
+  };
+
+  if (isConnected && address) {
+    return (
+      <div className="flex items-center space-x-4">
+        <span className="text-sm font-medium text-gray-700">
+          {formatAddress(address)}
+        </span>
+        <button
+          onClick={() => disconnect()}
+          className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
+        >
+          Disconnect
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <button
+      onClick={handleConnect}
+      className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+    >
+      Connect Wallet
+    </button>
+  );
+}