Merge f8a7148 into b40c3b9

decentraland · Jan 23, 2024 · bbc85bc · bbc85bc
2 parents b40c3b9 + f8a7148
commit bbc85bc
Show file tree

Hide file tree

Showing 27 changed files with 1,099 additions and 182 deletions.
diff --git a/webapp/package-lock.json b/webapp/package-lock.json
diff --git a/webapp/package.json b/webapp/package.json
@@ -22,7 +22,7 @@
     "dcl-catalyst-commons": "^9.0.1",
     "decentraland-connect": "^5.2.4",
     "decentraland-crypto-fetch": "^1.0.3",
-    "decentraland-dapps": "^17.0.0",
+    "decentraland-dapps": "^17.1.0",
     "decentraland-transactions": "^1.50.0",
     "ethers": "^5.6.8",
     "graphql": "^14.7.0",
@@ -123,4 +123,4 @@
     "@walletconnect/core": "2.9.2",
     "@walletconnect/keyvaluestorage": "1.0.0"
   }
-}
+}
diff --git a/webapp/src/components/Modals/ClaimNameFatFingerModal/ClaimNameFatFingerModal.container.ts b/webapp/src/components/Modals/ClaimNameFatFingerModal/ClaimNameFatFingerModal.container.ts
@@ -1,8 +1,15 @@
 import { connect } from 'react-redux'
+import { ChainId, Network } from '@dcl/schemas'
 import { withAuthorizedAction } from 'decentraland-dapps/dist/containers'
 import { AuthorizedAction } from 'decentraland-dapps/dist/containers/withAuthorizedAction/AuthorizationModal'
 import { getAddress } from 'decentraland-dapps/dist/modules/wallet/selectors'
 import { isLoadingType } from 'decentraland-dapps/dist/modules/loading/selectors'
