Merge pull request #90 from leo42/smartMultisig

Smart multisig

.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

Fe/package.json

@@ -5,9 +5,11 @@
   "main": "index.js",
   "scripts": {
     "build": "webpack --mode=production",
-    "start": "webpack  serve --mode=development",
-    "dev": "concurrently \"webpack  --mode=development --watch\" \"webpack  serve --mode=development\"",
-    "Uidev": "concurrently \"webpack  --mode=development --watch\"  \"cd build && node --trace-uncaught server.js \""
+    "start": "webpack serve --mode=development",
+    "dev": "concurrently \"webpack --mode=development --watch\" \"webpack serve --mode=development\"",
+    "Uidev": "concurrently \"webpack --mode=development --watch\"  \"cd build && node --trace-uncaught server.js \"",
+    "type-check": "tsc --noEmit",
+    "type-check:watch": "npm run type-check -- --watch"
   },
   "keywords": [],
   "author": "",
@@ -16,26 +18,34 @@
     "@babel/core": "^7.21.0",
     "@babel/preset-env": "^7.15.0",
     "@babel/preset-react": "^7.14.5",
+    "@effect/schema": "^0.72.3",
+    "@lucid-evolution/lucid": "^0.3.44",
     "axios": "^1.2.2",
     "babel-loader": "^8.0.6",
     "buffer": "^6.0.3",
-    "crypto-js": "^4.1.1",
-    "lucid-cardano": "0.10.7",
+    "crypto-js": "^4.2.0",
+    "lucid-cardano": "^0.10.10",
     "qrcode": "^1.5.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-toastify": "^9.1.1",
     "socket.io-client": "^4.5.4",
