Fix contract card buttons

olekon · Oct 9, 2021 · 50385cf · 50385cf
1 parent 29531f0
commit 50385cf
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 44 deletions.
diff --git a/src/components/contract/ContractForm.jsx b/src/components/contract/ContractForm.jsx
@@ -41,7 +41,7 @@ class ContractForm extends React.Component {
         this.formRef.current.validateFields();
     }
 
-    handleSubmit(values) {
+    handleSubmit(values) {        
         this.props.onAddContract(
             values.name,
             values.address,

diff --git a/src/components/contract/ContractsList.jsx b/src/components/contract/ContractsList.jsx
@@ -24,7 +24,7 @@ class ContractsList extends React.Component {
         this.closeModal = this.closeModal.bind(this);
         this.handleAddButton = this.handleAddButton.bind(this);
         this.handleDeleteButton = this.handleDeleteButton.bind(this);
-        this.renderTitle = this.renderTitle.bind(this);
+        this.renderCardControls = this.renderCardControls.bind(this);
         this.showConfirmationModal = this.showConfirmationModal.bind(this);
         this.closeConfirmationModal = this.closeConfirmationModal.bind(this);
         this.onConfirmedDelete = this.onConfirmedDelete.bind(this);
@@ -85,28 +85,23 @@ class ContractsList extends React.Component {
         });
     }
 
-    renderTitle(contract) {
+    renderCardControls(contract) {
         return (
             <>
-                {contract.name}
-                <Button
-                    type="default"
-                    name="editButton"
-                    size="small"
-                    style={{ float: 'right' }}
-                    onClick={(e) => this.startEdit(contract)}
-                >
-                    <EditOutlined />
-                </Button>
-                <Button
-                    type="default"
-                    name="deleteButton"
-                    size="small"
-                    style={{ float: 'right' }}
-                    onClick={(e) => this.handleDeleteButton(e, contract.networkId, contract.name)}
-                >
-                    <DeleteOutlined />
-                </Button>
+                <Blockies seed={contract.address.toLowerCase()} />
+                <div>
+                    <Button type="default" name="editButton" size="small" onClick={(e) => this.startEdit(contract)}>
+                        <EditOutlined />
+                    </Button>
+                    <Button
+                        type="default"
+                        name="deleteButton"
+                        size="small"
+                        onClick={(e) => this.handleDeleteButton(e, contract.networkId, contract.name)}
+                    >
+                        <DeleteOutlined />
+                    </Button>
+                </div>
             </>
         );
     }
@@ -138,11 +133,11 @@ class ContractsList extends React.Component {
                                 [styles.contractCard]: true,
                             })}
                             key={contract.address}
+                            extra={this.renderCardControls(contract)}
                         >
                             <Card.Meta
                                 className={styles.cardMeta}
-                                avatar={<Blockies seed={contract.address.toLowerCase()} />}
-                                title={this.renderTitle(contract)}
+                                title={contract.name}
                                 description={shortenEthAddress(contract.address, 4)}
                             />
                         </Card>
@@ -159,7 +154,7 @@ class ContractsList extends React.Component {
                     onCancel={this.closeConfirmationModal}
                     maskClosable={false}
                 >
-                    <p>{`Really delete '${this.state.deletingContract? this.state.deletingContract.name: ""}'?`}</p>
+                    <p>{`Really delete '${this.state.deletingContract ? this.state.deletingContract.name : ''}'?`}</p>
                 </Modal>
             </>
         );

diff --git a/src/components/contract/ContractsList.scss b/src/components/contract/ContractsList.scss
@@ -12,6 +12,14 @@
         background-color: #f0f0f0;
         opacity: 1;
     }
+
+    :global(.ant-card-extra) {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-left: 0;
+        width: 100%;
+    }
 }
 
 .addButton {

diff --git a/src/scripts/contractLogic.js b/src/scripts/contractLogic.js
@@ -71,12 +71,14 @@ export const editContract = function (
     networkId,
     abiString
 ) {    
-    const current = getContract(contractList, contract.name, networkId);
+    console.log(networkId);
+    const current = getContract(contractList, contract.name, contract.networkId);
     current.name = name;
     current.address = address;
     current.networkId = networkId;
     current.abi = JSON.parse(abiString);
     storage.saveContracts(contractList);
+    console.log(current);
     return contractList;
 };
 

diff --git a/webpack.config.js b/webpack.config.js
@@ -3,9 +3,7 @@ const fs = require('fs');
 const webpack = require('webpack');
 
 const lessToJs = require('less-vars-to-js');
-const themeVariables = lessToJs(
-    fs.readFileSync(path.join(__dirname, './ant-override.less'), 'utf8')
-);
+const themeVariables = lessToJs(fs.readFileSync(path.join(__dirname, './ant-override.less'), 'utf8'));
 
 module.exports = {
     resolve: {
@@ -82,39 +80,27 @@ module.exports = {
                         loader: 'css-loader',
                         options: {
                             modules: true,
-                            localIdentName:
-                                '[name]__[local]__[contenthash:base64:5]',
+                            localIdentName: '[name]__[local]__[contenthash:base64:5]',
                         },
                     },
                 ],
             },
             {
-                test: /\.scss$/,
-                exclude: /app\.scss$/,
+                test: /\.scss$/,                
                 use: [
                     'style-loader',
                     {
                         loader: 'css-loader',
                         options: {
                             modules: true,
-                            localIdentName:
-                                '[name]__[local]__[contenthash:base64:5]',
+                            localIdentName: '[name]__[local]__[contenthash:base64:5]',
                         },
                     },
                     {
                         loader: 'sass-loader',
-                        // options: {
-                        //     modules: true,
-                        //     localIdentName:
-                        //         '[name]__[local]__[contenthash:base64:5]',
-                        // },
                     },
                 ],
             },
-            {
-                test: /app\.scss$/,
-                use: ['style-loader', 'css-loader', 'sass-loader'],
-            },
             {
                 test: /\.less$/,
                 use: [