Merge pull request #80 from suiet/feat/support-more-wallet-presets

Feat/support more wallet presets

examples/with-next/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

examples/with-next/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

examples/with-next/README.md

@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

examples/with-next/components/App.css

@@ -0,0 +1,43 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
+
+.btn-group button + button {
+  margin-left: 12px;
+}

examples/with-next/components/App.tsx

@@ -0,0 +1,154 @@
+import { useEffect } from 'react';
+import {
+  ConnectButton,
+  useAccountBalance,
+  useWallet,
+  useSuiProvider,
+} from '@suiet/wallet-kit';
+import suietLogo from './assets/suiet-logo.svg';
+import * as tweetnacl from 'tweetnacl';
+
+function App() {
+  const wallet = useWallet();
+  const { balance } = useAccountBalance();
+
+  useEffect(() => {
+    if (!wallet.connected) return;
+    console.log('listen to all change event');
+    const off = wallet.on('change', (...args) => {
+      console.log('wallet changed', ...args);
+    });
+    return () => {
+      off();
+    };
+  }, [wallet.connected]);
+
+  useEffect(() => {
+    if (!wallet.connected) return;
+    console.log('listen to chainChange event only');
+    const off = wallet.on('chainChange', ({ chain }) => {
+      console.log('chainChange', chain);
+    });
+    return () => {
+      off();
+    };
+  }, [wallet.connected]);
+
+  function uint8arrayToHex(value: Uint8Array | undefined) {
+    if (!value) return '';
+    // @ts-ignore
+    return value.toString('hex');
+  }
+
+  async function handleExecuteMoveCall() {
+    try {
+      const data = {
+        packageObjectId: '0x2',
+        module: 'devnet_nft',
+        function: 'mint',
+        typeArguments: [],
+        arguments: [
+          'name',
+          'capy',
+          'https://cdn.britannica.com/94/194294-138-B2CF7780/overview-capybara.jpg?w=800&h=450&c=crop',
+        ],
+        gasBudget: 10000,
+      };
+      const resData = await wallet.signAndExecuteTransaction({
+        transaction: {
+          kind: 'moveCall',
+          data,
+        },
+      });
+      // const resData = await executeMoveCall(data);
+      console.log('executeMoveCall success', resData);
+      alert('executeMoveCall succeeded (see response in the console)');
+    } catch (e) {
+      console.error('executeMoveCall failed', e);
+      alert('executeMoveCall failed (see response in the console)');
+    }
+  }
+
+  async function handleSignMsg() {
+    try {
+      const msg = 'Hello world!';
+      const result = await wallet.signMessage({
+        message: new TextEncoder().encode('Hello world'),
+      });
+      if (!result) {
+        alert('signMessage return null');
+        return;
+      }
+      console.log('send message to be signed', msg);
+      const textDecoder = new TextDecoder();
+      console.log('signMessage success', result);
+      console.log('signMessage signature', result.signature);
+      console.log(
+        'signMessage signedMessage',
+        textDecoder.decode(result.signedMessage).toString()
+      );
+      console.log(
+        'verify via tweetnacl',
+        tweetnacl.sign.detached.verify(
+          result.signedMessage,
+          result.signature,
+          wallet.account?.publicKey as Uint8Array
+        )
+      );
+      alert('signMessage succeeded (see response in the console)');
+    } catch (e) {
+      console.error('signMessage failed', e);
+      alert('signMessage failed (see response in the console)');
+    }
+  }
+
+  return (
+    <div className="App">
+      <div>
+        <a href="https://vitejs.dev" target="_blank">
+          <img src="/vite.svg" className="logo" alt="Vite logo" />
+        </a>
+        <a href="https://github.com/suiet/wallet-kit" target="_blank">
+          <img src={suietLogo} className="logo" alt="Suiet logo" />
+        </a>
+      </div>
+      <h1>Vite + Suiet Kit</h1>
+      <div className="card">
+        <ConnectButton />
+
+        {!wallet.connected ? (
+          <p>Connect DApp with Suiet wallet from now!</p>
+        ) : (
+          <div>
+            <div>
+              <p>current wallet: {wallet.adapter?.name}</p>
+              <p>
+                wallet status:{' '}
+                {wallet.connecting
+                  ? 'connecting'
+                  : wallet.connected
+                  ? 'connected'
+                  : 'disconnected'}
+              </p>
+              <p>wallet address: {wallet.account?.address}</p>
+              <p>current network: {wallet.chain?.name}</p>
+              <p>wallet balance: {balance} SUI</p>
+              <p>
+                wallet publicKey: {uint8arrayToHex(wallet.account?.publicKey)}
+              </p>
+            </div>
+            <div className={'btn-group'} style={{ margin: '8px 0' }}>
+              <button onClick={handleExecuteMoveCall}>executeMoveCall</button>
+              <button onClick={handleSignMsg}>signMessage</button>
+            </div>
+          </div>
+        )}
+      </div>
+      <p className="read-the-docs">
+        Click on the Vite and Suiet logos to learn more
+      </p>
+    </div>
+  );
+}
+
+export default App;

examples/with-next/next.config.js

@@ -0,0 +1,7 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  swcMinify: true,
+}
+
+module.exports = nextConfig