Use client-browser

package.json

@@ -11,9 +11,10 @@
     "dependencies": {
         "@craco/craco": "^6.4.5",
         "@creativecommons/cc-assets": "^0.1.0",
-        "@logion/crossmint": "^0.1.27",
-        "@logion/extension": "^0.7.1",
-        "@logion/multiversx": "^0.1.8",
+        "@logion/client-browser": "^0.1.0-1",
+        "@logion/crossmint": "^0.1.28-1",
+        "@logion/extension": "^0.7.2-1",
+        "@logion/multiversx": "^0.1.9-1",
         "@multiversx/sdk-extension-provider": "^2.0.7",
         "@popperjs/core": "^2.11.6",
         "@types/qrcode": "^1.5.0",

src/__mocks__/@logion/client-browser.ts

@@ -0,0 +1,19 @@
+export class BrowserFile {
+
+    constructor(blob: Blob) {
+        this.blob = blob;
+    }
+
+    private blob: Blob;
+
+    getBlob() {
+        return this.blob;
+    }
+}
+
+export class BrowserAxiosFileUploader {
+
+    async upload() {
+
+    }
+}

src/loc/FileModel.test.ts

@@ -1,4 +1,5 @@
 import { Token, HashOrContent } from "@logion/client";
+import { BrowserFile } from "@logion/client-browser";
 import { Hash } from "@logion/node-api"
 import { AxiosInstance } from "axios";
 import { DEFAULT_LEGAL_OFFICER, PATRICK } from "src/common/TestData";
@@ -108,7 +109,7 @@ describe("FileModel", () => {
             axios,
             legalOfficer,
             fileId,
-            file: HashOrContent.fromContent(file),
+            file: HashOrContent.fromContent(new BrowserFile(file)),
         });
 
         expect(axios.put).toBeCalledWith(

src/loc/FileModel.ts

@@ -1,6 +1,7 @@
 import { AxiosInstance } from "axios";
 import { LegalOfficer, Token, HashOrContent, downloadFile, TypedFile } from "@logion/client";
 import { Hash } from "@logion/node-api";
+import { BrowserFile } from "@logion/client-browser";
 
 export const LO_FILE_IDS = [ 'oath-logo', 'header-logo', 'seal' ];
 
@@ -69,7 +70,7 @@ export async function addLoFile(
 ): Promise<void> {
     await parameters.file.finalize();
     const formData = new FormData();
-    formData.append('file', parameters.file.content as File, parameters.fileId);
+    formData.append('file', (parameters.file.content as BrowserFile).getBlob(), parameters.fileId);
     formData.append('hash', parameters.file.contentHash.toHex());
     await parameters.axios.put(
         `/api/lo-file/${ parameters.legalOfficer }/${ parameters.fileId }`,

src/loc/ImportItems.tsx

@@ -32,6 +32,7 @@ import Alert from "src/common/Alert";
 import { UUID } from "@logion/node-api";
 import config from "../config";
 import EstimatedFees from "./fees/EstimatedFees";
+import { BrowserFile } from "@logion/client-browser";
 
 type Submitters = Record<string, Call>;
 
@@ -174,7 +175,10 @@ export default function ImportItems() {
                     name: item.files[0].name,
                     contentType: item.files[0].contentType,
                     size: item.files[0].size,
-                    hashOrContent: new HashOrContent({ hash: item.files[0].hashOrContent.contentHash, content: file }),
+                    hashOrContent: new HashOrContent({
+                        hash: item.files[0].hashOrContent.contentHash,
+                        content: new BrowserFile(file),
+                    }),
                 }),
             });
             item.upload = false;

src/loc/LocPrivateFileButton.tsx

@@ -12,6 +12,7 @@ import { Row } from "../common/Grid";
 import { useLocContext } from "./LocContext";
 import { EditableRequest, HashOrContent } from "@logion/client";
 import { Hash } from "@logion/node-api";
+import { BrowserFile } from "@logion/client-browser";
 
 type Status = 'Idle' | 'UploadDialog' | 'Hashing' | 'Uploading';
 
@@ -34,7 +35,7 @@ export function LocPrivateFileButton(props: Props) {
         setUploadError("")
         if (file) {
             setStatus('Hashing')
-            const content = await HashOrContent.fromContentFinalized(file);
+            const content = await HashOrContent.fromContentFinalized(new BrowserFile(file));
             const hash = content.contentHash;
             const existingItem = locItems.find(item => item.type === "Document" && item.as<FileData>().hash.equalTo(hash));
             if (existingItem !== undefined) {

src/loc/record/AddTokensRecordDialog.tsx

@@ -11,6 +11,7 @@ import FormGroup from "src/common/FormGroup";
 import Icon from "src/common/Icon";
 import { useLogionChain } from "src/logion-chain";
 import { useLocContext } from "../LocContext";
+import { BrowserFile } from "@logion/client-browser";
 
 export interface Props {
     show: boolean;
@@ -59,7 +60,7 @@ export default function AddTokensRecordDialog(props: Props) {
         setUploadError("")
         if (file) {
             setStatus('Hashing')
-            const content = await HashOrContent.fromContentFinalized(file);
+            const content = await HashOrContent.fromContentFinalized(new BrowserFile(file));
             const hash = content.contentHash;
             const existingRecord = props.records.find(record => record.id === hash);
             if (existingRecord !== undefined) {

src/logion-chain/LogionChainContext.tsx

@@ -32,6 +32,7 @@ import {
 } from '../common/Storage';
 
 import { getEndpoints, NodeMetadata } from './Connection';
+import { BrowserAxiosFileUploader } from '@logion/client-browser';
 
 type ConsumptionStatus = 'PENDING' | 'STARTING' | 'STARTED';
 
@@ -407,7 +408,8 @@ const LogionChainContextProvider = (props: LogionChainContextProviderProps): JSX
                 const peerId = await api.polkadot.rpc.system.localPeerId();
                 const logionClient = await LogionClient.create({
                     rpcEndpoints,
-                    directoryEndpoint: config.directory
+                    directoryEndpoint: config.directory,
+                    buildFileUploader: () => new BrowserAxiosFileUploader(),
                 });
 
                 let startupTokens: AccountTokens;

src/settings/ValuesFiles.tsx

@@ -1,4 +1,5 @@
 import { HashOrContent } from "@logion/client";
+import { BrowserFile } from "@logion/client-browser";
 import Table, { ActionCell } from "../common/Table";
 import FileSelectorButton from "../common/FileSelectorButton";
 import { useCallback } from "react";
@@ -30,7 +31,7 @@ export function ValuesFiles() {
             await addLoFile({
                 axios: axiosFactory!(legalOfficer),
                 legalOfficer: legalOfficer!,
-                file: HashOrContent.fromContent(file),
+                file: HashOrContent.fromContent(new BrowserFile(file)),
                 fileId
             });
         } finally {

yarn.lock

@@ -2976,47 +2976,62 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@logion/client@npm:^0.33.0":
-  version: 0.33.0
-  resolution: "@logion/client@npm:0.33.0"
+"@logion/client-browser@npm:^0.1.0-1":
+  version: 0.1.0-1
+  resolution: "@logion/client-browser@npm:0.1.0-1"
+  dependencies:
+    "@logion/client": ^0.34.0-1
+  checksum: c666257c179b395e719652c19ea272655e0b9c3c4e8c0f19f60cc050ffcddab8567a672f3430a522b138ca82394d991e2bc2ad56d506fbb6b8624ecd0fb8e39a
+  languageName: node
+  linkType: hard
+
+"@logion/client@npm:^0.34.0-1":
+  version: 0.34.0-1
+  resolution: "@logion/client@npm:0.34.0-1"
   dependencies:
     "@logion/node-api": ^0.24.0
     axios: ^0.27.2
     luxon: ^3.0.1
     mime-db: ^1.52.0
-  checksum: 5726273f62d2a9754fa176e7f314435bdc0ef4f610515a753f0d828ee3d57e732d9797a51743a01f4fb101c65148df420e47b7c66c0ed21064216e1c2ecf6a0a
+  checksum: 11da4f4e95c715de7157a8721b79dddfcfd8c7097d36fbf00c70675eddcc4ed4444358811255e2d0f30f742cedf9c2bc0157bfcbe64571cf40acd5dc5871a00f
   languageName: node
   linkType: hard
 
-"@logion/crossmint@npm:^0.1.27":
-  version: 0.1.27
-  resolution: "@logion/crossmint@npm:0.1.27"
+"@logion/crossmint@npm:^0.1.28-1":
+  version: 0.1.28-1
+  resolution: "@logion/crossmint@npm:0.1.28-1"
   dependencies:
     "@crossmint/connect": ^0.0.8
-    "@logion/client": ^0.33.0
-  checksum: f9173af6932d5bee886e3fa0bd97f68ab38c26c44f193e434d800fc5e95c4387ec853be4f9b23ac3e9d0e2a28fbe0df7465107582e62518eb65ee56bdb5e2597
+    "@logion/client-browser": ^0.1.0-1
+  peerDependencies:
+    "@logion/client-browser": ^0.1.0-1
+  checksum: 9968cf19b3306fdc1e93c62619da36fd7f1277debe2ab0758500440c86d6300fff86548705d11b40d149916a7c0e52e9c95021b6ac7609696e5f65b150b4c8ad
   languageName: node
   linkType: hard
 
-"@logion/extension@npm:^0.7.1":
-  version: 0.7.1
-  resolution: "@logion/extension@npm:0.7.1"
+"@logion/extension@npm:^0.7.2-1":
+  version: 0.7.2-1
+  resolution: "@logion/extension@npm:0.7.2-1"
   dependencies:
-    "@logion/client": ^0.33.0
+    "@logion/client-browser": ^0.1.0-1
     "@polkadot/extension-compat-metamask": ^0.46.5
     "@polkadot/extension-dapp": ^0.46.5
-  checksum: 3c75a1bd50995d6238f54f65f36a159b9b21f5073f183ed1f0500137dafaa5d82c1e530a84e20135388cc5f905906b1d6e62406652190f1665f20b674c5f80fc
+  peerDependencies:
+    "@logion/client-browser": ^0.1.0-1
+  checksum: 8fb89b541dfbc622a01a8c01281aca35e1a3018bd7afcad94a371e6961e1ac3b6903723d01d9ccfef8be364a3b6375c23b3dd0c2bf09595f3408f102d4560369
   languageName: node
   linkType: hard
 
-"@logion/multiversx@npm:^0.1.8":
-  version: 0.1.8
-  resolution: "@logion/multiversx@npm:0.1.8"
+"@logion/multiversx@npm:^0.1.9-1":
+  version: 0.1.9-1
+  resolution: "@logion/multiversx@npm:0.1.9-1"
   dependencies:
-    "@logion/client": ^0.33.0
+    "@logion/client-browser": ^0.1.0-1
     "@multiversx/sdk-core": ^12.4.3
     "@multiversx/sdk-extension-provider": ^2.0.7
-  checksum: 63a6718cb97b3e9ad28e1a7b6991c0390c2c4c89f11d850f2c427cbc2c06d968d2df7832904020e10bd1657e7c5af8057d5d19ebaa4223db64ad50e1ae04b35d
+  peerDependencies:
+    "@logion/client-browser": ^0.1.0-1
+  checksum: a8490667ba240b8940e4ee131de213540d3e40316f4818c3234548bc3bc6f52c6051cf9119327b82d5a858059f7edc8bb0372d7605464654f481a6952a1b7e4e
   languageName: node
   linkType: hard
 
@@ -12560,9 +12575,10 @@ __metadata:
     "@babel/preset-react": ^7.18.6
     "@craco/craco": ^6.4.5
     "@creativecommons/cc-assets": ^0.1.0
-    "@logion/crossmint": ^0.1.27
-    "@logion/extension": ^0.7.1
-    "@logion/multiversx": ^0.1.8
+    "@logion/client-browser": ^0.1.0-1
+    "@logion/crossmint": ^0.1.28-1
+    "@logion/extension": ^0.7.2-1
+    "@logion/multiversx": ^0.1.9-1
     "@multiversx/sdk-extension-provider": ^2.0.7
     "@popperjs/core": ^2.11.6
     "@testing-library/dom": ^8.17.1