Chore: Update example dapps

examples/sdk-starknetjs-starknetkit-starknet-react/package.json

@@ -3,19 +3,21 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@starknet-react/chains": "^0.1.4",
-    "@starknet-react/core": "^2.2.0",
+    "@starknet-react/chains": "^3.1.0",
+    "@starknet-react/core": "^3.6.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/react": "^18.2.46",
     "@types/react-dom": "^18.2.18",
+    "patch-package": "^8.0.0",
+    "postinstall-postinstall": "^2.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
-    "starknet": "^6.1.5",
-    "starknet-tokenbound-sdk": "^0.1.34",
-    "starknetkit": "^1.0.22",
+    "starknet": "^6.11.0",
+    "starknet-tokenbound-sdk": "^0.3.6",
+    "starknetkit": "^2.3.3",
     "typescript": "^5.2.2",
     "web-vitals": "^2.1.4"
   },

examples/sdk-starknetjs-starknetkit-starknet-react/src/components/Address.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+
+interface FormatAddressProps {
+  address: string | undefined;
+}
+
+const FormatAddress: React.FC<FormatAddressProps> = ({ address }) => {
+  const shortenAddress = (addr: string): string => {
+    return `${addr.slice(0, 6)}...${addr.slice(-6)}`;
+  };
+
+  const copyToClipboard = (): void => {
+    navigator.clipboard.writeText(address ?? "");
+    alert("Address copied to clipboard!");
+  };
+
+  return (
+    <div className="flex items-center gap-2">
+      <span className="text-lg font-bold">
+        {" "}
+        {shortenAddress(address ?? "")}
+      </span>
+      <button
+        className="bg-blue-400 text-xs py-2 text-white rounded-sm px-3"
+        onClick={copyToClipboard}
+        style={{ marginLeft: "10px" }}
+      >
+        Copy
+      </button>
+    </div>
+  );
+};
+
+export default FormatAddress;