Finance: use api-react's currentApp() for app proxy address (#958)

aragon · Sep 5, 2019 · 67e397d · 67e397d
1 parent 65c84eb
commit 67e397d
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 37 deletions.
diff --git a/apps/finance/app/src/App.js b/apps/finance/app/src/App.js
@@ -42,7 +42,7 @@ class App extends React.Component {
       .toPromise() // Don't care about response
     this.handleNewTransferClose()
   }
-  handleDeposit = async (tokenAddress, amount, reference) => {
+  handleDeposit = (tokenAddress, amount, reference) => {
     const { api, appState } = this.props
     const { periodDuration, periods } = appState
 
@@ -89,7 +89,7 @@ class App extends React.Component {
   render() {
     const { appState, isSyncing, compactMode } = this.props
     const { newTransferOpened } = this.state
-    const { balances, transactions, tokens, proxyAddress } = appState
+    const { balances, transactions, tokens } = appState
 
     return (
       <IdentityProvider
@@ -110,11 +110,7 @@ class App extends React.Component {
           }
         />
         <Balances balances={balances} compactMode={compactMode} />
-        <Transfers
-          proxyAddress={proxyAddress}
-          transactions={transactions}
-          tokens={tokens}
-        />
+        <Transfers transactions={transactions} tokens={tokens} />
         <SidePanel
           opened={newTransferOpened}
           onClose={this.handleNewTransferClose}
@@ -125,7 +121,6 @@ class App extends React.Component {
             tokens={tokens}
             onWithdraw={this.handleWithdraw}
             onDeposit={this.handleDeposit}
-            proxyAddress={proxyAddress}
           />
         </SidePanel>
       </IdentityProvider>

diff --git a/apps/finance/app/src/components/NewTransfer/Deposit.js b/apps/finance/app/src/components/NewTransfer/Deposit.js
@@ -254,7 +254,7 @@ class Deposit extends React.Component {
   }
 
   render() {
-    const { network, proxyAddress, title, tokens } = this.props
+    const { appAddress, network, title, tokens } = this.props
     const { amount, reference, selectedToken } = this.state
 
     let errorMessage
@@ -334,18 +334,18 @@ class Deposit extends React.Component {
           )}
         </Info>
 
-        {proxyAddress && ethSelected && (
+        {appAddress && ethSelected && (
           <div>
             <VSpace size={3} />
             <ToggleContent label="Show address for direct ETH transfer ">
               <VSpace size={2} />
               <QRCode
-                value={proxyAddress}
+                value={appAddress}
                 style={{ width: '80px', height: '80px' }}
               />
               <VSpace size={1} />
               <IdentityBadge
-                entity={proxyAddress}
+                entity={appAddress}
                 labelStyle={`
                   ${textStyle('body3')}
                 `}
@@ -460,10 +460,11 @@ const ValidationError = ({ message }) => {
 }
 
 export default props => {
-  const { api, connectedAccount, network } = useAragonApi()
+  const { api, currentApp, connectedAccount, network } = useAragonApi()
   return network && api ? (
     <Deposit
       api={api}
+      appAddress={currentApp && currentApp.appAddress}
       connectedAccount={connectedAccount}
       network={network}
       {...props}

diff --git a/apps/finance/app/src/components/NewTransfer/PanelContent.js b/apps/finance/app/src/components/NewTransfer/PanelContent.js
@@ -12,7 +12,6 @@ class PanelContent extends React.Component {
   static defaultProps = {
     onWithdraw: () => {},
     onDeposit: () => {},
-    proxyAddress: null,
   }
 
   state = {
@@ -32,7 +31,7 @@ class PanelContent extends React.Component {
 
   render() {
     const { screenIndex } = this.state
-    const { opened, tokens, onWithdraw, onDeposit, proxyAddress } = this.props
+    const { opened, tokens, onWithdraw, onDeposit } = this.props
     return (
       <div>
         <TabsWrapper>
@@ -44,12 +43,7 @@ class PanelContent extends React.Component {
         </TabsWrapper>
 
         {screenIndex === 0 && (
-          <Deposit
-            opened={opened}
-            tokens={tokens}
-            proxyAddress={proxyAddress}
-            onDeposit={onDeposit}
-          />
+          <Deposit opened={opened} tokens={tokens} onDeposit={onDeposit} />
         )}
         {screenIndex === 1 && (
           <Withdrawal opened={opened} tokens={tokens} onWithdraw={onWithdraw} />

diff --git a/apps/finance/app/src/components/Transfers.js b/apps/finance/app/src/components/Transfers.js
@@ -21,7 +21,7 @@ import {
   useLayout,
   useTheme,
 } from '@aragon/ui'
-import { useConnectedAccount, useNetwork } from '@aragon/api-react'
+import { useConnectedAccount, useCurrentApp, useNetwork } from '@aragon/api-react'
 import { saveAs } from 'file-saver'
 import * as TransferTypes from '../transfer-types'
 import { addressesEqual, toChecksumAddress } from '../lib/web3-utils'
@@ -103,19 +103,20 @@ const getDownloadData = async (transfers, tokenDetails, resolveAddress) => {
     .concat(mappedData)
     .join('\n')
 }
-const getDownloadFilename = (proxyAddress, { start, end }) => {
+const getDownloadFilename = (appAddress, { start, end }) => {
   const today = format(Date.now(), 'yyyy-MM-dd')
-  let filename = `finance_${proxyAddress}_${today}.csv`
+  let filename = `finance_${appAddress}_${today}.csv`
   if (start && end) {
     const formattedStart = format(start, 'yyyy-MM-dd')
     const formattedEnd = format(end, 'yyyy-MM-dd')
-    filename = `finance_${proxyAddress}_${formattedStart}_to_${formattedEnd}.csv`
+    filename = `finance_${appAddress}_${formattedStart}_to_${formattedEnd}.csv`
   }
   return filename
 }
 
-const Transfers = React.memo(({ proxyAddress, tokens, transactions }) => {
+const Transfers = React.memo(({ tokens, transactions }) => {
   const connectedAccount = useConnectedAccount()
+  const currentApp = useCurrentApp()
   const network = useNetwork()
   const theme = useTheme()
   const { layoutName } = useLayout()
@@ -160,7 +161,7 @@ const Transfers = React.memo(({ proxyAddress, tokens, transactions }) => {
   const tokenDetails = tokens.reduce(getTokenDetails, {})
   const { resolve: resolveAddress } = React.useContext(IdentityContext)
   const handleDownload = React.useCallback(async () => {
-    if (!proxyAddress) {
+    if (!currentApp || !currentApp.appAddress) {
       return
     }
 
@@ -169,9 +170,12 @@ const Transfers = React.memo(({ proxyAddress, tokens, transactions }) => {
       tokenDetails,
       resolveAddress
     )
-    const filename = getDownloadFilename(proxyAddress, selectedDateRange)
+    const filename = getDownloadFilename(
+      currentApp.appAddress,
+      selectedDateRange
+    )
     saveAs(new Blob([data], { type: 'text/csv;charset=utf-8' }), filename)
-  }, [filteredTransfers, tokenDetails, resolveAddress])
+  }, [currentApp, filteredTransfers, tokenDetails, resolveAddress])
   const emptyResultsViaFilters =
     !filteredTransfers.length &&
     (selectedToken !== 0 ||
@@ -321,7 +325,6 @@ const Transfers = React.memo(({ proxyAddress, tokens, transactions }) => {
 })
 
 Transfers.propTypes = {
-  proxyAddress: PropTypes.string,
   tokens: PropTypes.array.isRequired,
   transactions: PropTypes.array.isRequired,
 }

diff --git a/apps/finance/app/src/script.js b/apps/finance/app/src/script.js
@@ -157,13 +157,7 @@ async function initialize(vaultAddress, ethAddress) {
           )
           return nextState
         case 'NewPeriod':
-          return {
-            ...(await newPeriod(nextState, event, settings)),
-            // A new period is always started as part of the Finance app's initialization,
-            // so this is just a handy way to get information about the app we're running
-            // (e.g. its own address)
-            proxyAddress: eventAddress,
-          }
+          return newPeriod(nextState, event, settings)
         case 'NewTransaction':
           return newTransaction(nextState, event, settings)
         default: