+
+
+ {t('address')}
+
+
+
+ {
+ !isDesktop ? (
+ getMiddleEllipsis(address, {
+ beginning: 15, ending: 5,
+ })
+ ) : (
+ address
+ )
+ }
+
+
+
+
+ {t('deployer')}
+
+
+
+ {
+ !isDesktop ? (
+ getMiddleEllipsis(deployerAddress, {
+ beginning: 15, ending: 5,
+ })
+ ) : (
+ deployerAddress
+ )
+ }
+
+
+
+
+ {`${t('label')}: `}
+ {
+ !isDesktop ? (
+ getMiddleEllipsis(label, {
+ beginning: 15, ending: 5,
+ })
+ ) : (
+ label
+ )
+ }
+
+
+
+
+
+ {`${t('codeId')}: `}
+ {
+ !isDesktop ? (
+ getMiddleEllipsis(codeId, {
+ beginning: 15, ending: 5,
+ })
+ ) : (
+ codeId
+ )
+ }
+
+
+
+
+
+ {`${t('instaBlock')}: `}
+ {
+ !isDesktop ? (
+ getMiddleEllipsis(block, {
+ beginning: 15, ending: 5,
+ })
+ ) : (
+ block
+ )
+ }
+
+
+
+
+ );
+};
+
+export default ContractOverview;
diff --git a/src/components/cosmwasm/contract_overview/styles.ts b/src/components/cosmwasm/contract_overview/styles.ts
new file mode 100644
index 0000000000..5d6356001a
--- /dev/null
+++ b/src/components/cosmwasm/contract_overview/styles.ts
@@ -0,0 +1,81 @@
+import { makeStyles } from '@material-ui/core/styles';
+
+export const useStyles = () => {
+ const styles = makeStyles(
+ (theme) => {
+ return ({
+ root: {
+ [theme.breakpoints.up('md')]: {
+ display: 'grid',
+ gridTemplateColumns: 'repeat(2,1fr)',
+ },
+ },
+ dialog: {
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ flexDirection: 'column',
+ '& .MuiTypography-body1': {
+ marginBottom: theme.spacing(2),
+ },
+ '& .dialog__share--wrapper': {
+ marginTop: theme.spacing(2),
+ },
+ '& .share-buttons': {
+ '&:not(:last-child)': {
+ marginRight: theme.spacing(1),
+ },
+ '&.email': {
+ '& circle': {
+ fill: theme.palette.primary.main,
+ },
+ },
+ },
+ },
+ actionIcons: {
+ '&:hover': {
+ cursor: 'pointer',
+ },
+ },
+ icons: {
+ '& svg': {
+ width: theme.spacing(4.5),
+ height: theme.spacing(4.5),
+ },
+ },
+ item: {
+ padding: theme.spacing(2, 0),
+ color: theme.palette.custom.fonts.fontTwo,
+ '&:first-child': {
+ paddingTop: 0,
+ },
+ '&:last-child': {
+ paddingBottom: 0,
+ },
+ '&:not(:last-child)': {
+ borderBottom: `solid 1px ${theme.palette.divider}`,
+ },
+ '& .label': {
+ marginBottom: theme.spacing(1),
+ },
+ '& .detail': {
+ '&.MuiTypography-body1': {
+ wordWrap: 'break-word',
+ },
+ },
+ [theme.breakpoints.up('md')]: {
+ padding: 0,
+ '&:not(:last-child)': {
+ borderBottom: 'none',
+ },
+ '& .label': {
+ marginBottom: 0,
+ },
+ },
+ },
+ });
+ },
+ )();
+
+ return styles;
+};
diff --git a/src/components/cosmwasm/index.ts b/src/components/cosmwasm/index.ts
new file mode 100644
index 0000000000..7ffff257b0
--- /dev/null
+++ b/src/components/cosmwasm/index.ts
@@ -0,0 +1,11 @@
+import ContractOverview from './contract_overview';
+import ContractMessagesList from './contract_messages_list';
+import ContractMessages from './contract_messages';
+import SingleContractMessageMobile from './single_contract_message_mobile';
+
+export {
+ ContractOverview,
+ ContractMessagesList,
+ ContractMessages,
+ SingleContractMessageMobile,
+};
diff --git a/src/components/cosmwasm/single_contract_message_mobile/index.tsx b/src/components/cosmwasm/single_contract_message_mobile/index.tsx
new file mode 100644
index 0000000000..ab6cca6472
--- /dev/null
+++ b/src/components/cosmwasm/single_contract_message_mobile/index.tsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import classnames from 'classnames';
+import {
+ Typography,
+} from '@material-ui/core';
+import useTranslation from 'next-translate/useTranslation';
+import { useStyles } from './styles';
+
+const SingleContractMessageMobile:React.FC<{
+ className?: string;
+ block: React.ReactNode;
+ hash: React.ReactNode;
+ time: string;
+ method: string;
+ result?: React.ReactNode;
+}> = ({
+ className, block, hash, time, method, result,
+}) => {
+ const { t } = useTranslation('transactions');
+ const classes = useStyles();
+
+ return (
+
+
+
+ {t('block')}
+
+ {block}
+
+
+
+ {t('hash')}
+
+
+ {hash}
+
+
+
+ {!!method && (
+
+
+ {t('method')}
+
+
+ {method}
+
+
+ )}
+
+
+ {t('result')}
+
+ {result}
+
+
+
+
+ {t('time')}
+
+
+ {time}
+
+
+