Merge pull request #24 from CoreumFoundation/fix/explorer-bugs

Fix/explorer bugs

apps/web-coreum/public/locales/en/message_contents.json

@@ -56,5 +56,17 @@
   "MsgRevokeAllowance": "<0>{{granter}}</0> revoked allowance for <1>{{grantee}}</1>",
   "MsgCreateVestingAccount": "Vesting account created for <0>{{toAddress}}</0>",
   "MsgCreatePeriodicVestingAccount": "Periodic vesting account created for <0>{{toAddress}}</0>",
-  "msgIssueContent": "<0>{{issuer}}</0> issued <1>{{amount}}</1> units of <1>{{subunit}}</1> "
+  "msgIssueContent": "<0>{{issuer}}</0> issued <1>{{amount}}</1> units of <1>{{subunit}}</1> ",
+  "msgMintContent": "<0>{{sender}}</0> has minted <1>{{amount}}</1> ",
+  "msgBurnContent": "<0>{{sender}}</0> has burned <1>{{amount}}</1> ",
+  "msgFreezeContent": "<0>{{sender}}</0> has frozen <1>{{amount}}</1> on <2>{{account}}</2>",
+  "msgUnfreezeContent": "<0>{{sender}}</0> has unfrozen <1>{{amount}}</1> on <2>{{account}}</2>",
+  "msgGloballyFreezeContent": "<0>{{sender}}</0> has globally frozen the token<1>{{denom}}</1>",
+  "msgGloballyUnfreezeContent": "<0>{{sender}}</0> has globally unfrozen the token<1>{{denom}}</1>",
+  "msgSetWhitelistedLimitContent": "<0>{{sender}}</0> has set the whitelisted limit for <1>{{account}}</1> to <2>{{amount}}</2>",
+  "msgNftMintContent": "Account <0>{{sender}}</0> has minted NFT <1>{{id}}</1> with class <2>{{class_id}}</2>",
+  "msgNftBurnContent": "Account <0>{{sender}}</0> has burned NFT <1>{{id}}</1> with class <2>{{class_id}}</2>",
+  "msgNftFreezeContent": "Account <0>{{sender}}</0> has frozen NFT <1>{{id}}</1> with class <2>{{class_id}}</2>",
+  "msgNftUnfreezeContent": "Account <0>{{sender}}</0> has unfrozen NFT <1>{{id}}</1> with class <2>{{class_id}}</2>",
+  "msgNftIssueClassContent": "A new NFT Class <0>{{name}}</0> has been issued by <1>{{issuer}}</1>"
 }

apps/web-coreum/public/locales/en/message_labels.json

@@ -55,5 +55,17 @@
   "MsgRevokeAllowance": "Revoke Allowance",
   "MsgCreateVestingAccount": "Create Vesting Account",
   "MsgCreatePeriodicVestingAccount": "Create Periodic Vesting Account",
-  "msgIssueLabel": "Issue"
+  "msgIssueLabel": "Issue",
+  "msgMintLabel": "Mint",
+  "msgBurnLabel": "Burn",
+  "msgFreezeLabel": "Freeze",
+  "msgUnfreezeLabel": "Unfreeze",
+  "msgGloballyFreezeLabel": "Globally Freeze",
+  "msgGloballyUnfreezeLabel": "Globally Unfreeze",
+  "msgSetWhitelistedLimitLabel": "Set Whitelisted Limit",
+  "msgNftMintLabel": "NFT Mint",
+  "msgNftBurnLabel": "NFT Burn",
+  "msgNftFreezeLabel": "NFT Freeze",
+  "msgNftUnfreezeLabel": "NFT Unfreeze",
+  "msgNftIssueClassLabel": "NFT Issue Class"
 }

packages/ui/src/components/loadingSpinner/index.tsx

@@ -0,0 +1,18 @@
+import useStyles from '@/components/loadingSpinner/styles';
+import SpinnerSvg from './spinner.svg';
+
+const Spinner = ({ custom_style = {} }) => {
+  const { classes } = useStyles();
+  return (
+    <div className={classes.root} style={{ ...custom_style }}>
+      <SpinnerSvg
+        className={'spinner'}
+        style={{
+          animation: 'spin 1s infinite linear',
+        }}
+      />
+    </div>
+  );
+};
+
+export default Spinner;

packages/ui/src/components/loadingSpinner/styles.ts

@@ -0,0 +1,24 @@
+import { makeStyles } from 'tss-react/mui';
+
+const useStyles = makeStyles()((theme) => ({
+  root: {
+    '@keyframes spin': {
+      from: {
+        transform: 'rotate(0deg)',
+      },
+      to: {
+        transform: 'rotate(360deg)',
+      },
+    },
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    '& .spinner': {
+      scale: '0.8',
+    },
+  },
+}));
+
+export default useStyles;

packages/ui/src/components/msg/asset/burn/index.tsx

@@ -0,0 +1,35 @@
+import { FC } from 'react';
+import { Typography } from '@mui/material';
+import { Trans } from 'react-i18next';
+import { MsgBurn } from '@/models';
+import Name from '@/components/name';
+import { useProfileRecoil } from '@/recoil/profiles';
+import { formatNumber, formatToken } from '@/utils';
+
+const Burn: FC<{ message: MsgBurn }> = (props) => {
+  const { message } = props;
+
+  const amount = formatToken(message.coin.amount, message.coin.denom);
+
+  const parsedAmount = `${formatNumber(
+    amount.value,
+    amount.exponent
+  )} ${amount.displayDenom.toUpperCase()}`;
+
+  const sender = useProfileRecoil(message.sender);
+
+  return (
+    <Typography>
+      <Trans
+        i18nKey="message_contents:msgBurnContent"
+        components={[<Name address={message.sender} name={sender.name ?? message.sender} />, <b />]}
+        values={{
+          sender: message.sender,
+          amount: parsedAmount,
+        }}
+      />
+    </Typography>
+  );
+};
+
+export default Burn;