[WIP] Web Wallet Connect

javascript/dwa-starter-react-vite/package.json

@@ -15,14 +15,19 @@
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-slot": "^1.1.0",
-    "@web5/api": "0.10.0",
-    "@web5/credentials": "^1.0.3",
-    "@web5/dids": "^1.1.1",
+    "@web5/agent": "^0.7.3",
+    "@web5/api": "0.0.0-next-3cfc21d-20240920195338",
+    "@web5/browser": "0.0.0-next-3cfc21d-20240920195338",
+    "@web5/common": "^1.0.2",
+    "@web5/credentials": "^1.1.1",
+    "@web5/dids": "^1.1.4",
+    "@web5/user-agent": "^0.6.3",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "lucide-react": "^0.407.0",
     "next-themes": "^0.3.0",
     "node-stdlib-browser": "^1.2.0",
+    "qrcode.react": "^4.0.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.24.1",
@@ -58,4 +63,4 @@
     "sharp": "0.32.6",
     "sharp-ico": "0.1.5"
   }
-}
+}

javascript/dwa-starter-react-vite/src/components/connect/connect-pin.tsx

@@ -0,0 +1,78 @@
+import { DeleteIcon, Trash2Icon } from "lucide-react"
+import { Input } from "../ui/input"
+import { Typography } from "../ui/typography"
+
+interface ConnectPinProps {
+  value: string;
+  onChange: (value: string) => void;
+  close: () => void;
+  submit: (pin: string) => void;
+}
+
+const ConnectPin: React.FC<ConnectPinProps> = ({ onChange, value, close, submit }) => {
+
+  const submitPin = () => {
+    if (value.length === 0) {
+      return;
+    }
+    submit(value)
+  }
+
+  return (<div>
+    <Typography variant="p">Please enter the PIN on your wallet</Typography>
+    <div className="mt-2">
+      <Input
+        value={value}
+        readOnly
+        className="w-full p-2 border rounded text-center text-lg"
+        placeholder="Enter PIN"
+      />
+    </div>
+    <div className="grid grid-cols-3 gap-2">
+      {[1, 2, 3, 4, 5, 6, 7, 8, 9].map((num) => (
+        <button
+          key={num}
+          className="p-2 border-1 rounded text-primary flex justify-center items-center"
+          onClick={() => onChange(value + num.toString())}
+        >
+          {num}
+        </button>
+      ))}
+      <button
+        className="p-2 border-1 rounded text-primary flex justify-center items-center"
+        onClick={() => onChange('')}
+        >
+          <Trash2Icon className="h-6 w-6" />
+        </button>
+      <button
+        className="p-2 border-1 rounded text-primary flex justify-center items-center"
+        onClick={() => onChange(value + '0')}
+      >
+        0
+      </button>
+      <button
+        className="p-2 border-1 rounded text-primary flex justify-center items-center"
+        onClick={() => onChange(value.slice(0, -1))}
+      >
+        <DeleteIcon className="h-6 w-6" />
+      </button>
+      {value.length > 0 && (
+        <button
+          className="p-2 border rounded col-span-3 mt-2 bg-primary text-secondary hover:bg-primary-dark"
+          onClick={submitPin}
+        >
+          Submit
+        </button>
+      ) || (
+        <button
+        className="p-2 border rounded col-span-3 mt-2 bg-primary text-secondary hover:bg-primary-dark"
+        onClick={() => close()}
+        >
+          Cancel
+        </button>
+      )}
+    </div>
+  </div>)
+}
+
+export default ConnectPin;

javascript/dwa-starter-react-vite/src/components/connect/connect-qr.tsx

@@ -0,0 +1,23 @@
+import { QRCodeCanvas } from "qrcode.react";
+import { Typography } from "../ui/typography";
+import { Button } from "../ui/button";
+import { XIcon } from "lucide-react";
+
+interface ConnectQRProps {
+  value: string;
+  close: () => void;
+}
+
+const ConnectQR: React.FC<ConnectQRProps> = ({ close, value }) => {
+  return (<div>
+    <a href={value}>
+      <Typography variant="h3">Scan QR Code</Typography>
+      <QRCodeCanvas value={value} size={256} className="mt-4 p-2 bg-primary" bgColor="rgb(250,204, 21)" fgColor="rgb(41,37,36)" />
+    </a>
+    <div className="mt-4">
+      <Button onClick={() => close()}>Cancel <XIcon className="ml-2 h-4 w-4" /></Button>
+    </div>
+  </div>)
+}
+
+export default ConnectQR;