chore: bumpies (decentraland#304)

* chore: bumpies

* feat: show right mana symbol

* fix: mana symbol margin

webapp/package.json

@@ -22,9 +22,9 @@
     "connected-react-router": "^6.6.1",
     "date-fns": "^2.8.1",
     "dcl-tslint-config-standard": "^2.0.0",
-    "decentraland-dapps": "^12.2.0",
+    "decentraland-dapps": "^12.2.1",
     "decentraland-transactions": "^1.7.1",
-    "decentraland-ui": "^3.3.0",
+    "decentraland-ui": "^3.4.2",
     "dotenv": "^8.2.0",
     "graphql": "^14.5.8",
     "history": "^4.10.1",

webapp/src/components/ManaField/ManaField.css

@@ -0,0 +1,11 @@
+.dcl.field .ManaField.ui.input input,
+.ui.form .dcl.field .ManaField.ui.input input {
+  padding-left: 36px !important;
+}
+
+.ManaField .dcl.mana.ui.header {
+  position: absolute;
+  left: 8px;
+  bottom: 12px;
+  margin-bottom: 0px;
+}

webapp/src/components/ManaField/ManaField.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { Field, Mana } from 'decentraland-ui'
+import { Props } from './ManaField.types'
+import './ManaField.css'
+
+export default class ManaField extends React.PureComponent<Props> {
+  render() {
+    const { className, network, ...rest } = this.props
+    let classes = `ManaField ${network}`
+    if (className) {
+      classes += ' ' + className
+    }
+    return (
+      <Field
+        {...rest}
+        className={classes}
+        icon={<Mana network={network} />}
+        iconPosition="left"
+      />
+    )
+  }
+}

webapp/src/components/ManaField/ManaField.types.ts

@@ -0,0 +1,6 @@
+import { Network } from '@dcl/schemas'
+import { FieldProps } from 'decentraland-ui'
+
+export type Props = FieldProps & {
+  network: Network
+}

webapp/src/components/ManaField/index.ts

@@ -0,0 +1,2 @@
+import ManaField from './ManaField'
+export { ManaField }

webapp/src/components/SellPage/SellModal/SellModal.tsx

@@ -21,6 +21,7 @@ import { VendorFactory } from '../../../modules/vendor/VendorFactory'
 import { AuthorizationModal } from '../../AuthorizationModal'
 import { NFTAction } from '../../NFTAction'
 import { Mana } from '../../Mana'
+import { ManaField } from '../../ManaField'
 import { getContractNames } from '../../../modules/vendor'
 import { getContract } from '../../../modules/contract/utils'
 import { NFTCategory } from '../../../modules/nft/types'
@@ -120,10 +121,11 @@ const SellModal = (props: Props) => {
 
       <Form onSubmit={() => setShowConfirm(true)}>
         <div className="form-fields">
-          <Field
+          <ManaField
             label={t('sell_page.price')}
             type="text"
             placeholder={toMANA(1000)}
+            network={nft.network}
             value={price}
             focus={true}
             onChange={(_event, props) => {
@@ -179,8 +181,10 @@ const SellModal = (props: Props) => {
             />
             <br />
             <T id="sell_page.confirm.line_two" />
-            <Field
+            <ManaField
+              className="mana-input"
               label={t('sell_page.price')}
+              network={nft.network}
               placeholder={price}
               value={confirmPrice}
               onChange={(_event, props) => {

webapp/src/lib/mana.ts

@@ -1,7 +1,5 @@
 import BN from 'bn.js'
 
-const MANA_SYMBOL = '⏣'
-
 let oneEthInMANA: BN | undefined
 
 export function formatMANA(value: string) {
@@ -13,15 +11,11 @@ export function formatMANA(value: string) {
 }
 
 export function toMANA(num: number) {
-  return num > 0 ? `${MANA_SYMBOL} ${num.toString()}` : ''
+  return num > 0 ? num.toString() : ''
 }
 
 export function fromMANA(mana: string) {
-  const num = mana
-    .split(MANA_SYMBOL + ' ')
-    .join('')
-    .split(/[,|.]/)
-    .join('')
+  const num = mana.split(/[,|.]/).join('')
 
   const result = parseInt(num, 10)