transaction-list transaction-list-error.tsx

0% Statements 0/9

0% Branches 0/4

0% Functions 0/1

0% Lines 0/8

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import { templateTxBoxProps } from './transaction-list-item-pseudo';
import { Text, Flex, BoxProps, color } from '@stacks/ui';
import { StacksNode } from '@store/stacks-node';
import React, { FC } from 'react';
import { Link } from 'react-router-dom';
 
const linkProps: BoxProps = {
  color: 'blue',
  textStyle: 'caption.medium',
  fontSize: '12px',
  lineHeight: '22px',
  cursor: 'pointer',
};
 
interface TransactionListErrorProps {
  node: StacksNode;
  error: string;
}
 
export const TransactionListError: FC<TransactionListErrorProps> = ({ node, error }) => {
  const usingPbcHostedNode = node.id === 'default';
  return (
    <Flex {...templateTxBoxProps}>
      <Text textStyle="body.small" display="block" textAlign="center" mb="tight">
        {error}
      </Text>
      <Text
        textStyle="caption"
        color={color('text-caption')}
        textAlign="center"
        mx="base"
        lineHeight="20px"
      >
        {usingPbcHostedNode && <>Unable to connect to the Hiro Systems hosted node.</>}
        {!usingPbcHostedNode && (
          <>
            Make sure you&apos;re connecting to a working Stacks Node
            <br />
            You&apos;re currently using {node.url}
            <br />
            <Link to="/settings">
              <Text {...linkProps}>Check your Stacks Node settings.</Text>
            </Link>
          </>
        )}
      </Text>
    </Flex>
  );
};