update ui for consistent in light and dark mode

2023-10-24 21:15:59 +07:00
parent 854a47f266
commit 507628bcaa
19 changed files with 788 additions and 442 deletions
--- a/src/app/nwc/components/form.tsx
+++ b/src/app/nwc/components/form.tsx
@@ -0,0 +1,66 @@
+import { useState } from 'react';
+import { toast } from 'sonner';
+
+import { useStorage } from '@libs/storage/provider';
+
+import { LoaderIcon } from '@shared/icons';
+
+export function NWCForm({ setWalletConnectURL }) {
+  const { db } = useStorage();
+
+  const [uri, setUri] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const submit = async () => {
+    try {
+      setLoading(true);
+
+      if (!uri.startsWith('nostr+walletconnect:')) {
+        toast.error(
+          'Connect URI is required and must start with format nostr+walletconnect:, please check again'
+        );
+        setLoading(false);
+        return;
+      }
+
+      const uriObj = new URL(uri);
+      const params = new URLSearchParams(uriObj.search);
+
+      if (params.has('relay') && params.has('secret')) {
+        await db.secureSave(`${db.account.pubkey}-nwc`, uri);
+        setWalletConnectURL(uri);
+        setLoading(false);
+      } else {
+        setLoading(false);
+        toast.error('Connect URI is not valid, please check again');
+        return;
+      }
+    } catch (e) {
+      setLoading(false);
+      toast.error(e);
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-3 rounded-xl bg-neutral-100 p-3 dark:bg-neutral-900">
+      <div className="flex flex-col gap-1.5">
+        <textarea
+          name="walletConnectURL"
+          value={uri}
+          // eslint-disable-next-line jsx-a11y/no-autofocus
+          autoFocus={false}
+          onChange={(e) => setUri(e.target.value)}
+          placeholder="nostr+walletconnect://"
+          className="h-40 w-full resize-none rounded-lg bg-neutral-200 px-3 py-3 text-neutral-900 !outline-none placeholder:text-neutral-600 dark:bg-neutral-800 dark:text-neutral-100 dark:placeholder:text-neutral-400"
+        />
+      </div>
+      <button
+        type="button"
+        onClick={submit}
+        className="inline-flex h-9 w-full items-center justify-center rounded-lg bg-blue-500 font-medium text-white hover:bg-blue-600"
+      >
+        {loading ? <LoaderIcon className="h-4 w-4 animate-spin" /> : 'Connect'}
+      </button>
+    </div>
+  );
+}