From 7ac1e1efdd97e88c66a0685ea9257314235d2405 Mon Sep 17 00:00:00 2001 From: Mikhail Mikheev Date: Thu, 3 Jun 2021 18:54:21 +0400 Subject: [PATCH] Feature: Relay safe apps sdk getBySafeTxHash api request (#2361) * install new sdk version * fix ts errors * handler scaffold * add api function for fetching tx, safe app msg handler * bring back getEnvInfo method * remove upperFirst where it is not needed * move upperFirst import --- package.json | 2 +- .../components/ProviderDetails/UserDetails.tsx | 13 +++++++------ .../safe/store/actions/fetchTransactionDetails.ts | 8 +++----- .../safe/transactions/api/fetchSafeTransaction.ts | 13 +++++++++++++ src/routes/safe/components/Apps/communicator.ts | 7 +++++-- .../safe/components/Apps/components/AppFrame.tsx | 11 ++++++++++- src/utils/css.ts | 2 +- yarn.lock | 15 ++++----------- 8 files changed, 44 insertions(+), 27 deletions(-) create mode 100644 src/logic/safe/transactions/api/fetchSafeTransaction.ts diff --git a/package.json b/package.json index 2f3a95ec..fb21dd34 100644 --- a/package.json +++ b/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/safe-apps-sdk@0.4.2", "@gnosis.pm/safe-contracts": "1.1.1-dev.2", "@gnosis.pm/safe-react-components": "https://github.com/gnosis/safe-react-components.git#4864ebb", diff --git a/src/components/AppLayout/Header/components/ProviderDetails/UserDetails.tsx b/src/components/AppLayout/Header/components/ProviderDetails/UserDetails.tsx index 1598904f..26372272 100644 --- a/src/components/AppLayout/Header/components/ProviderDetails/UserDetails.tsx +++ b/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 = ({ Wallet icon - {upperFirst(provider)} + {provider} @@ -175,7 +176,7 @@ export const UserDetails = ({ diff --git a/src/logic/safe/store/actions/fetchTransactionDetails.ts b/src/logic/safe/store/actions/fetchTransactionDetails.ts index b7aad88e..54fb9b5f 100644 --- a/src/logic/safe/store/actions/fetchTransactionDetails.ts +++ b/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(UPDATE_TRANSACTION_DETAILS) @@ -31,8 +30,7 @@ export const fetchTransactionDetails = ({ } try { - const url = getTxDetailsUrl(transactionId) - const { data: transactionDetails } = await axios.get>(url) + const transactionDetails = await fetchSafeTransaction(transactionId) dispatch(updateTransactionDetails({ transactionId, txLocation, safeAddress, value: transactionDetails })) } catch (error) { diff --git a/src/logic/safe/transactions/api/fetchSafeTransaction.ts b/src/logic/safe/transactions/api/fetchSafeTransaction.ts new file mode 100644 index 00000000..2a13dd24 --- /dev/null +++ b/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 => { + const url = getTxDetailsUrl(clientGatewayTxId) + + return axios.get(url).then(({ data }) => data) +} diff --git a/src/routes/safe/components/Apps/communicator.ts b/src/routes/safe/components/Apps/communicator.ts index df31d8bb..d0c48407 100644 --- a/src/routes/safe/components/Apps/communicator.ts +++ b/src/routes/safe/components/Apps/communicator.ts @@ -16,9 +16,12 @@ type MessageHandler = ( msg: SDKMessageEvent, ) => void | MethodToResponse[Methods] | ErrorResponse | Promise +type LegacyMethods = 'getEnvInfo' +type SDKMethods = Methods | LegacyMethods + class AppCommunicator { private iframeRef: MutableRefObject - private handlers = new Map() + private handlers = new Map() private app: SafeApp constructor(iframeRef: MutableRefObject, 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) } diff --git a/src/routes/safe/components/Apps/components/AppFrame.tsx b/src/routes/safe/components/Apps/components/AppFrame.tsx index 8ac749a3..42e554c2 100644 --- a/src/routes/safe/components/Apps/components/AppFrame.tsx +++ b/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, diff --git a/src/utils/css.ts b/src/utils/css.ts index 66aff2c9..0dcb587c 100644 --- a/src/utils/css.ts +++ b/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) { diff --git a/yarn.lock b/yarn.lock index 9b39e4c3..427acadf 100644 --- a/yarn.lock +++ b/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/safe-apps-sdk@3.0.0-alpha.5": - 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/safe-apps-sdk@3.1.0-alpha.0": + 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/safe-contracts@1.1.1-dev.2": version "1.1.1-dev.2" @@ -17988,11 +17986,6 @@ semver@7.0.0: resolved "https://registry.yarnpkg.com/semver/-/semver-7.0.0.tgz#5f3ca35761e47e05b206c6daff2cf814f0316b8e" integrity sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A== -semver@7.1.1: - version "7.1.1" - resolved "https://registry.yarnpkg.com/semver/-/semver-7.1.1.tgz#29104598a197d6cbe4733eeecbe968f7b43a9667" - integrity sha512-WfuG+fl6eh3eZ2qAf6goB7nhiCd7NPXhmyFxigB/TOkQyeLP8w8GsVehvtGNtnNmyboz4TgeK40B1Kbql/8c5A== - semver@7.3.2: version "7.3.2" resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.2.tgz#604962b052b81ed0786aae84389ffba70ffd3938"