@fivenorth/loop-sdk 0.1.1 → 0.1.2

package/README.md

@@ -2,15 +2,147 @@
 
 Loop SDK allows dApps connect to a [Loop](https://cantonloop.com) account. The Loop wallet can be on mobile or on a desktop browser. All the interaction will happen inside the dApp. For signing, user will be prompted to sign either on their Loop wallet on mobile devices or on browser.
 
-# Limitation
+## Limitation
 
 Currently, we only support DAML transaction from the Splice build-in DAR files and Utility app DAR files.
 
 There is no plan to upload and support third party DAR at this moment
 
-# Usage guide
+## Quick overview
 
-Refer to the file `demo/test.html` to see an example of setup and use the SDK.
+For a quick overview of how the code look like, you can take a look at this pen https://codepen.io/kureikain/pen/KwVGgLX.
+
+## Usage guide
+
+To use the Loop SDK, you first need to install it from NPM:
+
+```bash
+bun add @fivenorth/loop-sdk
+```
+
+Then you can import it in your dApp:
+
+```javascript
+import { loop } from '@fivenorth/loop-sdk';
+```
+
+Note that, If you don't want to implement a build process, you can include the file directly with `unpkg` such as 
+
+```javascript
+import { loop } from 'https://unpkg.com/@fivenorth/loop-sdk@0.1.1/dist';
+```
+
+An example of how we use it in that manner is on our [loopsdk demo](https://codepen.io/kureikain/pen/KwVGgLX)
+
+### 1. Initialize the SDK
+
+Before you can connect, you need to initialize the SDK. This is typically done once when your application loads.
+
+```javascript
+loop.init({
+    appName: 'My Awesome dApp',
+    network: 'local', // or 'devnet', 'mainnet'
+    onAccept: (provider) => {
+        console.log('Connected!', provider);
+        // You can now use the provider to interact with the wallet
+    },
+    onReject: () => {
+        console.log('Connection rejected by user.');
+    },
+});
+```
+
+The `init` method takes a configuration object with the following properties:
+- `appName`: The name of your application, which will be displayed to the user in the Loop wallet.
+- `network`: The network to connect to. Can be `local`, `devnet`, or `mainnet`.
+- `onAccept`: A callback function that is called when the user accepts the connection. It receives a `provider` object.
+- `onReject`: A callback function that is called when the user rejects the connection.
+
+### 2. Connect to the wallet
+
+To initiate the connection, call `loop.connect()`:
+
+```javascript
+loop.connect();
+```
+
+This will open a modal with a QR code for the user to scan with their Loop wallet.
+
+### 3. Using the Provider
+
+Once the connection is established, the `onAccept` callback will receive a `provider` object. This object provides methods to interact with the user's wallet and the DAML ledger.
+
+The provider object has the `party_id` of the connected user.
+
+#### Get Holdings
+
+To get the user's token holdings:
+
+```javascript
+const holdings = await provider.getHolding();
+console.log(holdings);
+```
+
+#### Get Active Contracts
+
+You can query for active contracts by `templateId` or `interfaceId`.
+
+By Template ID:
+```javascript
+const contracts = await provider.getActiveContracts({ 
+    templateId: '#splice-amulet:Splice.Amulet:Amulet' 
+});
+console.log(contracts);
+```
+
+By Interface ID:
+```javascript
+const contracts = await provider.getActiveContracts({ 
+    interfaceId: '#splice-api-token-holding-v1:Splice.Api.Token.HoldingV1:Holding' 
+});
+console.log(contracts);
+```
+
+#### Submit a Transaction
+
+To submit a DAML transaction, you need to construct a command object and pass it to `submitTransaction`:
+
+```javascript
+const damlCommand = {
+    commands: [{
+        ExerciseCommand: {
+            templateId: "#splice-api-token-transfer-instruction-v1:Splice.Api.Token.TransferInstructionV1:TransferFactory",
+            contractId: 'your-contract-id', // The contract ID to exercise the choice on
+            choice: 'TransferFactory_Transfer',
+            choiceArgument: {
+                // ... your choice arguments
+            }
+        }
+    }],
+    // ... other command properties
+};
+
+try {
+    const result = await provider.submitTransaction(damlCommand);
+    console.log('Transaction successful:', result);
+} catch (error) {
+    console.error('Transaction failed:', error);
+}
+```
+
+#### Sign a Message
+
+You can request the user to sign an arbitrary message:
+
+```javascript
+const message = 'Hello, Loop!';
+try {
+    const signature = await provider.signMessage(message);
+    console.log('Signature:', signature);
+} catch (error) {
+    console.error('Signing failed:', error);
+}
+```
 
 # API
 

package/dist/index.js

@@ -2164,7 +2164,16 @@ class Connection {
     if (!response.ok) {
       throw new Error("Session verification failed.");
     }
-    return response.json();
+    const data = await response.json();
+    if (!data?.party_id || !data?.public_key) {
+      throw new Error("Invalid session verification response.");
+    }
+    const account = {
+      party_id: data?.party_id,
+      auth_token: authToken,
+      public_key: data?.public_key
+    };
+    return account;
   }
   websocketUrl(ticketId) {
     return `${this.network === "local" ? "ws" : "wss"}://${this.apiUrl.replace("https://", "").replace("http://", "")}/api/v1/.connect/pair/ws/${ticketId}`;
@@ -2203,15 +2212,17 @@ function generateRequestId() {
 class Provider {
   connection;
   party_id;
+  public_key;
   auth_token;
   requests = new Map;
   requestTimeout = 30000;
-  constructor({ connection, party_id, auth_token, requestTimeout }) {
+  constructor({ connection, party_id, public_key, auth_token, requestTimeout }) {
     if (!connection) {
       throw new Error("Provider requires a connection object.");
     }
     this.connection = connection;
     this.party_id = party_id;
+    this.public_key = public_key;
     this.auth_token = auth_token;
     this.requestTimeout = requestTimeout || 30000;
   }
@@ -2297,21 +2308,20 @@ class LoopSDK {
     const existingConnectionRaw = localStorage.getItem("loop_connect");
     if (existingConnectionRaw) {
       try {
-        console.log("Existing connection raw:", existingConnectionRaw);
-        const { ticketId, authToken, partyId } = JSON.parse(existingConnectionRaw);
-        if (authToken && partyId) {
+        const { ticketId, authToken, partyId, publicKey } = JSON.parse(existingConnectionRaw);
+        if (authToken && partyId && publicKey) {
           try {
             const verifiedAccount = await this.connection.verifySession(authToken);
             if (verifiedAccount.party_id === partyId) {
-              this.provider = new Provider({ connection: this.connection, party_id: partyId, auth_token: authToken });
+              this.provider = new Provider({ connection: this.connection, party_id: partyId, auth_token: authToken, public_key: publicKey });
               this.onAccept?.(this.provider);
               if (ticketId) {
                 this.connection.connectWebSocket(ticketId, this.handleWebSocketMessage.bind(this));
               }
               return;
             }
-          } catch (error) {
-            console.log("Auto-login failed, token is invalid. Starting new connection.");
+          } catch (err) {
+            console.error("Auto-login failed, token is invalid. Starting new connection.", err);
           }
         }
         if (ticketId) {
@@ -2326,7 +2336,7 @@ class LoopSDK {
       }
       localStorage.removeItem("loop_connect");
     }
-    const sessionId = this.generateSessionId();
+    const sessionId = generateRequestId();
     try {
       const { ticket_id: ticketId } = await this.connection.getTicket(this.appName, sessionId, this.version);
       this.ticketId = ticketId;
@@ -2340,31 +2350,27 @@ class LoopSDK {
     }
   }
   handleWebSocketMessage(event) {
-    console.log("Received message:", event.data);
     const message = JSON.parse(event.data);
     if (message.type === "handshake_accept" /* HANDSHAKE_ACCEPT */) {
-      const { authToken, partyId } = message.payload || {};
-      console.log("Handshake accepted, token and account received.", authToken, partyId);
-      if (authToken && partyId) {
-        this.provider = new Provider({ connection: this.connection, party_id: partyId, auth_token: authToken });
-        console.log("Handshake accepted, token and account received.");
+      const { authToken, partyId, publicKey } = message.payload || {};
+      if (authToken && partyId && publicKey) {
+        this.provider = new Provider({ connection: this.connection, party_id: partyId, auth_token: authToken, public_key: publicKey });
         const connectionInfoRaw = localStorage.getItem("loop_connect");
         if (connectionInfoRaw) {
           try {
             const connectionInfo = JSON.parse(connectionInfoRaw);
             connectionInfo.authToken = authToken;
             connectionInfo.partyId = partyId;
+            connectionInfo.publicKey = publicKey;
             localStorage.setItem("loop_connect", JSON.stringify(connectionInfo));
             this.onAccept?.(this.provider);
             this.hideQrCode();
-            this.connection?.connectWebSocket(connectionInfo.ticketId, this.handleWebSocketMessage.bind(this));
           } catch (error) {
             console.error("Failed to update local storage with auth token.", error);
           }
         }
       }
     } else if (message.type === "handshake_reject" /* HANDSHAKE_REJECT */) {
-      console.log("Connection rejected.");
       localStorage.removeItem("loop_connect");
       this.connection?.ws?.close();
       this.onReject?.();
@@ -2419,9 +2425,6 @@ class LoopSDK {
       this.overlay = null;
     }
   }
-  generateSessionId() {
-    return crypto.randomUUID();
-  }
 }
 var loop = new LoopSDK;
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fivenorth/loop-sdk",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "author": "hello@fivenorth.io",
   "main": "dist/index.js",
   "module": "dist/index.js",