data_structure_approach.md

Problem: rendering info section for 5 different transactions.

Data structure approach:

Info.tsx

const Info: React.FC = () => {
  const t = useI18nContext();
  const currentConfirmation = useSelector(currentConfirmationSelector);

  const infoRows = useMemo(() => {
    const rows = [
      {
        label: t('origin'),
        type: ConfirmInfoRowType.UrlType,
        data: currentConfirmation.msgParams?.origin,
      },
    ];

    if (currentConfirmation.type === 'type_sign' || currentConfirmation.type === 'approve_all') {
      rows.push({
        label: t('contract'),
        type: ConfirmInfoRowType.Address,
        data: currentConfirmation.msgParams?.from,
      });
    }

    if (currentConfirmation.type === 'siwe_sign' || currentConfirmation.type === 'approve') {
      rows.push({
        label: t('sender'),
        data: currentConfirmation.msgParams?.origin,
      });
    }

    if (currentConfirmation.type === 'approve_all' || currentConfirmation.type === 'approve') {
      rows.push({
        label: t('receiver'),
        data: currentConfirmation.value,
      });
    }

  }, [currentConfirmation]);

  return (
    <Box
      backgroundColor={BackgroundColor.backgroundDefault}
      borderRadius={BorderRadius.MD}
      padding={2}
      marginBottom={4}
    >
      <ConfirmInfo rowConfigs={infoRows} />
    </Box>
  );
};

jsx_approach.md

Problem: rendering info section for 5 different transactions.

Separate JSX approach:

PersonalSign.jsx

const PersonalSign = () => {
  const t = useI18nContext();
  const currentConfirmation = useSelector(currentConfirmationSelector);

  return (
    <Box
      backgroundColor={BackgroundColor.backgroundDefault}
      borderRadius={BorderRadius.MD}
      padding={2}
      marginBottom={4}
    >
      <ConfirmInfo>
        <ConfirmInfoRowUrl key={t('origin')} url={currentConfirmation.msgParams?.from} />
      </ConfirmInfo>
    </Box>
  );
}

TypedSign.jsx

const TypedSign = () => {
  const t = useI18nContext();
  const currentConfirmation = useSelector(currentConfirmationSelector);

  return (
    <Box
      backgroundColor={BackgroundColor.backgroundDefault}
      borderRadius={BorderRadius.MD}
      padding={2}
      marginBottom={4}
    >
      <ConfirmInfo>
        <ConfirmInfoRowUrl key={t('origin')} url={currentConfirmation.msgParams?.from} />
        <ConfirmInfoRowAddress key={t('origin')} address={currentConfirmation.msgParams?.from} />
      </ConfirmInfo>
    </Box>
  );
}

SIWESign.jsx

const SIWESign = () => {
  const t = useI18nContext();
  const currentConfirmation = useSelector(currentConfirmationSelector);

  return (
    <Box
      backgroundColor={BackgroundColor.backgroundDefault}
      borderRadius={BorderRadius.MD}
      padding={2}
      marginBottom={4}
    >
      <ConfirmInfo>
        <ConfirmInfoRowUrl key={t('origin')} url={currentConfirmation.msgParams?.from} />
        <ConfirmInfoRowUrl key={t('origin')} address={currentConfirmation.msgParams?.origin} />
      </ConfirmInfo>
    </Box>
  );
}

Approval.jsx

const SIWESign = () => {
  const t = useI18nContext();
  const currentConfirmation = useSelector(currentConfirmationSelector);

  return (
    <Box
      backgroundColor={BackgroundColor.backgroundDefault}
      borderRadius={BorderRadius.MD}
      padding={2}
      marginBottom={4}
    >
      <ConfirmInfo>
        <ConfirmInfoRowUrl key={t('label1')} url={currentConfirmation.approver} />
        <ConfirmInfoRowUrl key={t('label2')} address={currentConfirmation.amount} />
      </ConfirmInfo>
    </Box>
  );
}

ApproveAll.jsx

const SIWESign = () => {
  const t = useI18nContext();
  const currentConfirmation = useSelector(currentConfirmationSelector);

  return (
    <Box
      backgroundColor={BackgroundColor.backgroundDefault}
      borderRadius={BorderRadius.MD}
      padding={2}
      marginBottom={4}
    >
      <ConfirmInfo>
        <ConfirmInfoRowUrl key={t('label3')} url={currentConfirmation?.approver} />
        <ConfirmInfoRowUrl key={t('label4')} address={currentConfirmation?.receiver} />
      </ConfirmInfo>
    </Box>
  );
}

Info.jsx

const Info: React.FC = () => {
  const t = useI18nContext();
  const currentConfirmation = useSelector(currentConfirmationSelector);

  const getSignatureDetails = () => {
    switch (currentConfirmation.type) {
      case 'personal_sign':
        return <PersonalSign />
      case 'type_sign':
        return <TypeSign />
      case 'siwe_sign':
        return <SIWESign />
      case 'approve':
        return <Approve />
      case 'approve_all':
        return <ApproveAll />
      }
  }

  return (
    <Box
      backgroundColor={BackgroundColor.backgroundDefault}
      borderRadius={BorderRadius.MD}
      padding={2}
      marginBottom={4}
    >
      {getSignatureDetails()}
    </Box>
  );
};