+import { openFiatGatewayWidgetRequest } from 'decentraland-dapps/dist/modules/gateway/actions'
+import {
+  FiatGateway,
+  FiatGatewayOptions,
+  FiatGatewayListeners
+} from 'decentraland-dapps/dist/modules/gateway/types'
 import { RootState } from '../../../modules/reducer'
 import {
   getClaimNameStatus,
@@ -13,10 +20,13 @@ import {
 import {
   claimNameRequest,
   CLAIM_NAME_REQUEST,
-  claimNameClear
+  claimNameClear,
+  claimNameTransactionSubmitted
 } from '../../../modules/ens/actions'
 import { Contract } from '../../../modules/vendor/services'
 import { getContract } from '../../../modules/contract/selectors'
+import { getMana, getWallet } from '../../../modules/wallet/selectors'
+import { getIsClaimingNamesWithFiatEnabled } from '../../../modules/features/selectors'
 import {
   MapDispatch,
   MapDispatchProps,
@@ -25,16 +35,31 @@ import {
 import ClaimNameFatFingerModal from './ClaimNameFatFingerModal'
 
 const mapState = (state: RootState): MapState => ({
+  currentMana: getMana(state, Network.ETHEREUM),
   isLoading:
     isLoadingType(getLoading(state), CLAIM_NAME_REQUEST) ||
     isWaitingTxClaimName(state),
   address: getAddress(state),
-  getContract: (query: Partial<Contract>) => getContract(state, query)
+  getContract: (query: Partial<Contract>) => getContract(state, query),
+  wallet: getWallet(state),
+  isClaimingNamesWithFiatEnabled: getIsClaimingNamesWithFiatEnabled(state)
 })
 
 const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({
   onClaim: name => dispatch(claimNameRequest(name)),
-  onClaimNameClear: () => dispatch(claimNameClear())
+  onClaimNameClear: () => dispatch(claimNameClear()),
+  onOpenFiatGateway: (
+    gateway: FiatGateway,
+    options: FiatGatewayOptions,
+    listeners?: FiatGatewayListeners
+  ) => dispatch(openFiatGatewayWidgetRequest(gateway, options, listeners)),
+  onClaimTxSubmitted: (
+    subdomain: string,
+    address: string,
+    chainId: ChainId,
+    txHash: string
+  ) =>
+    dispatch(claimNameTransactionSubmitted(subdomain, address, chainId, txHash))
 })
 
 export default connect(
@@ -45,7 +70,8 @@ export default connect(
     ClaimNameFatFingerModal,
     AuthorizedAction.CLAIM_NAME,
     {
-      title_action: 'names_page.claim_name_fat_finger_modal.authorization.title_action',
+      title_action:
+        'names_page.claim_name_fat_finger_modal.authorization.title_action',
       action: 'names_page.claim_name_fat_finger_modal.authorization.action'
     },
     getClaimNameStatus,

diff --git a/webapp/src/components/Modals/ClaimNameFatFingerModal/ClaimNameFatFingerModal.css b/webapp/src/components/Modals/ClaimNameFatFingerModal/ClaimNameFatFingerModal.css
@@ -1,3 +1,13 @@
+.ClaimNameFatFingerModal.ui.small.modal {
+  width: 628px;
+}
+
+.ClaimNameFatFingerModal.ui.modal > .ui.form > .content,
+.ClaimNameFatFingerModal.ui.modal > .ui.form > .actions {
+  margin-left: 70px;
+  margin-right: 70px;
+}
+
 .ClaimNameFatFingerModal.ui.modal .content .dcl.field,
 .ClaimNameFatFingerModal.ui.modal .actions {
   margin-top: 30px;
@@ -7,6 +17,10 @@
   margin-top: 10px;
 }
 
+.ClaimNameFatFingerModal.ui.modal .dcl.field.simple .message {
+  display: none;
+}
+
 .ClaimNameFatFingerModal.ui.modal .dcl.field.error .ui.input > i.icon,
 .ClaimNameFatFingerModal.ui.modal .ui.form .dcl.field.error .ui.input > i.icon {
   background-position: 0% 100%;
@@ -33,3 +47,169 @@
   font-weight: 700;
   line-height: 17px;
 }
+
+.ClaimNameFatFingerModal.ui.modal .payWithTitle {
+  font-size: 22px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+}
+
+.ClaimNameFatFingerModal.ui.modal .payWith {
+  display: flex;
+  margin-top: 39px;
+  margin-bottom: 24px;
+}
+
+.ClaimNameFatFingerModal.ui.modal .paymentMethodContainer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+}
+
+.ClaimNameFatFingerModal.ui.modal .paymentMethod {
+  height: 109px;
+  flex-shrink: 0;
+  border-radius: 6px;
+  padding: 24px;
+  width: calc(100% - 2px);
+  display: flex;
+  align-items: center;
+  margin-top: 0;
+  align-items: left;
+  background: #232129;
+  z-index: 1;
+}
+
+.ClaimNameFatFingerModal.ui.modal .ui.header.dcl.mana {
+  margin-top: -12px;
+  margin-right: 4px;
+}
+
+.ClaimNameFatFingerModal.ui.modal .credit.card.outline.icon {
+  margin-bottom: 26px;
+  margin-right: 11px;
+}
+
+.ClaimNameFatFingerModal.ui.modal .paymentMethod > div {
+  display: flex;
+  flex-direction: column;
+}
+
+.ClaimNameFatFingerModal.ui.modal .paymentMethod > div > span:first-of-type {
+  color: white;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 24px;
+  padding-top: 0;
+}
+
+.ClaimNameFatFingerModal.ui.modal .paymentMethod > div > span {
+  color: #a09ba8;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 24px;
+  padding-top: 2px;
+}
+
+.ClaimNameFatFingerModal.ui.modal .paymentMethod.selected {
+  background: #333039;
+}
+
+.ClaimNameFatFingerModal .baseGradient {
+  cursor: pointer;
+  width: 385px;
+  height: 113px;
+  border-radius: 6px;
+  border: 1px solid #43404a;
+  margin-bottom: 11px;
+}
+
+.ClaimNameFatFingerModal .baseGradient.disabled {
+  cursor: not-allowed;
+}
+
+.ClaimNameFatFingerModal .gradient {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  position: relative;
+}
+
+.ClaimNameFatFingerModal .gradient::before {
+  content: '';
+  position: absolute;
+  aspect-ratio: 1/1;
+  width: 130%;
+  background-image: radial-gradient(
+      100% 100% at 6% 9%,
+      #ffbc5bff 2%,
+      #ffffff00 73%
+    ),
+    linear-gradient(60deg, #ff2d55 18%, #c640cd 100%);
+  z-index: 0;
+  animation: rotate 4s linear infinite;
+}
+
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.ClaimNameFatFingerModal .newPaymentMethod {
+  position: absolute;
+  left: 50px;
+  top: 50px;
+  color: #ffa25a;
+  font-size: 10px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+}
+
+.ClaimNameFatFingerModal .dcl.modal-navigation {
+  padding-top: 54px;
+}
+
+.ClaimNameFatFingerModal .dcl.modal-navigation-title {
+  font-size: 30px;
+}
+
+.ClaimNameFatFingerModal .content .details {
+  font-size: 16px;
+  line-height: 22px;
+}
+
+.ClaimNameFatFingerModal.ui.modal
+  .ui.form
+  .dcl.field
+  .ui.input
+  input::placeholder {
+  color: #716b7c;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
+.ClaimNameFatFingerModal .modalTooltip {
+  z-index: 9999;
+}
+
+.ClaimNameFatFingerModal .popupButton {
+  display: flex;
+  flex: 1 0 auto;
+}
+
+.ClaimNameFatFingerModal .popupButton > .ui.button {
+  flex: 1 0 auto;
+  margin-left: 12px;
+}