Added Profile component with Connect refactoring (#2685)

* Added Profile component with Connect refactoring

* Update packages/demo/src/components/component-cards/profile-card.tsx

Co-authored-by: Chase Fleming <chasefleming@users.noreply.github.com>

* Updated profile component to use tabs

---------

Co-authored-by: mfbz <mfbz@users.noreply.github.com>
Co-authored-by: Chase Fleming <chasefleming@users.noreply.github.com>

Author: mfbz

.changeset/nine-beers-behave.md

@@ -0,0 +1,6 @@
+---
+"@onflow/react-sdk": minor
+"@onflow/demo": minor
+---
+
+Added standalone Profile component for displaying wallet information. The Profile component has been extracted from the Connect component modal to provide a reusable profile display that can be used independently. The component automatically detects connection state, showing a compact "No connected wallet" message when disconnected and full profile information when connected (including address, balance with cross-VM support, multi-token selector, copy/disconnect actions, and optional scheduled transactions).

packages/demo/src/components/component-cards/connect-card.tsx

@@ -70,13 +70,22 @@ const PROPS: PropDefinition[] = [
     description:
       "Configuration for the profile modal (like show scheduled transactions, filter handler types)",
   },
+  {
+    name: "modalEnabled",
+    type: "boolean",
+    required: false,
+    description:
+      "Controls whether the profile modal opens on click when connected. Set to false to manage the profile display externally.",
+    defaultValue: "true",
+  },
 ]
 
 export function ConnectCard() {
   const {darkMode} = useDarkMode()
   const {data: chainId, isLoading} = useFlowChainId()
   const isEmulator = chainId === "emulator" || chainId === "local"
   const [showMultiToken, setShowMultiToken] = useState(false)
+  const [modalEnabled, setModalEnabled] = useState(true)
   const [balanceType, setBalanceType] = useState<
     "cadence" | "evm" | "combined"
   >("cadence")
@@ -218,9 +227,13 @@ export function ConnectCard() {
                   <Connect
                     balanceType={balanceType}
                     balanceTokens={multiTokens}
+                    modalEnabled={modalEnabled}
                   />
                 ) : (
-                  <Connect balanceType={balanceType} />
+                  <Connect
+                    balanceType={balanceType}
+                    modalEnabled={modalEnabled}
+                  />
                 )}
               </div>
             )}
@@ -282,6 +295,28 @@ export function ConnectCard() {
                   ))}
                 </div>
               </div>
+
+              <div>
+                <label
+                  className={`text-xs font-medium mb-2 block ${darkMode ? "text-gray-500" : "text-gray-500"}`}
+                >
+                  Profile Modal
+                </label>
+                <button
+                  onClick={() => setModalEnabled(!modalEnabled)}
+                  className={`w-full text-sm px-3 py-2 rounded-lg transition-colors ${
+                  modalEnabled
+                      ? darkMode
+                        ? "bg-blue-600 hover:bg-blue-700 text-white"
+                        : "bg-blue-500 hover:bg-blue-600 text-white"
+                      : darkMode
+                        ? "bg-gray-800 hover:bg-gray-700 text-white"
+                        : "bg-white hover:bg-gray-100 text-black border border-black/10"
+                  }`}
+                >
+                  {modalEnabled ? "Enabled" : "Disabled"}
+                </button>
+              </div>
             </div>
           )}
         </div>