feat: improve master wallet management (#705)

* master wallet management

* bump

* fix format money

Co-authored-by: Michiel <michiel@deroos.ca>

app/client/components/dashboard/MasterWalletCard.jsx

@@ -11,6 +11,7 @@ import { HorizontalBar } from "react-chartjs-2";
 import { formatMoney, getActiveToken } from "../../utils";
 
 import MasterWalletManagementModal from "./MasterWalletManagementModal";
+import { browserHistory } from "../../createStore";
 
 const { Text } = Typography;
 
@@ -29,7 +30,18 @@ class MasterWalletCard extends React.Component {
     };
   }
 
+  componentDidMount() {
+    if (window.location.pathname === "/manage") {
+      this.setState({ modalVisible: !this.state.modalVisible });
+    }
+  }
+
   toggleModal() {
+    if (window.location.pathname === "/manage") {
+      browserHistory.push("/");
+    } else {
+      browserHistory.push("/manage");
+    }
     this.setState({ modalVisible: !this.state.modalVisible });
   }
 

app/client/components/dashboard/MasterWalletManagementModal.jsx

@@ -1,5 +1,5 @@
 import React, { Suspense, lazy } from "react";
-import { connect } from "react-redux";
+import { connect, useSelector } from "react-redux";
 import { sempoObjects } from "../../reducers/rootReducer";
 import {
   Modal,
@@ -37,7 +37,11 @@ const MasterWalletManagementModal = props => {
   const [current, setCurrent] = React.useState(0);
   const [form] = Form.useForm();
 
-  const orgName = "Reserve";
+  const activeOrganisation = useSelector(
+    state => state.organisations.byId[Number(state.login.organisationId)]
+  );
+
+  const orgName = activeOrganisation && activeOrganisation.name;
 
   const onFinish = values => {
     const { recipient_blockchain_address, transfer_amount } = values;
@@ -151,12 +155,12 @@ const MasterWalletManagementModal = props => {
         onCancel={props.handleCancel}
         footer={[
           current > 0 && (
-            <Button style={{ margin: "0 8px" }} onClick={() => back(0)}>
+            <Button style={{ margin: "0 8px" }} onClick={() => back(0)} key={1}>
               Back
             </Button>
           ),
           current === 0 && (
-            <Button type="primary" onClick={props.handleOk}>
+            <Button type="primary" onClick={props.handleOk} key={2}>
               Ok
             </Button>
           ),
@@ -165,6 +169,7 @@ const MasterWalletManagementModal = props => {
               type="primary"
               onClick={() => form.submit()}
               loading={props.masterWallet.createStatus.isRequesting}
+              key={3}
             >
               Withdraw
             </Button>
@@ -214,9 +219,9 @@ const MasterWalletManagementModal = props => {
           {current === 2 ? depositQr : null}
           {current === 0 || current === 2 ? depositAddress : null}
           {current === 0
-            ? otherDetails.map(item => {
+            ? otherDetails.map((item, i) => {
                 return (
-                  <Descriptions.Item label={item.label}>
+                  <Descriptions.Item label={item.label} key={i}>
                     <Paragraph style={{ margin: 0 }}>{item.value}</Paragraph>
                   </Descriptions.Item>
                 );
@@ -225,7 +230,6 @@ const MasterWalletManagementModal = props => {
           {current === 1 ? (
             <Descriptions.Item>{withdrawal}</Descriptions.Item>
           ) : null}
-          {current === 0}
         </Descriptions>
       </Modal>
     </Form>

app/client/components/navBar/OrgSwitcher.tsx

@@ -24,6 +24,7 @@ import { Organisation } from "../../reducers/organisation/types";
 
 import { IntercomChat } from "../intercom/IntercomChat";
 import { getActiveToken } from "../../utils";
+import { WalletListModal } from "./WalletListModal";
 
 interface Props {
   icon: string;
@@ -37,6 +38,7 @@ declare global {
 }
 
 const OrgSwitcher: React.FunctionComponent<Props> = props => {
+  const [modalVisible, setModalVisible] = React.useState(false);
   const [switcherActive, setSwitcherActive] = React.useState(false);
 
   const activeToken = useSelector((state: ReduxState) => getActiveToken(state));
@@ -81,6 +83,10 @@ const OrgSwitcher: React.FunctionComponent<Props> = props => {
     dispatch(LoginAction.updateActiveOrgRequest({ organisationIds }));
   };
 
+  const toggleModal = () => {
+    setModalVisible(!modalVisible);
+  };
+
   let menu = (
     <Menu
       style={{
@@ -93,7 +99,18 @@ const OrgSwitcher: React.FunctionComponent<Props> = props => {
           : ""
       ]}
     >
-      <Menu.ItemGroup title="Your Projects">
+      <Menu.ItemGroup
+        title={
+          <span>
+            <span>Your Projects</span>
+            <WalletListModal
+              isModalVisible={modalVisible}
+              handleOk={toggleModal}
+              handleCancel={toggleModal}
+            />
+          </span>
+        }
+      >
         {Object.keys(tokenMap).map((id: string) => {
           const orgsForToken = tokenMap[id];
 

app/client/components/navBar/WalletListModal.tsx

@@ -0,0 +1,80 @@
+import React from "react";
+import { useSelector, useDispatch } from "react-redux";
+import { Modal, Tooltip, List } from "antd";
+
+import { DollarCircleOutlined } from "@ant-design/icons";
+import { grey } from "@ant-design/colors";
+import { Organisation } from "../../reducers/organisation/types";
+import { ReduxState } from "../../reducers/rootReducer";
+import { LoginAction } from "../../reducers/auth/actions";
+import { formatMoney, getActiveToken } from "../../utils";
+
+interface OuterProps {
+  isModalVisible: boolean;
+  handleOk: any;
+  handleCancel: any;
+}
+
+export const WalletListModal = (props: OuterProps) => {
+  const dispatch: any = useDispatch();
+  const organisations: Organisation[] = useSelector((state: ReduxState) =>
+    Object.keys(state.organisations.byId).map(
+      id => state.organisations.byId[Number(id)]
+    )
+  );
+  const activeToken = useSelector((state: ReduxState) => getActiveToken(state));
+  const symbol = activeToken && activeToken.symbol;
+
+  let selectOrg = (organisationIds: number[]) => {
+    dispatch(
+      LoginAction.updateActiveOrgRequest({
+        organisationIds,
+        isManageWallet: true
+      })
+    );
+  };
+
+  return (
+    <span>
+      <Tooltip title={"Manage Project Master Wallet's"} placement="rightTop">
+        <a
+          onClick={props.handleOk}
+          style={{ padding: "0 0 0 5px", color: grey[4] }}
+        >
+          <DollarCircleOutlined translate={""} />
+        </a>
+      </Tooltip>
+      <Modal
+        zIndex={1051}
+        title="Project Wallet's"
+        visible={props.isModalVisible}
+        onOk={props.handleOk}
+        onCancel={props.handleCancel}
+      >
+        <List
+          dataSource={organisations}
+          renderItem={org => (
+            <List.Item
+              actions={[
+                <a key="list-loadmore-edit" onClick={() => selectOrg([org.id])}>
+                  Manage
+                </a>
+              ]}
+            >
+              <List.Item.Meta
+                title={org.name}
+                description={`Balance: ${formatMoney(
+                  org.master_wallet_balance / 100,
+                  0,
+                  undefined,
+                  undefined,
+                  symbol
+                )}`}
+              />
+            </List.Item>
+          )}
+        />
+      </Modal>
+    </span>
+  );
+};

app/client/nav.jsx

@@ -92,6 +92,17 @@ class Nav extends React.Component {
               title={"Dashboard"}
               isMultiOrg={true}
             />
+            <PrivateRoute
+              exact
+              path="/manage"
+              component={dashboardPage}
+              isLoggedIn={isLoggedIn}
+              isReAuthing={isReAuthing}
+              isAntDesign={true}
+              header={false}
+              title={"Dashboard"}
+              isMultiOrg={false}
+            />
             <PrivateRoute
               exact
               path="/map"

app/client/reducers/auth/types.ts

@@ -13,6 +13,7 @@ export enum LoginActionTypes {
 
 export interface UpdateActiveOrgPayload {
   organisationIds: number[];
+  isManageWallet?: boolean;
 }
 
 export interface LoginRequestPayload {

app/client/reducers/organisation/types.ts

@@ -8,6 +8,7 @@ export interface Organisation {
   default_disbursement: number;
   card_shard_distance: number;
   minimum_vendor_payout_withdrawal: number;
+  master_wallet_balance: number;
   country_code: string;
   timezone: string;
   valid_roles: TransferAccountTypes[];

app/client/sagas/authSagas.ts

@@ -149,6 +149,7 @@ function* saveOrgId(
   >
 ) {
   try {
+    const isManageWallet = action.payload.isManageWallet;
     yield call(storeOrgIds, action.payload.organisationIds);
 
     // window.location.search = "?org=2" or "?query_organisations=1,2"
@@ -166,9 +167,13 @@ function* saveOrgId(
       action.payload.organisationIds.toString() ===
         query_params["query_organisations"]
     ) {
-      window.location.reload();
+      isManageWallet
+        ? window.location.assign("/manage")
+        : window.location.reload();
     } else {
-      window.location.assign("/");
+      isManageWallet
+        ? window.location.assign("/manage")
+        : window.location.assign("/");
     }
   } catch (e) {
     removeOrgIds();

app/server/schemas.py

@@ -425,6 +425,8 @@ class OrganisationSchema(SchemaBase):
 
     valid_roles = fields.Raw()
 
+    master_wallet_balance = fields.Function(lambda obj: obj.queried_org_level_transfer_account.balance)
+
     require_transfer_card = fields.Boolean(default=False)
     default_disbursement = fields.Function(lambda obj: int(obj.default_disbursement))
     minimum_vendor_payout_withdrawal = fields.Function(lambda obj: int(obj.minimum_vendor_payout_withdrawal))

config.py

@@ -5,7 +5,7 @@
 logging.basicConfig(level=env_loglevel)
 logg = logging.getLogger(__name__)
 
-VERSION = '1.10.3'  # Remember to bump this in every PR
+VERSION = '1.10.4'  # Remember to bump this in every PR
 
 logg.info('Loading configs at UTC {}'.format(datetime.datetime.utcnow()))