[ALEPH-80] feat/refactor: simplify instance creation chain switching

src/components/common/InfoTooltipButton/cmp.tsx

@@ -1,9 +1,10 @@
 import { memo, useEffect, useRef, useState } from 'react'
 import { StyledInfoTooltipButton } from './styles'
 import { InfoTooltipButtonProps } from './types'
-import { Icon, Tooltip, useResponsiveMax } from '@aleph-front/core'
+import { Icon } from '@aleph-front/core'
 import tw from 'twin.macro'
 import { TwStyle } from 'twin.macro'
+import ResponsiveTooltip from '../ResponsiveTooltip'
 
 export const InfoTooltipButton = ({
   children,
@@ -23,12 +24,6 @@ export const InfoTooltipButton = ({
 
   const targetRef = useRef<HTMLButtonElement>(null)
 
-  // @todo: Improve this using css
-  const isMobile = useResponsiveMax('md')
-  const mobileTw = isMobile
-    ? tw`!fixed !left-0 !top-0 !transform-none m-6 !z-20 !w-[calc(100% - 3rem)] !h-[calc(100% - 3rem)] !max-w-full`
-    : tw``
-
   const iconCss: (TwStyle | string)[] = []
   switch (align) {
     case 'left':
@@ -63,11 +58,10 @@ export const InfoTooltipButton = ({
         </StyledInfoTooltipButton>
       )}
       {renderTooltip && (
-        <Tooltip
+        <ResponsiveTooltip
           {...rest}
           targetRef={targetRef}
           content={tooltipContent}
-          css={mobileTw}
         />
       )}
     </>

src/components/common/ResponsiveTooltip/cmp.tsx

@@ -0,0 +1,15 @@
+import { memo } from 'react'
+import { Tooltip, TooltipProps, useResponsiveMax } from '@aleph-front/core'
+import tw from 'twin.macro'
+
+export const ResponsiveTooltip = (props: TooltipProps) => {
+  const isMobile = useResponsiveMax('md')
+  const css = isMobile
+    ? tw`!fixed !left-0 !top-0 !transform-none m-6 !z-20 !w-[calc(100% - 3rem)] !h-[calc(100% - 3rem)] !max-w-full`
+    : ''
+
+  return <Tooltip {...props} css={css} />
+}
+ResponsiveTooltip.displayName = 'ResponsiveTooltip'
+
+export default memo(ResponsiveTooltip) as typeof ResponsiveTooltip

src/components/common/ResponsiveTooltip/index.ts

@@ -0,0 +1 @@
+export { default } from './cmp'

src/components/common/ResponsiveTooltip/styles.ts

@@ -0,0 +1,20 @@
+import { Tooltip } from '@aleph-front/core'
+import styled from 'styled-components'
+import tw from 'twin.macro'
+
+export type StyledResponsiveTooltipProps = {
+  $isMobile: boolean
+}
+
+export const StyledResponsiveTooltip = styled(
+  Tooltip,
+).attrs<StyledResponsiveTooltipProps>(({ $isMobile, ...tooltipProps }) => {
+  const css = $isMobile
+    ? tw`!absolute !top-0 !left-0 !transform-none !z-50 !w-[calc(100% - 3rem)] !h-[calc(100% - 3rem)] !max-w-full !m-48`
+    : ''
+
+  return {
+    ...tooltipProps,
+    css,
+  }
+})<StyledResponsiveTooltipProps>``

src/components/form/CheckoutSummary/cmp.tsx

@@ -250,13 +250,15 @@ export const CheckoutSummary = ({
   domains,
   description,
   button: buttonNode,
+  footerButton = buttonNode,
   control,
   receiverAddress,
   paymentMethod,
   website,
   mainRef,
   isPersistent = type === EntityType.Instance,
   disablePaymentMethod = true,
+  disabledStreamTooltip,
   onSwitchPaymentMethod,
 }: // streamDuration,
 CheckoutSummaryProps) => {
@@ -289,6 +291,7 @@ CheckoutSummaryProps) => {
       disabledHold={disabledHold}
       disabledStream={disabledStream}
       onSwitch={onSwitchPaymentMethod}
+      disabledStreamTooltip={disabledStreamTooltip}
     />
   )
 
@@ -298,7 +301,7 @@ CheckoutSummaryProps) => {
       <CheckoutSummaryFooter
         {...{
           paymentMethod,
-          submitButton: buttonNode,
+          submitButton: footerButton,
           paymentMethodSwitch: paymentMethodSwitchNode,
           mainRef,
           totalCost: cost?.totalCost,

src/components/form/CheckoutSummary/types.ts

@@ -25,13 +25,15 @@ export type CheckoutSummaryProps = {
   volumes?: VolumeField[]
   domains?: DomainField[]
   button?: ReactNode
+  footerButton?: ReactNode
   description?: ReactNode
   mainRef?: RefObject<HTMLElement>
   paymentMethod: PaymentMethod
   control?: Control
   receiverAddress?: string
   streamDuration?: StreamDurationField
   disablePaymentMethod?: boolean
+  disabledStreamTooltip?: ReactNode
   onSwitchPaymentMethod?: (e: PaymentMethod) => void
 }
 

src/components/form/SelectPaymentMethod/cmp.tsx

@@ -3,42 +3,62 @@ import { Switch } from '@aleph-front/core'
 import { SelectPaymentMethodProps } from './types'
 import { useSelectPaymentMethod } from '@/hooks/form/useSelectPaymentMethod'
 import { StyledLabel } from './styles'
+import { PaymentMethod } from '@/helpers/constants'
+import ResponsiveTooltip from '@/components/common/ResponsiveTooltip'
 
 export const SelectPaymentMethod = (props: SelectPaymentMethodProps) => {
   const {
     disabledHold,
     disabledStream,
     paymentMethodCtrl,
+    disabledStreamTooltip,
+    switchRef,
     handleClickHold,
     handleClickStream,
   } = useSelectPaymentMethod(props)
 
   return (
-    <div tw="flex items-center justify-center gap-4" className="tp-body3">
-      <StyledLabel
-        {...{
-          onClick: handleClickHold,
-          $disabled: disabledHold,
-        }}
+    <>
+      <div
+        tw="flex items-center justify-center gap-4"
+        className="tp-body3"
+        ref={switchRef}
       >
-        Hold tokens
-      </StyledLabel>
-      <Switch
-        {...{
-          ...paymentMethodCtrl.field,
-          ...paymentMethodCtrl.fieldState,
-          disabled: disabledHold || disabledStream,
-        }}
-      />
-      <StyledLabel
-        {...{
-          onClick: handleClickStream,
-          $disabled: disabledStream,
-        }}
-      >
-        Pay-as-you-go
-      </StyledLabel>
-    </div>
+        <StyledLabel
+          {...{
+            onClick: handleClickHold,
+            $selected: paymentMethodCtrl.field.value === PaymentMethod.Hold,
+            $disabled: disabledHold,
+          }}
+        >
+          Hold tokens
+        </StyledLabel>
+        <Switch
+          {...{
+            ...paymentMethodCtrl.field,
+            ...paymentMethodCtrl.fieldState,
+            disabled: disabledHold || disabledStream,
+          }}
+        />
+        <StyledLabel
+          {...{
+            onClick: handleClickStream,
+            $selected: paymentMethodCtrl.field.value === PaymentMethod.Stream,
+            $disabled: disabledStream,
+          }}
+        >
+          Pay-as-you-go
+        </StyledLabel>
+      </div>
+      {disabledStream && (
+        <ResponsiveTooltip
+          my="bottom-left"
+          at="top-left"
+          targetRef={switchRef as React.RefObject<HTMLButtonElement>}
+          content={disabledStreamTooltip}
+        />
+      )}
+    </>
   )
 }
 

src/components/form/SelectPaymentMethod/styles.tsx

@@ -1,14 +1,11 @@
 import tw from 'twin.macro'
 import styled, { css } from 'styled-components'
 
-export type StyledLabelProps = { $disabled?: boolean }
+export type StyledLabelProps = { $selected?: boolean; $disabled?: boolean }
 
 export const StyledLabel = styled.label<StyledLabelProps>`
-  ${({ $disabled = false }) => css`
-    /* ${tw`cursor-pointer`} */
-    /* @todo: fix it after supporting stream payment with automatic allocation or hold payment with manual allocation */
-    ${tw`cursor-not-allowed`}
-
+  ${({ $selected = false, $disabled = false }) => css`
+    ${$disabled ? tw`cursor-not-allowed` : !$selected ? tw`cursor-pointer` : ''}
     ${$disabled &&
     css`
       ${tw`opacity-40 cursor-not-allowed`}