-    "style-loader": "^3.3.1"
+    "style-loader": "^3.3.1",
+    "typescript": "^5.6.2"
   },
   "devDependencies": {
     "@svgr/webpack": "^6.5.1",
+    "@types/crypto-js": "^4.2.2",
+    "@types/json-schema": "^7.0.15",
+    "@types/react": "^17.0.80",
+    "@types/react-dom": "^17.0.11",
     "concurrently": "^7.6.0",
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.7.3",
     "html-webpack-plugin": "^5.5.3",
     "raw-loader": "^4.0.2",
     "svg-url-loader": "^8.0.0",
+    "ts-loader": "^9.4.2",
     "webpack": "^5.75.0",
     "webpack-cli": "^4.8.0",
     "webpack-dev-server": "^4.11.1",

Fe/src/App.css

@@ -126,6 +126,7 @@ select{
   width: 100vw;
   flex-direction: column;
   justify-content: center;
+  align-items: center;
   margin: 0px;
   position: absolute;
   top: 200px;
@@ -135,6 +136,7 @@ select{
 .WalletMain{
   align-items: center;
   margin: 20px;
+  width: 100%;
 }
 
 .tooltip:hover::after{

Fe/src/Wallet.js

@@ -238,7 +238,6 @@ setPendingTxs(pendingTxs){
 
     async checkTransactions(){
 
-      await this.loadUtxos()
       for (let i = this.pendingTxs.length-1 ; i >= 0 ; i--) {
         const isValid = await this.checkTransaction(this.pendingTxs[i].tx)
         if (!isValid){
@@ -681,8 +680,11 @@ setPendingTxs(pendingTxs){
       return "Sucsess"
     }
 
+    getSignerName(keyHash){
+        return this.signersNames.find(signer => signer.hash === keyHash)?.name || '';
+    }
 
-    async createDelegationTx(pool, signers){ 
+    async createDelegationTx(pool, dRepId, signers){ 
       const curentDelegation = await this.getDelegation()
       const rewardAddress =  this.lucid.utils.validatorToRewardAddress(this.lucidNativeScript)
       const sigCheck = this.checkSigners(signers)
@@ -830,6 +832,29 @@ setPendingTxs(pendingTxs){
 
     }
 
+    updateSignerName(keyHash, name){
+
+      function changeName(json, keyHash, name){
+          if (json.keyHash === keyHash){
+            json.name = name
+          } 
+          if (json.type === "all" || json.type === "any" || json.type === "atLeast"){
+            json.scripts.map( (script,index) => {
+              changeName(script, keyHash, name)
+            })
+          }
+      }
+
+      changeName(this.wallet_script, keyHash, name)
+
+      this.signersNames.map( (signer,index) => {
+        if (signer.hash === keyHash){
+          this.signersNames[index].name = name
+        }
+      })
+    }
+
+
     resetDefaultSigners(){  
       const signersNames = this.signersNames.map( (signer) => {
         signer.isDefault = false

Fe/src/components/AddressSelect.css

@@ -0,0 +1,25 @@
+.address-select-container{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.address-select-container button{
+    margin-left: 10px;
+    border-radius: 10px; /* Rounding the right corners */
+    background-color: var(--clrInputs); /* Setting background color according to project defaults */
+    color: var(--clrNavText); /* Setting text color according to project defaults */
+}
+
+.address-select-container select{
+    margin-left: 10px;
+}
+
+.address-select-container input{
+    margin-left: 10px;
+}
+.addressSelect{
+    max-width: 80vw;
+
+}

Fe/src/components/AddressSelect.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import './AddressSelect.css';
+interface AddressSelectProps {
+    wallet: any;
+    moduleRoot: any;
+    selectedAddress: string;
+    onAddressChange: (address: string) => void;
+    showAll?: boolean;
+    setName?: boolean;  
+}
+
+const AddressSelect: React.FC<AddressSelectProps> = ({ wallet, moduleRoot, selectedAddress, onAddressChange, showAll = true  , setName = false}) => {
+  return (
+    <div className="address-select-container">
+        <div>
+      <select
+        className="addressSelect"
+        value={selectedAddress}
+        onChange={(event) => onAddressChange(event.target.value)}
+      >
+        {showAll && <option value="">All</option>}
+        {wallet.getFundedAddress().map((item: string, index: number) => (
+          <option key={index} value={item}>
+            {wallet.getAddressName(item)}
+          </option>
+        ))}
+      </select>
+      {selectedAddress !== wallet.getDefaultAddress() && (
+        <button className="defaultButton" onClick={() => moduleRoot.setDefaultAddress(selectedAddress)}>
+          Make Default
+        </button>
+      )}
+      </div>
+      {setName &&  !["",wallet.getAddress()].includes(selectedAddress) && <input type="text" placeholder="Name" onChange={(event) => moduleRoot.changeAddressName(selectedAddress, event.target.value)} />}
+    </div>
+  );
+};
+
+export default AddressSelect;

Fe/src/components/Multisig/MultisigContainer.css

@@ -1,4 +1,14 @@
 .MultisigContainer{
     margin-top: 100px;
     height: 0px;
+}
+
+.TokenVaultsContainerHeader{
+    display: flex;
+    justify-content: space-between;
+    width: 100vw;
+    flex-direction: row;
+    position: absolute;
+    top: 115px;
+    z-index: -10;
 }

Fe/src/components/Multisig/MultisigContainer.js

@@ -179,7 +179,7 @@ async setState(state){
       myWallet.setAddressNamess(wallets[index].addressNames)
       myWallet.setDefaultSigners(wallets[index].defaultSigners)
       myWallet.setPendingTxs(wallets[index].pendingTxs)
-      await myWallet.checkTransactions()
+      await myWallet.loadUtxos()
       await myWallet.setCollateralDonor(wallets[index].collateralDonor)
       state.wallets.push(myWallet)
     }
@@ -256,11 +256,20 @@ async setState(state){
 
     }
   }
+  getSigners(){
+    const wallets = this.state.wallets
+    return wallets[this.state.selectedWallet].getSigners()
+  }
 
-  async createDelegationTx(pool,signers){
+  getSignerName(keyHash){
+    const wallets = this.state.wallets
+    return wallets[this.state.selectedWallet].getSignerName(keyHash)
+  }
+
+  async createDelegationTx(pool, dRepId, signers){
     try{
     const wallets = this.state.wallets
-     await this.state.wallets[this.state.selectedWallet].createDelegationTx(pool,signers)
+     await this.state.wallets[this.state.selectedWallet].createDelegationTx(pool, dRepId, signers)
     this.setState({wallets})
     toast.info('Delegation Transaction created');
     }catch(e){
@@ -333,6 +342,11 @@ async setState(state){
   }
 
 
+  updateSignerName(keyHash, name){
+    const wallets = this.state.wallets
+    wallets[this.state.selectedWallet].updateSignerName(keyHash, name)
+    this.setState({wallets})
+  }
 
   changeAddressName(address,name){
     try {

Fe/src/components/Multisig/WalletMain.js

@@ -4,7 +4,7 @@ import WalletDelegation from '../WalletDelegation';
 import WalletOverview from '../Overview'
 import TransactionHistory from '../TransactionHistory';
 import Receive from '../Receive';
-import PendingTxs from './PendingTxs';
+import PendingTxs from '../PendingTxs';
 import './WalletMain.css';
 
 class WalletMain extends React.Component {
@@ -25,7 +25,7 @@ class WalletMain extends React.Component {
             case "pendingTxs": 
                 return( <PendingTxs key={this.props.moduleRoot.state.selectedWallet+"pendingTxs"} wallet={this.props.wallet} root={this.props.root}  moduleRoot={this.props.moduleRoot}></PendingTxs>)
             case "transactions": 
-                return  <TransactionHistory root={this.props.root}  wallet={this.props.wallet}   key={this.props.moduleRoot.state.selectedWallet}>  moduleRoot={this.props.moduleRoot} </TransactionHistory> 
+                return  <TransactionHistory root={this.props.root}  wallet={this.props.wallet}  moduleRoot={this.props.moduleRoot} key={this.props.moduleRoot.state.selectedWallet}>  moduleRoot={this.props.moduleRoot} </TransactionHistory> 
             case "receive": 
                 return  <Receive root={this.props.root}  wallet={this.props.wallet}  key={this.props.moduleRoot.state.selectedWallet}> moduleRoot={this.props.moduleRoot} </Receive> 
         }

Fe/src/components/NavBar.js

@@ -38,8 +38,7 @@ function NavBar(props){
 
                 <div className="navMenuPop" ></div>
                 <div className="navMenuOption" onClick={() =>  props.root.setModule("multisig")}>Multisig</div>
-                <div className="navMenuOption" onClick={() =>  props.root.setModule("tokenVault")}>TokenVaults</div>
-                <div className="navMenuOption" onClick={() =>  props.root.setModule("minting")}>Minting</div>
+                <div className="navMenuOption" onClick={() =>  props.root.setModule("smartWallets")}>Smart Wallets</div>
                 <div className="navMenuOption" onClick={() => props.root.showModal("settings")}>Settings</div>
             </div>
             </div>