Feature: Relay safe apps sdk getBySafeTxHash api request

package.json

@@ -158,7 +158,7 @@
     ]
   },
   "dependencies": {
-    "@gnosis.pm/safe-apps-sdk": "3.0.0-alpha.5",
+    "@gnosis.pm/safe-apps-sdk": "3.1.0-alpha.0",
     "@gnosis.pm/safe-apps-sdk-v1": "npm:@gnosis.pm/[email protected]",
     "@gnosis.pm/safe-contracts": "1.1.1-dev.2",
     "@gnosis.pm/safe-react-components": "https://github.com/gnosis/safe-react-components.git#4864ebb",

src/components/AppLayout/Header/components/ProviderDetails/UserDetails.tsx

@@ -3,6 +3,8 @@ import Dot from '@material-ui/icons/FiberManualRecord'
 import classNames from 'classnames'
 import * as React from 'react'
 import { EthHashInfo, Identicon, Card } from '@gnosis.pm/safe-react-components'
+import { createStyles } from '@material-ui/core'
+import styled from 'styled-components'
 
 import Spacer from 'src/components/Spacer'
 import Block from 'src/components/layout/Block'
@@ -12,14 +14,12 @@ import Img from 'src/components/layout/Img'
 import Paragraph from 'src/components/layout/Paragraph'
 import Row from 'src/components/layout/Row'
 import { background, connected as connectedBg, lg, md, sm, warning, xs } from 'src/theme/variables'
-import { upperFirst } from 'src/utils/css'
 import { ETHEREUM_NETWORK } from 'src/config/networks/network.d'
 import { getExplorerInfo } from 'src/config'
 import { KeyRing } from 'src/components/AppLayout/Header/components/KeyRing'
-import { CircleDot } from '../CircleDot'
-import { createStyles } from '@material-ui/core'
-import styled from 'styled-components'
+import { upperFirst } from 'src/utils/css'
 
+import { CircleDot } from '../CircleDot'
 import WalletIcon from '../../assets/wallet.svg'
 
 const styles = createStyles({
@@ -53,6 +53,7 @@ const styles = createStyles({
   labels: {
     fontSize: '12px',
     letterSpacing: '0.5px',
+    textTransform: 'capitalize',
   },
   open: {
     paddingLeft: sm,
@@ -156,7 +157,7 @@ export const UserDetails = ({
         <Spacer />
         <Img alt="Wallet icon" className={classes.logo} height={14} src={WalletIcon} />
         <Paragraph align="right" className={classes.labels} noMargin weight="bolder">
-          {upperFirst(provider)}
+          {provider}
         </Paragraph>
       </Row>
       <Hairline margin="xs" />
@@ -175,7 +176,7 @@ export const UserDetails = ({
         <Row className={classes.dashboard}>
           <Button color="primary" fullWidth onClick={openDashboard} size="medium" variant="contained">
             <Paragraph className={classes.dashboardText} color="white" noMargin size="md">
-              {upperFirst(provider)} Wallet
+              {provider} Wallet
             </Paragraph>
           </Button>
         </Row>

src/logic/safe/store/actions/fetchTransactionDetails.ts

@@ -1,13 +1,12 @@
-import axios, { AxiosResponse } from 'axios'
 import { createAction } from 'redux-actions'
 
-import { getTxDetailsUrl } from 'src/config'
 import { Dispatch } from 'src/logic/safe/store/actions/types'
-import { ExpandedTxDetails, Transaction, TxLocation } from 'src/logic/safe/store/models/types/gateway.d'
+import { Transaction, TxLocation } from 'src/logic/safe/store/models/types/gateway.d'
 import { TransactionDetailsPayload } from 'src/logic/safe/store/reducer/gatewayTransactions'
 import { safeParamAddressFromStateSelector } from 'src/logic/safe/store/selectors'
 import { getTransactionDetails } from 'src/logic/safe/store/selectors/gatewayTransactions'
 import { AppReduxState } from 'src/store'
+import { fetchSafeTransaction } from 'src/logic/safe/transactions/api/fetchSafeTransaction'
 
 export const UPDATE_TRANSACTION_DETAILS = 'UPDATE_TRANSACTION_DETAILS'
 const updateTransactionDetails = createAction<TransactionDetailsPayload>(UPDATE_TRANSACTION_DETAILS)
@@ -31,8 +30,7 @@ export const fetchTransactionDetails = ({
   }
 
   try {
-    const url = getTxDetailsUrl(transactionId)
-    const { data: transactionDetails } = await axios.get<ExpandedTxDetails, AxiosResponse<ExpandedTxDetails>>(url)
+    const transactionDetails = await fetchSafeTransaction(transactionId)
 
     dispatch(updateTransactionDetails({ transactionId, txLocation, safeAddress, value: transactionDetails }))
   } catch (error) {

src/logic/safe/transactions/api/fetchSafeTransaction.ts

@@ -0,0 +1,13 @@
+import axios from 'axios'
+import { ExpandedTxDetails } from 'src/logic/safe/store/models/types/gateway.d'
+
+import { getTxDetailsUrl } from 'src/config'
+
+/**
+ * @param {string} clientGatewayTxId safeTxHash or transaction id from client-gateway
+ */
+export const fetchSafeTransaction = async (clientGatewayTxId: string): Promise<ExpandedTxDetails> => {
+  const url = getTxDetailsUrl(clientGatewayTxId)
+
+  return axios.get<ExpandedTxDetails>(url).then(({ data }) => data)
+}

src/routes/safe/components/Apps/communicator.ts

@@ -16,9 +16,12 @@ type MessageHandler = (
   msg: SDKMessageEvent,
 ) => void | MethodToResponse[Methods] | ErrorResponse | Promise<MethodToResponse[Methods] | ErrorResponse | void>
 
+type LegacyMethods = 'getEnvInfo'
+type SDKMethods = Methods | LegacyMethods
+
 class AppCommunicator {
   private iframeRef: MutableRefObject<HTMLIFrameElement | null>
-  private handlers = new Map<Methods, MessageHandler>()
+  private handlers = new Map<SDKMethods, MessageHandler>()
   private app: SafeApp
 
   constructor(iframeRef: MutableRefObject<HTMLIFrameElement | null>, app: SafeApp) {
@@ -28,7 +31,7 @@ class AppCommunicator {
     window.addEventListener('message', this.handleIncomingMessage)
   }
 
-  on = (method: Methods, handler: MessageHandler): void => {
+  on = (method: SDKMethods, handler: MessageHandler): void => {
     this.handlers.set(method, handler)
   }
 

src/routes/safe/components/Apps/components/AppFrame.tsx

@@ -1,7 +1,7 @@
 import React, { ReactElement, useState, useRef, useCallback, useEffect } from 'react'
 import styled from 'styled-components'
 import { FixedIcon, Loader, Title, Card } from '@gnosis.pm/safe-react-components'
-import { GetBalanceParams, MethodToResponse, RPCPayload } from '@gnosis.pm/safe-apps-sdk'
+import { GetBalanceParams, GetTxBySafeTxHashParams, MethodToResponse, RPCPayload } from '@gnosis.pm/safe-apps-sdk'
 import { useHistory } from 'react-router-dom'
 import { useSelector } from 'react-redux'
 import { INTERFACE_MESSAGES, Transaction, RequestId, LowercaseNetworks } from '@gnosis.pm/safe-apps-sdk-v1'
@@ -29,6 +29,7 @@ import { getAppInfoFromUrl } from '../utils'
 import { SafeApp } from '../types'
 import { useAppCommunicator } from '../communicator'
 import { fetchTokenCurrenciesBalances } from 'src/logic/safe/api/fetchTokenCurrenciesBalances'
+import { fetchSafeTransaction } from 'src/logic/safe/transactions/api/fetchSafeTransaction'
 
 const OwnerDisclaimer = styled.div`
   display: flex;
@@ -165,6 +166,14 @@ const AppFrame = ({ appUrl }: Props): ReactElement => {
       txServiceUrl: getTxServiceUrl(),
     }))
 
+    communicator?.on('getTxBySafeTxHash', async (msg) => {
+      const { safeTxHash } = msg.data.params as GetTxBySafeTxHashParams
+
+      const tx = await fetchSafeTransaction(safeTxHash)
+
+      return tx
+    })
+
     communicator?.on('getSafeInfo', () => ({
       safeAddress,
       network: NETWORK_NAME,

src/utils/css.ts

@@ -1,4 +1,4 @@
-export const upperFirst = (value) => value.charAt(0).toUpperCase() + value.toLowerCase().slice(1)
+export const upperFirst = (value: string): string => value.charAt(0).toUpperCase() + value.toLowerCase().slice(1)
 
 export const capitalize = (value: any, prefix?: any) => {
   if (!value) {

yarn.lock

@@ -1617,12 +1617,10 @@
   resolved "https://registry.yarnpkg.com/@gnosis.pm/safe-apps-sdk/-/safe-apps-sdk-0.4.2.tgz#ae87b2164931c006cb0efdede3d82ff210df1648"
   integrity sha512-BwA2dyCebPMdi4JhhTkp6EjkhEM6vAIviKdhqHiHnSmL+sDfxtP1jdOuE8ME2/4+5TiLSS8k8qscYjLSlf1LLw==
 
-"@gnosis.pm/[email protected]":
-  version "3.0.0-alpha.5"
-  resolved "https://registry.yarnpkg.com/@gnosis.pm/safe-apps-sdk/-/safe-apps-sdk-3.0.0-alpha.5.tgz#f939e3a5719f51686151b76cb40af2ca4d410d30"
-  integrity sha512-yVvnJCl3B9Xk68vh+03rej4REx7cTfiR55b9TjqPaBtZLtY+c57UHCslUmkK+0MRMF4SyKaV5S9BOqI/iX9a3Q==
-  dependencies:
-    semver "7.1.1"
+"@gnosis.pm/[email protected]":
+  version "3.1.0-alpha.0"
+  resolved "https://registry.yarnpkg.com/@gnosis.pm/safe-apps-sdk/-/safe-apps-sdk-3.1.0-alpha.0.tgz#6cc8cbf824ce15d0386598dd8bebe14076c73a17"
+  integrity sha512-d4rWyQc50lruQPYblGl7PVept5kARyjxhmQaroefy+DeQFDlpieRBymciW4ON3DqHZ40klltQlUo6HqS+Gdidg==
 
 "@gnosis.pm/[email protected]":
   version "1.1.1-dev.2"
@@ -17988,11 +17986,6 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.0.0.tgz#5f3ca35761e47e05b206c6daff2cf814f0316b8e"
   integrity sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==
 
-[email protected]:
-  version "7.1.1"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-7.1.1.tgz#29104598a197d6cbe4733eeecbe968f7b43a9667"
-  integrity sha512-WfuG+fl6eh3eZ2qAf6goB7nhiCd7NPXhmyFxigB/TOkQyeLP8w8GsVehvtGNtnNmyboz4TgeK40B1Kbql/8c5A==
-
 [email protected]:
   version "7.3.2"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.2.tgz#604962b052b81ed0786aae84389ffba70ffd3938"