@tari-project/tarijs 0.10.1 → 0.12.0

package/packages/{tari_permissions/src/tari_permissions.ts → permissions/src/permissions.ts}

@@ -1,8 +1,10 @@
 export class Hash {
   private value: number[];
+
   constructor(value: number[]) {
     this.value = value;
   }
+
   toJSON() {
     return this.value;
   }
@@ -21,10 +23,12 @@ export enum TAG {
 export class Tagged {
   private value: any;
   private tag: number;
+
   constructor(tag: number, value: any) {
     this.tag = tag;
     this.value = value;
   }
+
   toJSON() {
     return { "@@TAGGED@@": [this.tag, this.value] };
   }
@@ -32,9 +36,11 @@ export class Tagged {
 
 export class ResourceAddress {
   private tagged: Tagged;
+
   constructor(hash: Hash) {
     this.tagged = new Tagged(TAG.ResourceAddress, hash);
   }
+
   toJSON() {
     return this.tagged.toJSON();
   }
@@ -42,9 +48,11 @@ export class ResourceAddress {
 
 export class UnclaimedConfidentialOutputAddress {
   private hash: Hash;
+
   constructor(hash: Hash) {
     this.hash = hash;
   }
+
   toJSON() {
     return this.hash.toJSON();
   }
@@ -52,11 +60,14 @@ export class UnclaimedConfidentialOutputAddress {
 
 export type u64 = number;
 export type u32 = number;
+
 export class U256 {
   private value: number[];
+
   constructor(value: number[]) {
     this.value = value;
   }
+
   toJSON() {
     return this.value;
   }
@@ -66,9 +77,11 @@ export type NonFungibleIdType = u32 | u64 | string | U256;
 
 export class NonFungibleId {
   private value: NonFungibleIdType;
+
   constructor(value: NonFungibleIdType) {
     this.value = value;
   }
+
   toJSON() {
     switch (typeof this.value) {
       case "string":
@@ -83,10 +96,12 @@ export class NonFungibleId {
 export class NonFungibleAddressContents {
   private resource_address: ResourceAddress;
   private id: NonFungibleId;
+
   constructor(resource_address: ResourceAddress, id: NonFungibleId) {
     this.resource_address = resource_address;
     this.id = id;
   }
+
   toJSON() {
     return { resource_address: this.resource_address, id: this.id };
   }
@@ -94,9 +109,11 @@ export class NonFungibleAddressContents {
 
 export class NonFungibleAddress {
   private tagged: Tagged;
+
   constructor(value: NonFungibleAddressContents) {
     this.tagged = new Tagged(TAG.NonFungibleAddress, value);
   }
+
   toJSON() {
     return this.tagged.toJSON();
   }
@@ -105,9 +122,11 @@ export class NonFungibleAddress {
 
 export class ComponentAddress {
   private tagged: Tagged;
+
   constructor(hash: Hash) {
     this.tagged = new Tagged(TAG.ComponentAddress, hash);
   }
+
   toJSON() {
     return this.tagged.toJSON();
   }
@@ -115,9 +134,11 @@ export class ComponentAddress {
 
 export class VaultId {
   private tagged: Tagged;
+
   constructor(hash: Hash) {
     this.tagged = new Tagged(TAG.VaultId, hash);
   }
+
   toJSON() {
     return this.tagged.toJSON();
   }
@@ -132,9 +153,11 @@ export type SubstateAddressType =
 
 export class SubstateAddress {
   private value: SubstateAddressType;
+
   constructor(value: SubstateAddressType) {
     this.value = value;
   }
+
   toJSON() {
     if (this.value instanceof ComponentAddress) {
       return { Component: this.value };
@@ -151,9 +174,11 @@ export class SubstateAddress {
 
 export class TariPermissionAccountBalance {
   private value: SubstateAddress;
+
   constructor(value: SubstateAddress) {
     this.value = value;
   }
+
   toJSON() {
     console.log("stringify", this.value);
     return { AccountBalance: this.value };
@@ -161,7 +186,9 @@ export class TariPermissionAccountBalance {
 }
 
 export class TariPermissionAccountInfo {
-  constructor() {}
+  constructor() {
+  }
+
   toJSON() {
     return "AccountInfo";
   }
@@ -169,6 +196,7 @@ export class TariPermissionAccountInfo {
 
 export class TariPermissionAccountList {
   private value?: ComponentAddress | null;
+
   constructor(value?: ComponentAddress) {
     if (value === undefined) {
       this.value = null;
@@ -176,6 +204,7 @@ export class TariPermissionAccountList {
       this.value = value;
     }
   }
+
   toJSON() {
     console.log("JSON TariPermissionAccountList", this.value);
     if (this.value === undefined) {
@@ -187,23 +216,30 @@ export class TariPermissionAccountList {
 }
 
 export class TariPermissionKeyList {
-  constructor() {}
+  constructor() {
+  }
+
   toJSON() {
     return "KeyList";
   }
 }
 
 export class TariPermissionTransactionGet {
-  constructor() {}
+  constructor() {
+  }
+
   toJSON() {
     return "TransactionGet";
   }
 }
+
 export class TariPermissionTransactionSend {
   private value?: SubstateAddress;
+
   constructor(value?: SubstateAddress) {
     this.value = value;
   }
+
   toJSON() {
     console.log("JSON TariPermissionTransactionSend", this.value);
     if (this.value === undefined) {
@@ -217,10 +253,12 @@ export class TariPermissionTransactionSend {
 export class TariPermissionGetNft {
   private value0?: SubstateAddress;
   private value1?: ResourceAddress;
+
   constructor(value0?: SubstateAddress, value1?: ResourceAddress) {
     this.value0 = value0;
     this.value1 = value1;
   }
+
   toJSON() {
     return { GetNft: [this.value0, this.value1] };
   }
@@ -228,30 +266,38 @@ export class TariPermissionGetNft {
 
 export class TariPermissionNftGetOwnershipProof {
   private value?: ResourceAddress;
+
   constructor(value?: ResourceAddress) {
     this.value = value;
   }
+
   toJSON() {
     return { NftGetOwnershipProof: this.value };
   }
 }
 
 export class TariPermissionTransactionsGet {
-  constructor() {}
+  constructor() {
+  }
+
   toJSON() {
     return "TransactionGet";
   }
 }
 
 export class TariPermissionSubstatesRead {
-  constructor() {}
+  constructor() {
+  }
+
   toJSON() {
     return "SubstatesRead";
   }
 }
 
 export class TariPermissionTemplatesRead {
-  constructor() {}
+  constructor() {
+  }
+
   toJSON() {
     return "TemplatesRead";
   }
@@ -302,6 +348,10 @@ export class TariPermissions {
     return this;
   }
 
+  getPermissions(): TariPermission[] {
+    return this.permissions;
+  }
+
   toJSON() {
     return this.permissions;
   }

package/packages/react-mui-connect-button/moon.yml

@@ -0,0 +1,71 @@
+language: "typescript"
+platform: "node"
+type: "library"
+
+fileGroups:
+  configs:
+    - "tsconfig.json"
+    - "package.json"
+    - "eslint.config.ts"
+  sources:
+    - "src/**/*"
+  tests:
+    - "integration-tests/**/*"
+
+tasks:
+  build:
+    command: "pnpm run build"
+    inputs:
+      - "@files(sources)"
+      - "@files(configs)"
+    outputs:
+      - "dist"
+  format:
+    command: "pnpm run format"
+    inputs:
+      - "@files(sources)"
+      - "@files(configs)"
+      - "@files(tests)"
+    options:
+      runInCI: false
+  lint:
+    command: "pnpm run lint:fix"
+    inputs:
+      - "@files(sources)"
+      - "@files(configs)"
+      - "@files(tests)"
+    options:
+      runInCI: false
+    deps:
+      - "build"
+
+  lintCheck:
+    command: "pnpm run lint"
+    inputs:
+      - "@files(sources)"
+      - "@files(configs)"
+      - "@files(tests)"
+    deps:
+      - "build"
+  formatCheck:
+    command: "pnpm run format:check"
+    inputs:
+      - "@files(sources)"
+      - "@files(configs)"
+      - "@files(tests)"
+  test:
+    command: "pnpm run test"
+    inputs:
+      - "@files(sources)"
+      - "@files(tests)"
+      - "@files(configs)"
+    deps:
+      - "build"
+  integration-test:
+    command: "pnpm run integration-tests"
+    inputs:
+      - "@files(sources)"
+      - "@files(tests)"
+      - "@files(configs)"
+    deps:
+      - "build"

package/packages/react-mui-connect-button/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@tari-project/react-mui-connect-button",
+  "version": "0.12.0",
+  "description": "React component to connect your website to the Tari Ootle Wallet",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc -b",
+    "test": "echo 'no tests'",
+    "integration-tests": "vitest run integration-tests"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@tari-project/tari-permissions": "workspace:^",
+    "@tari-project/tari-signer": "workspace:^",
+    "@tari-project/tari-provider": "workspace:^",
+    "@tari-project/wallet-connect-signer": "workspace:^",
+    "@tari-project/wallet-daemon-signer": "workspace:^"
+  },
+  "peerDependencies": {
+    "@mui/icons-material": "^7",
+    "@mui/material": "^7",
+    "react": "^18 || ^19"
+  },
+  "devDependencies": {
+    "@types/node": "catalog:",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "typescript": "catalog:"
+  },
+  "files": [
+    "/dist"
+  ],
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts"
+}

package/packages/react-mui-connect-button/src/Logos.tsx

@@ -0,0 +1,60 @@
+export function TariLogo() {
+  return (<svg width="25px" height="25px" viewBox="0 0 25 25" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <title>node-icon</title>
+    <defs>
+      <linearGradient x1="18.2919102%" y1="10.0218476%" x2="75.2362057%" y2="77.3326874%" id="linearGradient-1">
+        <stop stopColor="#6239FF" offset="0%"></stop>
+        <stop stopColor="#C326D6" offset="100%"></stop>
+      </linearGradient>
+    </defs>
+    <g id="Final-Designs" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+      <g id="Icons">
+        <g id="node-icon">
+          <polygon id="Path" points="0 0 25 0 25 25 0 25"></polygon>
+          <path
+            d="M20.1635307,8.81670631 L20.1635307,11.1649473 L6.39264373,7.6223935 L11.0366915,4.59938041 L20.1635307,8.81670631 Z M11.8116251,18.6587023 L11.8116251,10.9999256 L19.1635161,12.8911326 L11.8116251,18.6587023 Z M9.89076494,17.9185993 L4.8364693,12.2747253 L4.8364693,9.20558518 L9.89076494,10.5058018 L9.89076494,17.9185993 Z M2.91551501,7.5936818 L2.91551501,13.0091801 L10.8424874,21.8606694 L22.084485,13.0410925 L22.084485,7.58822187 L10.8784476,2.41013641 L2.91551501,7.5936818 Z"
+            fill="url(#linearGradient-1)"></path>
+        </g>
+      </g>
+    </g>
+  </svg>);
+}
+
+export function TariLogoWhite() {
+  return (<svg width="25px" height="25px" viewBox="0 0 25 25" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <title>node-icon</title>
+    <defs>
+      <linearGradient x1="18.2919102%" y1="10.0218476%" x2="75.2362057%" y2="77.3326874%" id="linearGradient-1">
+        <stop stopColor="#FFFFFF" offset="0%"></stop>
+        <stop stopColor="#FFFFFF" offset="100%"></stop>
+      </linearGradient>
+    </defs>
+    <g id="Final-Designs" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+      <g id="Icons">
+        <g id="node-icon">
+          <polygon id="Path" points="0 0 25 0 25 25 0 25"></polygon>
+          <path
+            d="M20.1635307,8.81670631 L20.1635307,11.1649473 L6.39264373,7.6223935 L11.0366915,4.59938041 L20.1635307,8.81670631 Z M11.8116251,18.6587023 L11.8116251,10.9999256 L19.1635161,12.8911326 L11.8116251,18.6587023 Z M9.89076494,17.9185993 L4.8364693,12.2747253 L4.8364693,9.20558518 L9.89076494,10.5058018 L9.89076494,17.9185993 Z M2.91551501,7.5936818 L2.91551501,13.0091801 L10.8424874,21.8606694 L22.084485,13.0410925 L22.084485,7.58822187 L10.8784476,2.41013641 L2.91551501,7.5936818 Z"
+            fill="url(#linearGradient-1)"></path>
+        </g>
+      </g>
+    </g>
+  </svg>);
+}
+
+export function WalletConnectLogo() {
+
+  return (
+    <svg version="1.1" baseProfile="basic" id="Layer_1"
+         xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
+         viewBox="0 0 387.6 237.6">
+      <path id="WalletConnect_00000073703063438220642730000002917717552236472496_" fill="#3B99FC" d="M79.4,46.4
+  c63.2-61.9,165.7-61.9,228.9,0l7.6,7.4c3.2,3.1,3.2,8.1,0,11.2l-26,25.5c-1.6,1.5-4.1,1.5-5.7,0l-10.5-10.3
+  c-44.1-43.2-115.6-43.2-159.7,0l-11.2,11c-1.6,1.5-4.1,1.5-5.7,0L71,65.8c-3.2-3.1-3.2-8.1,0-11.2L79.4,46.4z M362.1,99.1l23.2,22.7
+  c3.2,3.1,3.2,8.1,0,11.2L280.8,235.3c-3.2,3.1-8.3,3.1-11.4,0c0,0,0,0,0,0l-74.1-72.6c-0.8-0.8-2.1-0.8-2.9,0c0,0,0,0,0,0
+  l-74.1,72.6c-3.2,3.1-8.3,3.1-11.4,0c0,0,0,0,0,0L2.4,133c-3.2-3.1-3.2-8.1,0-11.2l23.2-22.7c3.2-3.1,8.3-3.1,11.4,0l74.1,72.6
+  c0.8,0.8,2.1,0.8,2.9,0c0,0,0,0,0,0l74.1-72.6c3.2-3.1,8.3-3.1,11.4,0c0,0,0,0,0,0l74.1,72.6c0.8,0.8,2.1,0.8,2.9,0l74.1-72.6
+  C353.8,96,358.9,96,362.1,99.1z" />
+    </svg>);
+
+}

package/packages/react-mui-connect-button/src/TariConnectButton.tsx

@@ -0,0 +1,51 @@
+import * as React from "react";
+
+import Button from "@mui/material/Button";
+import { TariWalletSelectionDialog } from "./TariWalletSelectionDialog";
+import { TariSigner } from "@tari-project/tari-signer";
+import { TariLogoWhite } from "./Logos";
+import { WalletDaemonFetchParameters } from "@tari-project/wallet-daemon-signer";
+import { WalletConnectParameters } from "@tari-project/wallet-connect-signer";
+
+
+export interface TariConnectButtonProps {
+  isConnected: boolean;
+  disabled?: boolean;
+  onConnected?: (signer: TariSigner) => void;
+  walletConnectParams?: WalletConnectParameters,
+  walletDaemonParams?: WalletDaemonFetchParameters;
+}
+
+export function TariConnectButton(props: TariConnectButtonProps) {
+  const [walletSelectionOpen, setWalletSelectionOpen] = React.useState(false);
+
+  const handleConnectClick = () => {
+    setWalletSelectionOpen(true);
+  };
+
+  const onWalletSelectionClose = () => {
+    setWalletSelectionOpen(false);
+  };
+
+  return (
+    <>
+      {!props.walletDaemonParams && !props.walletConnectParams && (
+        <div style={{ color: "red" }}>
+          <strong>Warning:</strong> You must provide a WalletConnect project ID and/or Wallet Daemon parameters to use
+          the Tari Connect Button.
+        </div>
+      )}
+      <Button variant="contained" onClick={handleConnectClick} disabled={props.disabled || false}>
+        <TariLogoWhite />
+        <div style={{ paddingLeft: "10px" }}>{props.isConnected ? "Connected" : "Connect"}</div>
+      </Button>
+      <TariWalletSelectionDialog
+        open={walletSelectionOpen}
+        onClose={onWalletSelectionClose}
+        onConnected={props.onConnected}
+        walletConnectParams={props.walletConnectParams}
+        walletDaemonParams={props.walletDaemonParams}
+      />
+    </>
+  );
+}

package/packages/react-mui-connect-button/src/TariWalletSelectionDialog.tsx

@@ -0,0 +1,116 @@
+import { Box, Dialog, Divider, Stack, IconButton, Typography, CircularProgress } from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import Grid from "@mui/material/Grid";
+import Card from "@mui/material/Card";
+import CardContent from "@mui/material/CardContent";
+import { TariSigner } from "@tari-project/tari-signer";
+import { WalletDaemonTariSigner, WalletDaemonFetchParameters } from "@tari-project/wallet-daemon-signer";
+import { ReactElement, useState } from "react";
+import { WalletConnectTariSigner, WalletConnectParameters } from "@tari-project/wallet-connect-signer";
+import { TariLogo, WalletConnectLogo } from "./Logos";
+
+
+export interface WalletSelectionProps {
+  open: boolean;
+  onConnected?: (signer: TariSigner) => void;
+  walletConnectParams?: WalletConnectParameters;
+  walletDaemonParams?: WalletDaemonFetchParameters;
+  onClose: () => void;
+}
+
+export function TariWalletSelectionDialog(props: WalletSelectionProps): ReactElement {
+  const { onClose, open, onConnected, walletConnectParams, walletDaemonParams } = props;
+  const [isBusy, setIsBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleClose = onClose;
+
+  const onWalletDaemonClick = async () => {
+    if (!walletDaemonParams) {
+      throw new Error("Wallet Daemon parameters were not provided.");
+    }
+    const walletDaemonSigner = await WalletDaemonTariSigner.buildFetchSigner(walletDaemonParams);
+    onConnected?.(walletDaemonSigner);
+    handleClose();
+  };
+
+  const onWalletConnectClick = async () => {
+    if (!walletConnectParams?.projectId) {
+      throw new Error("WalletConnect params was not provided.");
+    }
+    setIsBusy(true);
+    setError(null);
+    try {
+      const walletConnectSigner = WalletConnectTariSigner.init(walletConnectParams);
+      const showDialog = await walletConnectSigner.connect();
+      // This must be before the showDialog call to prevent the dialog from appearing on top of the WalletConnect modal.
+      handleClose();
+      await showDialog();
+      onConnected?.(walletConnectSigner);
+    } catch (err) {
+      console.error("Error connecting to WalletConnect:", err);
+      setError(`Failed to connect to WalletConnect. ${err instanceof Error ? err.message : String(err)}`);
+    } finally {
+      setIsBusy(false);
+    }
+
+  };
+
+  return (
+    <Dialog fullWidth={true} onClose={handleClose} open={open}>
+
+      <Box sx={{ padding: 4, borderRadius: 4 }}>
+        <Stack direction="row" justifyContent="space-between" spacing={2}>
+          <Typography style={{ fontSize: 24 }}>Connect a wallet</Typography>
+          <IconButton aria-label="copy" onClick={handleClose}>
+            <CloseIcon style={{ fontSize: 24 }} />
+          </IconButton>
+        </Stack>
+        <Divider sx={{ mt: 3, mb: 3 }} variant="middle" />
+        {error && (
+          <Box sx={{ padding: 2, backgroundColor: "error.main", color: "white", borderRadius: 1, marginBottom: 2 }}>
+            <Typography variant="body2">{error}</Typography>
+          </Box>
+        )}
+        <Grid container spacing={2} justifyContent="center">
+          {walletDaemonParams && (
+            <Grid size={{ xs: 4 }}>
+              <WalletConnectionMethodCard logo={<TariLogo />} text="Tari Wallet Daemon"
+                                          callback={onWalletDaemonClick}></WalletConnectionMethodCard>
+            </Grid>
+          )}
+          {walletConnectParams?.projectId && (
+            <Grid size={{ xs: 4 }}>
+              {isBusy ? <CircularProgress /> :
+                <WalletConnectionMethodCard
+                  logo={<WalletConnectLogo />}
+                  text="WalletConnect"
+                  callback={onWalletConnectClick}
+                />}
+            </Grid>
+          )}
+        </Grid>
+      </Box>
+    </Dialog>
+  );
+}
+
+function WalletConnectionMethodCard({ logo, text, callback }: {
+  logo: ReactElement,
+  text: string,
+  callback: () => void
+}) {
+  return (
+    <Card variant="outlined" elevation={0}
+          sx={{ mty: 4, padding: 4, borderRadius: 4, width: "175px", height: "175px", cursor: "pointer" }}>
+      <CardContent onClick={callback}>
+        <Stack direction="column" spacing={2} alignItems="center">
+          <Box sx={{ textAlign: "center", width: "100%" }}>
+            <div style={{ borderRadius: 8, width: "50px", height: "50px" }}>{logo}</div>
+          </Box>
+          <Typography textAlign="center">{text}</Typography>
+        </Stack>
+      </CardContent>
+    </Card>
+  );
+}

package/packages/react-mui-connect-button/src/content/tari-logo-white.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="25px" height="25px" viewBox="0 0 25 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>node-icon</title>
+    <defs>
+        <linearGradient x1="18.2919102%" y1="10.0218476%" x2="75.2362057%" y2="77.3326874%" id="linearGradient-1">
+            <stop stop-color="#FFFFFF" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Final-Designs" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Icons">
+            <g id="node-icon">
+                <polygon id="Path" points="0 0 25 0 25 25 0 25"></polygon>
+                <path d="M20.1635307,8.81670631 L20.1635307,11.1649473 L6.39264373,7.6223935 L11.0366915,4.59938041 L20.1635307,8.81670631 Z M11.8116251,18.6587023 L11.8116251,10.9999256 L19.1635161,12.8911326 L11.8116251,18.6587023 Z M9.89076494,17.9185993 L4.8364693,12.2747253 L4.8364693,9.20558518 L9.89076494,10.5058018 L9.89076494,17.9185993 Z M2.91551501,7.5936818 L2.91551501,13.0091801 L10.8424874,21.8606694 L22.084485,13.0410925 L22.084485,7.58822187 L10.8784476,2.41013641 L2.91551501,7.5936818 Z" fill="url(#linearGradient-1)"></path>
+            </g>
+        </g>
+    </g>
+</svg>

package/packages/react-mui-connect-button/src/content/tari-logo.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="25px" height="25px" viewBox="0 0 25 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>node-icon</title>
+    <defs>
+        <linearGradient x1="18.2919102%" y1="10.0218476%" x2="75.2362057%" y2="77.3326874%" id="linearGradient-1">
+            <stop stop-color="#6239FF" offset="0%"></stop>
+            <stop stop-color="#C326D6" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Final-Designs" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Icons">
+            <g id="node-icon">
+                <polygon id="Path" points="0 0 25 0 25 25 0 25"></polygon>
+                <path d="M20.1635307,8.81670631 L20.1635307,11.1649473 L6.39264373,7.6223935 L11.0366915,4.59938041 L20.1635307,8.81670631 Z M11.8116251,18.6587023 L11.8116251,10.9999256 L19.1635161,12.8911326 L11.8116251,18.6587023 Z M9.89076494,17.9185993 L4.8364693,12.2747253 L4.8364693,9.20558518 L9.89076494,10.5058018 L9.89076494,17.9185993 Z M2.91551501,7.5936818 L2.91551501,13.0091801 L10.8424874,21.8606694 L22.084485,13.0410925 L22.084485,7.58822187 L10.8784476,2.41013641 L2.91551501,7.5936818 Z" fill="url(#linearGradient-1)"></path>
+            </g>
+        </g>
+    </g>
+</svg>

package/packages/react-mui-connect-button/src/content/walletconnect-logo.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" baseProfile="basic" id="Layer_1"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 387.6 237.6"
+	 xml:space="preserve">
+<path id="WalletConnect_00000073703063438220642730000002917717552236472496_" fill="#3B99FC" d="M79.4,46.4
+	c63.2-61.9,165.7-61.9,228.9,0l7.6,7.4c3.2,3.1,3.2,8.1,0,11.2l-26,25.5c-1.6,1.5-4.1,1.5-5.7,0l-10.5-10.3
+	c-44.1-43.2-115.6-43.2-159.7,0l-11.2,11c-1.6,1.5-4.1,1.5-5.7,0L71,65.8c-3.2-3.1-3.2-8.1,0-11.2L79.4,46.4z M362.1,99.1l23.2,22.7
+	c3.2,3.1,3.2,8.1,0,11.2L280.8,235.3c-3.2,3.1-8.3,3.1-11.4,0c0,0,0,0,0,0l-74.1-72.6c-0.8-0.8-2.1-0.8-2.9,0c0,0,0,0,0,0
+	l-74.1,72.6c-3.2,3.1-8.3,3.1-11.4,0c0,0,0,0,0,0L2.4,133c-3.2-3.1-3.2-8.1,0-11.2l23.2-22.7c3.2-3.1,8.3-3.1,11.4,0l74.1,72.6
+	c0.8,0.8,2.1,0.8,2.9,0c0,0,0,0,0,0l74.1-72.6c3.2-3.1,8.3-3.1,11.4,0c0,0,0,0,0,0l74.1,72.6c0.8,0.8,2.1,0.8,2.9,0l74.1-72.6
+	C353.8,96,358.9,96,362.1,99.1z"/>
+</svg>