Denomination

WRadoslaw · Jul 7, 2023 · f1996ba · f1996ba
1 parent 90f684a
commit f1996ba
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 15 deletions.
diff --git a/packages/atlas/src/components/NumberFormat/NumberFormat.tsx b/packages/atlas/src/components/NumberFormat/NumberFormat.tsx
@@ -183,7 +183,7 @@ const Denomination = styled(Text)<{ align: 'right' | 'left' }>`
 `
 
 const Container = styled.div<{ orientation: NumberFormatProps['withDenomination'] }>`
-  display: flex;
+  display: inline-flex;
   flex-direction: column;
   gap: ${sizes(1)};
   width: fit-content;

diff --git a/packages/atlas/src/components/_auth/ExternalSignInModal/ExternalSignInModal.tsx b/packages/atlas/src/components/_auth/ExternalSignInModal/ExternalSignInModal.tsx
@@ -140,6 +140,7 @@ export const ExternalSignInModal: FC = () => {
       show={authModalOpenName === 'externalLogIn'}
       additionalActionsNodeMobilePosition="bottom"
       contentRef={dialogContentRef}
+      dividers={currentStep === ModalSteps.Membership}
       disableBackdropAnimation
     >
       <FormProvider {...form}>{renderStep()}</FormProvider>

diff --git a/packages/atlas/src/components/_notifications/NotificationTile/NotificationTile.tsx b/packages/atlas/src/components/_notifications/NotificationTile/NotificationTile.tsx
@@ -27,25 +27,29 @@ const getNotificationText = (notification: NotificationRecord): ReactNode => {
     case 'bid-made':
       return (
         <>
-          bid on your NFT for <NumberFormat as="span" value={notification.bidAmount} format="short" withToken />
+          bid on your NFT for{' '}
+          <NumberFormat as="span" value={notification.bidAmount} format="short" withToken withDenomination="before" />
         </>
       )
     case 'got-outbid':
       return (
         <>
-          outbid you at <NumberFormat as="span" value={notification.bidAmount} format="short" withToken />
+          outbid you at{' '}
+          <NumberFormat as="span" value={notification.bidAmount} format="short" withToken withDenomination="before" />
         </>
       )
     case 'bought':
       return (
         <>
-          purchased your NFT for <NumberFormat as="span" value={notification.price} format="short" withToken />
+          purchased your NFT for{' '}
+          <NumberFormat as="span" value={notification.price} format="short" withToken withDenomination="before" />
         </>
       )
     case 'bid-accepted':
       return (
         <>
-          has accepted your bid of <NumberFormat as="span" value={notification.bidAmount} format="short" withToken />
+          has accepted your bid of{' '}
+          <NumberFormat as="span" value={notification.bidAmount} format="short" withToken withDenomination="before" />
         </>
       )
     case 'auction-settled-owner':

diff --git a/...ges/atlas/src/components/_video/ReactionsOnboardingPopover/ReactionsOnboardingPopover.tsx b/...ges/atlas/src/components/_video/ReactionsOnboardingPopover/ReactionsOnboardingPopover.tsx
@@ -65,9 +65,17 @@ export const ReactionsOnboardingPopover = forwardRef<PopoverImperativeHandle, Re
             Comments and reactions are stored on blockchain and come with a fee
           </Text>
           <Text as="p" variant="t200" color="colorText" margin={{ top: 2 }}>
-            <NumberFormat value={fee} withToken as="span" color="colorText" variant="t200" format="short" /> is the
-            transaction fee for each reaction you leave under a video or comment, while the fee for posting a comment
-            depends on its length. Transaction fees are covered from your membership account balance.
+            <NumberFormat
+              value={fee}
+              withToken
+              as="span"
+              color="colorText"
+              variant="t200"
+              format="short"
+              withDenomination="before"
+            />{' '}
+            is the transaction fee for each reaction you leave under a video or comment, while the fee for posting a
+            comment depends on its length. Transaction fees are covered from your membership account balance.
           </Text>
         </PopoverContentWrapper>
       </DialogPopover>

diff --git a/packages/atlas/src/views/global/NftSaleBottomDrawer/NftForm/AcceptTerms/AcceptTerms.tsx b/packages/atlas/src/views/global/NftSaleBottomDrawer/NftForm/AcceptTerms/AcceptTerms.tsx
@@ -133,7 +133,7 @@ export const AcceptTerms: FC<AcceptTermsProps> = ({
             <StyledInformation text="Only bids higher than this value will be accepted" placement="top" multiline />
           </Title>
           <Description>
-            <NumberFormat as="span" value={formData.startingPrice} variant="h400" withToken />
+            <NumberFormat as="span" value={formData.startingPrice} variant="h400" withToken withDenomination="before" />
           </Description>
         </Row>
       )}
@@ -152,7 +152,7 @@ export const AcceptTerms: FC<AcceptTermsProps> = ({
             />
           </Title>
           <Description>
-            <NumberFormat as="span" value={formData.buyNowPrice} variant="h400" withToken />
+            <NumberFormat as="span" value={formData.buyNowPrice} variant="h400" withToken withDenomination="before" />
           </Description>
         </Row>
       )}
@@ -239,7 +239,7 @@ export const AcceptTerms: FC<AcceptTermsProps> = ({
           />
         </Title>
         <Description>
-          <NumberFormat as="span" value={fee} format="full" withToken variant="h400" />
+          <NumberFormat as="span" value={fee} format="full" withToken variant="h400" withDenomination="before" />
         </Description>
       </Row>
     </>

diff --git a/packages/atlas/src/views/viewer/ChannelView/ChannelView.tsx b/packages/atlas/src/views/viewer/ChannelView/ChannelView.tsx
@@ -279,6 +279,7 @@ export const ChannelView: FC = () => {
                       format="short"
                       color="colorText"
                       variant="t300"
+                      withDenomination="after"
                     />
                   </Balance>
                 </ChannelInfoContainer>

diff --git a/packages/atlas/src/views/viewer/MemberView/MemberActivity.tsx b/packages/atlas/src/views/viewer/MemberView/MemberActivity.tsx
@@ -46,7 +46,14 @@ const getDescription = (activity: ActivitiesRecord) => {
             {fromHandle}
           </StyledLink>{' '}
           placed a bid for{' '}
-          <NumberFormat as="span" color="inherit" format="short" value={activity.bidAmount} withToken />
+          <NumberFormat
+            as="span"
+            color="inherit"
+            format="short"
+            value={activity.bidAmount}
+            withToken
+            withDenomination="before"
+          />
         </>
       )
     case 'Sale':
@@ -62,7 +69,15 @@ const getDescription = (activity: ActivitiesRecord) => {
           <StyledLink to={absoluteRoutes.viewer.member(activity.to?.handle)} onClick={(e) => e.stopPropagation()}>
             {activity.to?.handle}
           </StyledLink>{' '}
-          NFT for <NumberFormat as="span" color="inherit" format="short" value={activity.price} withToken />
+          NFT for{' '}
+          <NumberFormat
+            as="span"
+            color="inherit"
+            format="short"
+            value={activity.price}
+            withToken
+            withDenomination="before"
+          />
         </>
       )
     case 'Purchase':
@@ -93,7 +108,15 @@ const getDescription = (activity: ActivitiesRecord) => {
           listed NFT{' '}
           {activity.typeName === 'NftSellOrderMadeEventData' && activity.price && (
             <>
-              for <NumberFormat as="span" color="inherit" format="short" value={activity.price} withToken />
+              for{' '}
+              <NumberFormat
+                as="span"
+                color="inherit"
+                format="short"
+                value={activity.price}
+                withToken
+                withDenomination="before"
+              />
             </>
           )}
         </>
@@ -143,7 +166,15 @@ const getDescription = (activity: ActivitiesRecord) => {
           >
             {fromHandle}
           </StyledLink>{' '}
-          changed price to <NumberFormat as="span" color="inherit" format="short" value={activity.price} withToken />
+          changed price to{' '}
+          <NumberFormat
+            as="span"
+            color="inherit"
+            format="short"
+            value={activity.price}
+            withToken
+            withDenomination="before"
+          />
         </>
       )
   }