Global

Members

# (constant) Routes

Here are hardcoded all the available routes for the app, with the following properties:
Properties
Name Type Attributes Description
component React.LazyExoticComponent.<any> this is the page / view that will be rendered in this route
requiresAuth boolean If the route requires the user to be authenticated or not
path string the url for the route starting with "/"
guestOnly boolean <optional>
 if the route can only be seen if the user is not autheticated
Source:

Methods

# CopyText()

This component will receive 3 main things
Properties
Name Type Attributes Description
body string text for cpy
children ReactElement call to action
duration number <optional>
 the duration of the snackbar in milliseconds
Source:
Example 
<CopyText body="some text" duration={30000}>
		<button>copy</button>
</CopyText>

# CreateCredentialProp()

This component will be the card that shows the suer the inputs they must / should complete to register their credential, and will update the global state, where the credential is.
Properties
Name Type Attributes Description
layoutOptions "text field" | "select option" | "multiline" | "multiple codes" | "sqa" All the possible inputs for the credential props
label string The input's label
accessCredentialProp AccessCredntialPropT The name of the property the user will be editing
editCredentialProp function This function will dispatch an event to update the state of the credencial when the user changes anything
isMandatory boolean <optional>
 If the user MUST complete this input
defaultExpanded boolean <optional>
 If the card is open before the user does anything
companies Array.<CompanyT> <optional>
 An array of all the available companies for the user to select
maxChar number The max amount of characters per input
isCrypto boolean If the input is for crypto currency access words
Source:
Examples 
<CreateCredentialProp
        label="your security question & answer"
        layout="sqa"
        maxChar={191}
        accessCredentialProp="security_question"
        editCredentialProp={dispatchEditCredential}
    />

    
<CreateCredentialProp
        layout="select option"
        companies={["", ""]}
        label="select one or write your own"
        isMandatory
        defaultExpanded
        maxChar={50}
        accessCredentialProp="company_name"
        editCredentialProp={dispatchEditCredential}
    />

# DeleteCredential()

This component will be the one that actially gives the order to delete a credential. It will delete it from the Indexed DB & call the api to delete it from the real DB.
Properties
Name Type Description
credentialId number The id of the credential to delete
Source:
Example 
<DeleteCredential credentialId={32} />

# Dialog()

A customizable call to action button that opens a dynamic dialog with the text as the children of the component
Properties
Name Type Attributes Description
children ReactElement The text that will be shown once the dialog opened
title string The title of the dialog
tooltipPlacement "left" | "right" | "top" | "bottom" | "bottom-end" | "bottom-start" | "left-end" | "left-start" | "right-end" | "right-start" | "top-end" | "top-start" The position where the tooltip will be
className any <optional>
 The custom className that will be applied to the button
tooltipTitle string <optional>
 The title for the tooltip
Source:
Example 
<DialogComponent
			title="title of the dialog"
			tooltipPlacement="top"
			className={classes.yourClassName}
			tooltipTitle="title for the tooltip"
 >
		<>
			<p> lorem ipsum </p>
			<p> lorem ipsum 2 </p>
		</>
 </DialogComponent>

# EditCodes()

This is the component responsible of managing the multiple codes property of a credential, receives the codes as an array, but here is the logic to update the codes on the global state.
Properties
Name Type Description
codes Array.<string> The codes that will be rendered & dispatched to redux
option 1 | 2 The layout for the codes (1: shows a button which opens a model. 2: shows every code inside an input)
isCrypto boolean If the codes to edit are the words to access crypto currency wallets
Source:
Example 
<EditCodes codes={["", ""]} option={1} isCrypto />

# MapRoutes(routes)

This component will map all the routes imported from Routes, and enable/disable routes that require auth.
Parameters:
Name Type Description
routes Array.<RouteT> The routes imported from Routes
Source:
Returns:
The routes for the app

# PurchaseButton()

This component will be calling paypal's magic buttons or coinbase's api to generate a purchase button
Properties
Name Type Attributes Description
amount number How much has to pay the user (in USD)
method "PayPal" | "Crypto" How is the user going to pay?
type "slots" | "premium" What the user is going to buy
goBack function This function is from the parent component. Its used when the user wants to go bak to calc the price step
initPaymentInstance function This function will give the api the required parameters to open a payment instance and verify the payment
testing boolean <optional>
 If the behavior of the component
Source:
Example 
<PurchaseButton
        amount={100}
        type={"premium"}
        method={"Crypto"}
        goBack={() => setStep(1)}
    />

# PurchaseDialog()

This component will calculate the prices for the user's purchase, and load them into the PurchaseButton
Properties
Name Type Description
method "PayPal" | "Crypto" How is the user going to pay?
type "premium" | "slots" What the user is going to buy
Source:

# Section_Downloads()

Properties
Name Type Attributes Description
alternative boolean <optional>
 if true, title is big, false / undefined title is smaller
testing boolean <optional>
 if testing the layout of the buttons
Source:

# Section_ShowCredential()

This is the section that will show all the properties that a credential has, one each, using the VisualizeCredentialProp component
Properties
Name Type Description
getDecryptedCredential function This function receives 2 params: 1- decrypted: true alweys, 2- agent: string (the user agent which is obtained inside of this component)
Source:

# Section_UpdateRole()

This component will show the PurchaseDialog and must receive the following props:
Properties
Name Type Description
userRole "free" | "semi-premium" | "premium" | "admin" The user's role
canBuySlots boolean If the user is actually allowed to buy more solts
Source:

# Snackbar()

Properties
Name Type Attributes Description
message string The message that will be shown on the snackbar
open boolean The initial state for the snackbar
duration number <optional>
 The time in milliseconds that the snackbar will be open. Must be greater than 1000. Default is 6000
verticalPosition "bottom" | "top" <optional>
 Where in the Y axis will be located
horizontalPosition "center" | "left" | "right" <optional>
 Where in the X axis will be located
Source:
Example 
<Snackbar
		open={true}
		message={"a long message for the user"}
		duration={30000}
		verticalPosition="bottom"
		horizontalPosition="left"
	/>

# VisualizeCredentialProp()

This component will show dynamically the appropiate input / component that the credential property requires.
Properties
Name Type Attributes Description
label string The label's text for the card
locked boolean The state of the inputs, if the user can edit or not
visible boolean The state of the view, if the suer can see the decrypted credential.
propName AccessCredentialPropT This is the name to access the property of the credential stored on the global state.
isCrypto boolean <optional>
 If the property is the cyprto currency access words
maxChar number <optional>
 The amount of char that the user is allowed to write on the inputs
Source: