• Parameters

    • props: Readonly<{
          classNames?: Readonly<{
              Connect?: {
                  alert?: string;
                  alertsContainer?: string;
                  button?: string;
                  buttonText?: string;
                  container?: string;
                  description?: string;
                  footer?: string;
                  footerContent?: string;
                  hardwareWallet?: string;
                  hardwareWalletLabel?: string;
                  icon?: string;
                  loadingSpinner?: CSSProperties;
                  main?: string;
                  PoweredByNotifi?: {
                      container?: string;
                      content?: string;
                      notifiLogo?: string;
                      notifiText?: string;
                  };
                  title?: string;
              };
              container?: string;
              Ftu?: {
                  container?: string;
                  footer?: string;
                  FtuAlertEdit?: {
                      button?: string;
                      buttonContainer?: string;
                      container?: string;
                      loadingSpinner?: CSSProperties;
                      main?: string;
                  };
                  FtuTargetList?: {
                      button?: string;
                      buttonContainer?: string;
                      container?: string;
                      loadingSpinner?: CSSProperties;
                      main?: string;
                      NavHeader?: {
                          container?: ...;
                      };
                  };
                  ftuViews?: string;
                  PoweredByNotifi?: {
                      container?: string;
                      content?: string;
                      notifiLogo?: string;
                      notifiText?: string;
                  };
              };
              Inbox?: {
                  container?: string;
                  footer?: string;
                  InboxConfigTargetList?: {
                      button?: string;
                      container?: string;
                      loadingSpinner?: CSSProperties;
                      main?: string;
                      NavHeader?: {
                          container?: ...;
                      };
                  };
                  InboxConfigTopic?: {
                      banner?: string;
                      container?: string;
                      main?: string;
                      NavHeader?: {
                          container?: ...;
                      };
                      TargetStateBanner?: {
                          container?: ...;
                          signupBanner?: ...;
                          signupBannerContent?: ...;
                          signupBannerCta?: ...;
                          signupBannerIcon?: ...;
                          signupBannerText?: ...;
                          verifyBanner?: ...;
                          verifyBannerContent?: ...;
                          verifyBannerCta?: ...;
                          verifyBannerDescription?: ...;
                          verifyBannerIcon?: ...;
                          verifyBannerTitle?: ...;
                      };
                      title?: string;
                  };
                  InboxHistory?: {
                      container?: string;
                  };
                  InboxNavTabs?: {
                      container?: string;
                  };
                  inboxViews?: string;
              };
          }>;
          copy?: {
              Connect?: {
                  buttonText?: string;
                  description?: string;
                  footerContent?: FooterContent;
                  hardwareWalletLabel?: string;
                  title?: string;
              };
              ErrorGlobal?: {
                  header: string;
              };
              Ftu?: {
                  FtuAlertEdit?: {
                      buttonText?: string;
                      headerTitle?: string;
                  };
                  FtuTargetList?: {
                      buttonText?: string;
                      headerTitle?: string;
                  };
              };
              Inbox?: {
                  InboxConfigTargetList?: {
                      buttonText?: string;
                      header?: string;
                  };
                  InboxConfigTopic?: {
                      header?: string;
                      title?: string;
                  };
              };
              LoadingGlobal?: {
                  header: string;
              };
          };
          darkMode?: boolean;
          globalCtas?: GlobalCtas;
      }>
    • OptionaldeprecatedLegacyContext: any

    Returns ReactNode

Properties

contextTypes?: ValidationMap<any>

Lets you specify which legacy context is consumed by this component.

defaultProps?: Partial<Readonly<{
    classNames?: Readonly<{
        Connect?: {
            alert?: string;
            alertsContainer?: string;
            button?: string;
            buttonText?: string;
            container?: string;
            description?: string;
            footer?: string;
            footerContent?: string;
            hardwareWallet?: string;
            hardwareWalletLabel?: string;
            icon?: string;
            loadingSpinner?: CSSProperties;
            main?: string;
            PoweredByNotifi?: {
                container?: ...;
                content?: ...;
                notifiLogo?: ...;
                notifiText?: ...;
            };
            title?: string;
        };
        container?: string;
        Ftu?: {
            container?: string;
            footer?: string;
            FtuAlertEdit?: {
                button?: ...;
                buttonContainer?: ...;
                container?: ...;
                loadingSpinner?: ...;
                main?: ...;
            };
            FtuTargetList?: {
                button?: ...;
                buttonContainer?: ...;
                container?: ...;
                loadingSpinner?: ...;
                main?: ...;
                NavHeader?: ...;
            };
            ftuViews?: string;
            PoweredByNotifi?: {
                container?: ...;
                content?: ...;
                notifiLogo?: ...;
                notifiText?: ...;
            };
        };
        Inbox?: {
            container?: string;
            footer?: string;
            InboxConfigTargetList?: {
                button?: ...;
                container?: ...;
                loadingSpinner?: ...;
                main?: ...;
                NavHeader?: ...;
            };
            InboxConfigTopic?: {
                banner?: ...;
                container?: ...;
                main?: ...;
                NavHeader?: ...;
                TargetStateBanner?: ...;
                title?: ...;
            };
            InboxHistory?: {
                container?: ...;
            };
            InboxNavTabs?: {
                container?: ...;
            };
            inboxViews?: string;
        };
    }>;
    copy?: {
        Connect?: {
            buttonText?: string;
            description?: string;
            footerContent?: FooterContent;
            hardwareWalletLabel?: string;
            title?: string;
        };
        ErrorGlobal?: {
            header: string;
        };
        Ftu?: {
            FtuAlertEdit?: {
                buttonText?: (...) | (...);
                headerTitle?: (...) | (...);
            };
            FtuTargetList?: {
                buttonText?: (...) | (...);
                headerTitle?: (...) | (...);
            };
        };
        Inbox?: {
            InboxConfigTargetList?: {
                buttonText?: (...) | (...);
                header?: (...) | (...);
            };
            InboxConfigTopic?: {
                header?: (...) | (...);
                title?: (...) | (...);
            };
        };
        LoadingGlobal?: {
            header: string;
        };
    };
    darkMode?: boolean;
    globalCtas?: GlobalCtas;
}>>

Used to define default values for the props accepted by the component.

type Props = { name?: string }

const MyComponent: FC<Props> = (props) => {
return <div>{props.name}</div>
}

MyComponent.defaultProps = {
name: 'John Doe'
}
displayName?: string

Used in debugging messages. You might want to set it explicitly if you want to display a different name for debugging purposes.


const MyComponent: FC = () => {
return <div>Hello!</div>
}

MyComponent.displayName = 'MyAwesomeComponent'
propTypes?: WeakValidationMap<Readonly<{
    classNames?: Readonly<{
        Connect?: {
            alert?: string;
            alertsContainer?: string;
            button?: string;
            buttonText?: string;
            container?: string;
            description?: string;
            footer?: string;
            footerContent?: string;
            hardwareWallet?: string;
            hardwareWalletLabel?: string;
            icon?: string;
            loadingSpinner?: CSSProperties;
            main?: string;
            PoweredByNotifi?: {
                container?: ...;
                content?: ...;
                notifiLogo?: ...;
                notifiText?: ...;
            };
            title?: string;
        };
        container?: string;
        Ftu?: {
            container?: string;
            footer?: string;
            FtuAlertEdit?: {
                button?: ...;
                buttonContainer?: ...;
                container?: ...;
                loadingSpinner?: ...;
                main?: ...;
            };
            FtuTargetList?: {
                button?: ...;
                buttonContainer?: ...;
                container?: ...;
                loadingSpinner?: ...;
                main?: ...;
                NavHeader?: ...;
            };
            ftuViews?: string;
            PoweredByNotifi?: {
                container?: ...;
                content?: ...;
                notifiLogo?: ...;
                notifiText?: ...;
            };
        };
        Inbox?: {
            container?: string;
            footer?: string;
            InboxConfigTargetList?: {
                button?: ...;
                container?: ...;
                loadingSpinner?: ...;
                main?: ...;
                NavHeader?: ...;
            };
            InboxConfigTopic?: {
                banner?: ...;
                container?: ...;
                main?: ...;
                NavHeader?: ...;
                TargetStateBanner?: ...;
                title?: ...;
            };
            InboxHistory?: {
                container?: ...;
            };
            InboxNavTabs?: {
                container?: ...;
            };
            inboxViews?: string;
        };
    }>;
    copy?: {
        Connect?: {
            buttonText?: string;
            description?: string;
            footerContent?: FooterContent;
            hardwareWalletLabel?: string;
            title?: string;
        };
        ErrorGlobal?: {
            header: string;
        };
        Ftu?: {
            FtuAlertEdit?: {
                buttonText?: (...) | (...);
                headerTitle?: (...) | (...);
            };
            FtuTargetList?: {
                buttonText?: (...) | (...);
                headerTitle?: (...) | (...);
            };
        };
        Inbox?: {
            InboxConfigTargetList?: {
                buttonText?: (...) | (...);
                header?: (...) | (...);
            };
            InboxConfigTopic?: {
                header?: (...) | (...);
                title?: (...) | (...);
            };
        };
        LoadingGlobal?: {
            header: string;
        };
    };
    darkMode?: boolean;
    globalCtas?: GlobalCtas;
}>>

Used to declare the types of the props accepted by the component. These types will be checked during rendering and in development only.

We recommend using TypeScript instead of checking prop types at runtime.