Building Blocks
Common components meant to be used across the app, this components ensure consistency and helps to make changes and further development faster.
There are a list of several common components being used across the app that should be considered before creating new components.
This components (as all other component) are react-native-web based. Specially components with interactions follow material guidelines and are based on react-native-paper
This components includes components to visualize and input G$, buttons, and profile related components as avatars components. Check the full list in common
- We write the styles as local as possible to the component. We prefer this ways or reusing styles in this order:
- Extracting common styling to configurable components such as
CustomButton
,UserAvatar
etc. - Extracting to the
react-native-paper
theme variable such asprimaryColor
- Extracting to the theme as a variable when a value is being used in several places and its not local. Example
defaultPadding
. NOTE: Do not extract when its a one case value, in that case, the value should be local to the component that uses the value
- Fonts and font properties should be defined in reusable components and not on each screen components. This should be done in styling components as
CustomButton
orCustomText
. - No layout on text or button components. All should be handled with the layout components such as
Section
,Section.Row
andSection.Stack
and flex on it.
Section
component is handling all this layout responsability in this way:Section
as a group with rounded borders with white background is the way or organizing blocks togetherSection.Stack
,Section.Row
can be used with the following properties as modifiers:justifyContent
,alignItems
,grow
<Section grow>
<Section.Title>Send To?</Section.Title>
<Section.Stack grow={1} justifyContent="space-around">
<InputRecipient
onChangeText={text => setScreenState({ to: text })}
onBlur={checkError}
to={to}
error={error}
/>
</Section.Stack>
<Section.Row grow={2} justifyContent="flex-end">
<ScanQRButton screenProps={props.screenProps} disabled={!!to} />
<GenerateLinkButton screenProps={props.screenProps} disabled={!!to} />
</Section.Row>
<Section>
On a
App.js
there is a theme
variable that is being pass to the react-native-paper provider. This theme serves to purposes, as a react-native-paper
theme and as a styling themeAs a styling theme any styling variable that is being used in several places can be extracted to the theme and then being used across the app by wrapping the component that needs the variable with the
withTheme
HOCExample
import * as React from 'react';
import { withTheme } from 'react-native-paper';
import { Text } from 'react-native';
function MyComponent(props) {
const { colors, titleFontSize } = props.theme;
return <Text style={{ color: colors.primary, fontSize: titleFontSize }}>Yo!</Text>;
}
export default withTheme(MyComponent);
This DApp uses G$ currency, however chain events and methods manage wgei (1 -> 100). In order to manage conversions and ensure consistency the token amount is being used in wgei accross the app.
The conversion is done right before displaying the amount for view components and right after user changes the amount in input components.
Showing users balance
// amount is in wgei
<BigGoodDollar number={balance} />
Component showing G$ converted from while the user types in.
const Amount = () => {
// amount in wgei
const [amount, setAmount] = useState()
<InputGoodDollar
autoFocus
wei={amount}
onChangeWei={setAmount}
/>
}
In order to get or post data from and to GoodServer there is an utility class called API. Please see API docs for a full detail.
Usage Example
const sendRecoveryEmail = async () => {
const currentMnemonics = await getMnemonics()
try{
await API.sendRecoveryInstructionByEmail(currentMnemonics)
showDialogWithData({
title: 'Backup Your Wallet',
message: 'We sent an email with recovery instructions for your wallet'
})
} catch (e){
log.error(e)
}
}
There is a common store to manage some of the application states. We use undux which is a simple and type safe redux alternative.
The store can be used as a hook or inyected as a wrapper into a component. For more information please check the docs for GDStore
Using
useStore
hookconst UserName = () => {
const store = GDStore.useStore()
const profile = store.get('profile')
return <Text>{profile.fullNamme}</Text>
}
Using
withStore
wrapperconst UserName = ({store}) => {
const profile = store.get('profile')
return <Text>{profile.fullNamme}</Text>
}
export GDStore.withStore(UserName)
Setting values example.
const SomeComponent = () => {
const store = GDStore.useStore()
const toggleSidemenu = () => store.set('sidemenu')({ visible: true })
return (
<TouchableOpacity style={styles.closeIconRow} onPress={toggleSidemenu}>
<Icon name="close" />
</TouchableOpacity>
)
}
Please note that this is a simplified example on how to use the undux store. We are actually using utils functions for this kind of things
There are some effects being used on undux store. Effects are actions that can be fired based on the store's state and changes.
There are a few third party effects as
pinoLogger
that logs every change in the store and withReduxDevtools
which uses dev tools to show on the browser the current state and all changes made.Other effects are more interesting:
withProfile
On isLoggedIn subscribes the store to profile updates on gundbupdateAllOnLoggedInCitizen
On isLoggedIn fires an updateAllPlease check the full effect list for more info
Last modified 2yr ago