Staking steps overview - modal component

[kkosiorowska]

Closes #96

This PR adds an overview of the staking steps. This is a simple component that displays the steps a user needs to go through to make a stake transaction.

UI

[ioay]

Let's move these steps to a standalone file.

[kkosiorowska]

I wonder if it makes sense for sure. This component is responsible for overview so I would look for the declared steps here. So in that case, where do you think such a file should be located?

[ioay]

Generally, I like organization patterns of keeping one function per file (excluding: utils/helpers) - this makes the code more readable. Take a look at the components Title/Description in this file - used only in the Steps, but the default exported function is Overview, which doesn't use Title/Description directly. In my opinion, we should keep small portions of codes(directly related to the main function) as simple as possible.
We should move STEPS also with helpers functions (Title/Description) to a standalone file, eg:
/src/components/Modals/Staking/Overview.utils.tsx or /src/components/Modals/Staking/utils/stepsOverview.tsx

@r-czajkowski What do you think?

[kkosiorowska]

TBH, I'm not a fan of creating separate files for small pieces of logic(functions dedicated only to this component or consts). Often then it gets messy and it's difficult to find something if we have a lot of files. I think that in most of the thesis projects we used this pattern.

@r-czajkowski Please let us know what you think. You have much more experience here.

[ioay]

Small pieces of logic are better because every file in this case has logic related to its needs - it doesn't make a mess in the code. IDE is responsible for not having to look for those files manually.

[r-czajkowski]

I see advantages in both approaches 😆. But in this case I would do the same tbh, because as you said Piotr, the steps have no logic - we just define a variable that is used in the overview component. I would extract them(steps, Title and Description) to a separate file if they were reusable components in the Staking domain eg:

src/
└── components/
    └── Modals/
        └── staking/
            ├── components/
            │   └── StakingSteps.tsx
            ├── index.tsx
            ├── StakeForm.tsx
            └── Overview.tsx

function Title({ children }: { children: React.ReactNode }) {
  return <TextLg fontWeight="bold">{children}</TextLg>
}

function Description({ children }: { children: React.ReactNode }) {
  return <TextMd color="grey.500">{children}</TextMd>
}

const STEPS = [
  {
    id: "sign-message",
    title: <Title>Sign message</Title>,
    description: (
      <Description>
        You will sign a gas-free Ethereum message to indicate the address where
        you&apos;d like to get your stBTC liquid staking token.
      </Description>
    ),
  },
  {
    id: "deposit-btc",
    title: <Title>Deposit BTC</Title>,
    description: (
      <Description>
        You will make a Bitcoin transaction to deposit and stake your BTC.
      </Description>
    ),
  },
]

export default function StakingSteps() {
  return (
    
        <StepperBase
          index={-1}
          height={64}
          size="sm"
          orientation="vertical"
          complete={<StepNumber />}
          steps={STEPS}
        />
     
  )
}

or would put them in a src/components/shared dir if they were used in other places as well.

[ioay]

@r-czajkowski I like your idea!
Small improvements: Instead of nesting the components folders, we can pull the Overview.tsx and StakingSteps.tsx into the Overview folder, eg:

src/
└── components/
    └── Modals/
        └── staking/
            ├── Overview/
            │   └── Overview.tsx
            │   └── StakingSteps.tsx
            ├── index.tsx
            └── StakeForm.tsx

[r-czajkowski]

@r-czajkowski I like your idea! Small improvements: Instead of nesting the components folders, we can pull the Overview.tsx and StakingSteps.tsx into the Overview folder, eg:

src/
└── components/
    └── Modals/
        └── staking/
            ├── Overview/
            │   └── Overview.tsx
            │   └── StakingSteps.tsx
            ├── index.tsx
            └── StakeForm.tsx

One more improvement: since we are in the Overview domain I would rename to index.tsx.

src/
└── components/
    └── Modals/
        └── staking/
            ├── Overview/
            │   └── index.tsx
            │   └── StakingSteps.tsx
            ├── index.tsx
            └── StakeForm.tsx

[kkosiorowska]

We can do it this way as @r-czajkowski suggested. This logic will have to be updated anyway in a future PR on staking steps. Probably then we will want to use the structure proposed earlier:

src/
└── components/
    └── Modals/
        └── staking/
            ├── components/
            │   └── StakingSteps.tsx
            ├── index.tsx
            ├── StakeForm.tsx
            └── Overview.tsx

Or something else will be determined in the next step.

[kkosiorowska]

2d0d7bf

[ioay]

LGTM 🚀