{"_id":"@alez04/qconnect","name":"@alez04/qconnect","dist-tags":{"beta":"0.1.0","latest":"0.1.0"},"versions":{"0.1.0":{"name":"@alez04/qconnect","version":"0.1.0","description":"A comprehensive WalletConnect library for Qubic blockchain integration with React/Next.js","main":"dist/index.js","module":"dist/index.mjs","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./styles.css":"./dist/styles.css"},"scripts":{"build":"tsup","dev":"tsup --watch","lint":"eslint src --ext .ts,.tsx","type-check":"tsc --noEmit","test":"vitest","prepare":"npm run build"},"keywords":["qubic","walletconnect","blockchain","react","nextjs","dapp","web3"],"author":{"name":"Navia Labs"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/navia-labs/qconnect.git"},"homepage":"https://github.com/navia-labs/qconnect#readme","bugs":{"url":"https://github.com/navia-labs/qconnect/issues"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"dependencies":{"@radix-ui/react-dialog":"^1.0.5","@radix-ui/react-slot":"^1.0.2","@radix-ui/react-toast":"^1.1.5","@walletconnect/core":"^2.11.0","@walletconnect/types":"^2.11.0","@walletconnect/utils":"^2.11.0","@walletconnect/web3wallet":"^1.10.0","class-variance-authority":"^0.7.0","clsx":"^2.0.0","lucide-react":"^0.294.0","qrcode":"^1.5.3","tailwind-merge":"^3.3.1","viem":"^1.19.0"},"devDependencies":{"@types/qrcode":"^1.5.5","@types/react":"^18.2.0","@types/react-dom":"^18.2.0","@typescript-eslint/eslint-plugin":"^6.0.0","@typescript-eslint/parser":"^6.0.0","autoprefixer":"^10.4.16","eslint":"^8.0.0","eslint-plugin-react":"^7.33.0","eslint-plugin-react-hooks":"^4.6.0","postcss":"^8.4.32","tailwindcss":"^3.3.6","tsup":"^7.2.0","typescript":"^5.2.0","vitest":"^0.34.0"},"_id":"@alez04/qconnect@0.1.0","_nodeVersion":"22.20.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-a/RR+f6dB+NSTqf5zwJgARkEw/VaMUMT74iaVU4Kx7OzUs7OqDnB6LXOGJgy5MQI7T9AOHMexUvZ36AEcKR0OQ==","shasum":"014782d9b130f56cd5260c0f03ba6d7452ee43b0","tarball":"https://registry.npmjs.org/@alez04/qconnect/-/qconnect-0.1.0.tgz","fileCount":10,"unpackedSize":416101,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDEutOJhpFYAtfvxJWPWqnXHOV6T7Gvhrm3rC5kLv/RSAIhALMHCJVCP86cRguHKie5eeCUoi/EUndt2SQRrmiUdcLY"}]},"_npmUser":{"name":"alez04","email":"alezp0403@gmail.com"},"directories":{},"maintainers":[{"name":"alez04","email":"alezp0403@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/qconnect_0.1.0_1760794486269_0.7236726368005415"},"_hasShrinkwrap":false}},"time":{"created":"2025-10-18T13:34:46.208Z","0.1.0":"2025-10-18T13:34:46.540Z","modified":"2025-10-18T13:34:46.795Z"},"maintainers":[{"name":"alez04","email":"alezp0403@gmail.com"}],"description":"A comprehensive WalletConnect library for Qubic blockchain integration with React/Next.js","homepage":"https://github.com/navia-labs/qconnect#readme","keywords":["qubic","walletconnect","blockchain","react","nextjs","dapp","web3"],"repository":{"type":"git","url":"git+https://github.com/navia-labs/qconnect.git"},"author":{"name":"Navia Labs"},"bugs":{"url":"https://github.com/navia-labs/qconnect/issues"},"license":"MIT","readme":"# @navia-labs/qconnect\n\nA comprehensive WalletConnect library for Qubic blockchain integration with React/Next.js, similar to wagmi but specifically designed for Qubic.\n\n## Features\n\n- 🚀 **WalletConnect v2 Integration** - Full support for Qubic WalletConnect protocol\n- 🎨 **Beautiful UI Components** - Pre-built, customizable components using shadcn/ui\n- 🔗 **React Hooks** - wagmi-style hooks for easy integration\n- 📱 **Mobile-First** - Deep linking and QR code support for mobile wallets\n- ⚡ **TypeScript** - Full type safety with comprehensive type definitions\n- 🛡️ **Error Handling** - Robust error boundaries and toast notifications\n- 🎯 **Zero Config** - Works out of the box with sensible defaults\n\n## Installation\n\n```bash\nnpm install @navia-labs/qconnect\n# or\nyarn add @navia-labs/qconnect\n# or\nbun add @navia-labs/qconnect\n```\n\n## Quick Start\n\n### 1. Wrap your app with the provider\n\n```tsx\nimport { QubicWalletConnectProvider } from \"@navia-labs/qconnect\";\n\nconst config = {\n  projectId: \"your-project-id\", // Get from https://cloud.walletconnect.com\n  metadata: {\n    name: \"My Qubic DApp\",\n    description: \"A dApp that uses QConnect\",\n    url: \"https://my-dapp.com\",\n    icons: [\"https://my-dapp.com/icon.png\"],\n  },\n};\n\nfunction App() {\n  return (\n    <QubicWalletConnectProvider config={config}>\n      <YourDApp />\n    </QubicWalletConnectProvider>\n  );\n}\n```\n\n### 2. Connect a wallet\n\n```tsx\nimport { ConnectButton, WalletModal } from \"@navia-labs/qconnect\";\n\nfunction Header() {\n  const [modalOpen, setModalOpen] = useState(false);\n\n  return (\n    <>\n      <ConnectButton onClick={() => setModalOpen(true)}>\n        Connect Wallet\n      </ConnectButton>\n      <WalletModal open={modalOpen} onOpenChange={setModalOpen} />\n    </>\n  );\n}\n```\n\n### 3. Use hooks to interact with the wallet\n\n```tsx\nimport { useAccount, useSendQubic } from \"@navia-labs/qconnect\";\n\nfunction SendQubic() {\n  const { account, isConnected } = useAccount();\n  const { sendQubic, isSending } = useSendQubic();\n\n  const handleSend = async () => {\n    if (!account) return;\n\n    try {\n      const result = await sendQubic({\n        from: account.address,\n        to: \"RECIPIENT_ADDRESS\",\n        amount: 1000,\n      });\n      console.log(\"Transaction sent:\", result);\n    } catch (error) {\n      console.error(\"Failed to send:\", error);\n    }\n  };\n\n  if (!isConnected) return <div>Please connect your wallet</div>;\n\n  return (\n    <button onClick={handleSend} disabled={isSending}>\n      {isSending ? \"Sending...\" : \"Send 1000 QUBIC\"}\n    </button>\n  );\n}\n```\n\n## Components\n\n### ConnectButton\n\nA button that handles wallet connection/disconnection.\n\n```tsx\n<ConnectButton\n  onConnect={() => console.log(\"Connected!\")}\n  onDisconnect={() => console.log(\"Disconnected!\")}\n  className=\"my-custom-class\"\n/>\n```\n\n### WalletModal\n\nA modal that displays QR codes for wallet connection.\n\n```tsx\n<WalletModal open={modalOpen} onOpenChange={setModalOpen} />\n```\n\n### AccountInfo\n\nDisplays connected account information and assets.\n\n```tsx\n<AccountInfo showAssets={true} />\n```\n\n### TransactionModal\n\nA modal for confirming and signing transactions.\n\n```tsx\n<TransactionModal\n  open={transactionModalOpen}\n  onOpenChange={setTransactionModalOpen}\n  transaction={{\n    from: account.address,\n    to: recipient,\n    amount: 1000,\n  }}\n  onSuccess={(result) => console.log(\"Success:\", result)}\n  onError={(error) => console.error(\"Error:\", error)}\n/>\n```\n\n## Hooks\n\n### useConnect\n\n```tsx\nconst { connect, connectors, isConnecting, error } = useConnect();\n\n// Generate QR code for wallet connection\nconst handleConnect = async () => {\n  const uri = await connect();\n  // Use the URI to generate a QR code\n};\n```\n\n### useAccount\n\n```tsx\nconst { accounts, isConnected, address, account } = useAccount();\n\nif (isConnected && account) {\n  console.log(\"Connected account:\", account.address);\n  console.log(\"Balance:\", account.amount);\n}\n```\n\n### useSendQubic\n\n```tsx\nconst { sendQubic, isSending, error } = useSendQubic();\n\nconst result = await sendQubic({\n  from: \"SENDER_ADDRESS\",\n  to: \"RECIPIENT_ADDRESS\",\n  amount: 1000,\n});\n```\n\n### useSendTransaction\n\n```tsx\nconst { sendTransaction, isSending, error } = useSendTransaction();\n\nconst result = await sendTransaction({\n  from: \"SENDER_ADDRESS\",\n  to: \"RECIPIENT_ADDRESS\",\n  amount: 1000,\n  tick: 123456, // Optional: specific tick\n});\n```\n\n### useSignMessage\n\n```tsx\nconst { signMessage, isSigning, error } = useSignMessage();\n\nconst result = await signMessage({\n  from: \"SIGNER_ADDRESS\",\n  message: \"Hello, Qubic!\",\n});\n```\n\n### useSignTransaction\n\n```tsx\nconst { signTransaction, isSigning, error } = useSignTransaction();\n\nconst result = await signTransaction({\n  from: \"SIGNER_ADDRESS\",\n  to: \"RECIPIENT_ADDRESS\",\n  amount: 1000,\n});\n```\n\n### useSendAsset\n\n```tsx\nconst { sendAsset, isSending, error } = useSendAsset();\n\nconst result = await sendAsset({\n  from: \"SENDER_ADDRESS\",\n  to: \"RECIPIENT_ADDRESS\",\n  assetName: \"MYTOKEN\",\n  issuer: \"ISSUER_ADDRESS\",\n  amount: 100,\n});\n```\n\n## Error Handling\n\nThe library includes comprehensive error handling:\n\n```tsx\nimport { ErrorBoundary } from \"@navia-labs/qconnect\";\n\nfunction App() {\n  return (\n    <ErrorBoundary>\n      <YourAppComponents />\n    </ErrorBoundary>\n  );\n}\n```\n\n## Toast Notifications\n\nToast notifications are built-in for user feedback:\n\n```tsx\nimport { ToastContainer } from \"@navia-labs/qconnect\";\n\nfunction App() {\n  return (\n    <>\n      <YourApp />\n      <ToastContainer />\n    </>\n  );\n}\n```\n\n## Configuration\n\n### QubicWalletConnectConfig\n\n```tsx\ninterface QubicWalletConnectConfig {\n  projectId: string; // Required: Get from WalletConnect Cloud\n  metadata: {\n    name: string;\n    description: string;\n    url: string;\n    icons: string[];\n  };\n  requiredNamespaces?: {\n    qubic: {\n      chains: string[];\n      methods: string[];\n      events: string[];\n    };\n  };\n}\n```\n\n## Supported Methods\n\nThe library supports all Qubic WalletConnect methods:\n\n- `qubic_requestAccounts` - Get wallet accounts\n- `qubic_sendQubic` - Send QUBIC tokens\n- `qubic_signTransaction` - Sign a transaction\n- `qubic_sendTransaction` - Send and broadcast a transaction\n- `qubic_sign` - Sign a message\n- `qubic_sendAsset` - Send custom assets\n\n## Supported Events\n\n- `accountsChanged` - Fired when accounts change\n- `amountChanged` - Fired when QUBIC balance changes\n- `assetAmountChanged` - Fired when asset balances change\n\n## Styling\n\nThe library uses Tailwind CSS and CSS custom properties for theming. You can customize the appearance by overriding the CSS variables:\n\n```css\n:root {\n  --primary: 221.2 83.2% 53.3%;\n  --background: 0 0% 100%;\n  --foreground: 222.2 84% 4.9%;\n  /* ... other variables */\n}\n```\n\n## Examples\n\nCheck out the `example/` directory for a complete working example that demonstrates all features.\n\n## License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-90fc91d6f8044bc668050d86dede283c"}