MessageSignature.tsx 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. // Copyright 2017-2020 @polkadot/react-components authors & contributors
  2. // This software may be modified and distributed under the terms
  3. // of the Apache-2.0 license. See the LICENSE file for details.
  4. import { ContractABIMessage } from '@polkadot/api-contract/types';
  5. import React from 'react';
  6. import styled from 'styled-components';
  7. import { Icon, Tooltip } from '@polkadot/react-components';
  8. import { displayType } from '@polkadot/types';
  9. import { useTranslation } from '../translate';
  10. const MAX_PARAM_LENGTH = 20;
  11. export interface Props {
  12. asConstructor?: boolean;
  13. className?: string;
  14. message: ContractABIMessage;
  15. params?: any[];
  16. withTooltip?: boolean;
  17. }
  18. function truncate (param: string): string {
  19. return param.length > MAX_PARAM_LENGTH
  20. ? `${param.substring(0, MAX_PARAM_LENGTH / 2)}…${param.substring(param.length - MAX_PARAM_LENGTH / 2)}`
  21. : param;
  22. }
  23. function MessageSignature ({ className, message: { args, mutates, name, returnType }, params = [], asConstructor = false, withTooltip = false }: Props): React.ReactElement<Props> {
  24. const { t } = useTranslation();
  25. return (
  26. <div className={className}>
  27. <span className='ui--MessageSignature-name'>
  28. {name}
  29. </span>
  30. (
  31. {args.map(({ name, type }, index): React.ReactNode => {
  32. return (
  33. <React.Fragment key={`${name}-args-${index}`}>
  34. {name}:
  35. {' '}
  36. <span className='ui--MessageSignature-type'>
  37. {params && params[index]
  38. ? <b>{truncate((params as string[])[index].toString())}</b>
  39. : displayType(type)
  40. }
  41. </span>
  42. {index < args.length - 1 && ', '}
  43. </React.Fragment>
  44. );
  45. })}
  46. )
  47. {(!asConstructor && returnType) && (
  48. <>
  49. :
  50. {' '}
  51. <span className='ui--MessageSignature-returnType'>
  52. {displayType(returnType)}
  53. </span>
  54. </>
  55. )}
  56. {mutates && (
  57. <>
  58. <Icon
  59. className='ui--MessageSignature-mutates'
  60. icon='database'
  61. tooltip={`mutates-${name}`}
  62. />
  63. {withTooltip && (
  64. <Tooltip
  65. text={t<string>('Mutates contract state')}
  66. trigger={`mutates-${name}`}
  67. />
  68. )}
  69. </>
  70. )}
  71. </div>
  72. );
  73. }
  74. export default React.memo(
  75. styled(MessageSignature)`
  76. font-family: monospace;
  77. font-weight: normal;
  78. flex-grow: 1;
  79. .ui--MessageSignature-mutates {
  80. color: #ff8600;
  81. margin-left: 0.5rem;
  82. opacity: 0.6;
  83. }
  84. .ui--MessageSignature-name {
  85. color: #2f8ddb;
  86. font-weight: bold;
  87. }
  88. .ui--MessageSignature-type {
  89. color: #21a2b2;
  90. }
  91. .ui--MessageSignature-returnType {
  92. color: #ff8600;
  93. }
  94. `
  95. );