base-v1.x.x to base-v1.6.0
Since the release of v1.6.0
we have removed the use of React.Context
and migrated to Recoil.
Doing so helped us better manage our global states on the long run and avoided context hell.
Update your chain's base branch
$ git fetch --tags
$ git checkout <your chain base>
$ git checkout -b merge/v1.6.0
$ git merge base-v1.6.0
Fix all merge conflicts.
Update custom messages
By default, the only places the need updating should be custom messages. In your IDE search for files containing useChainContext
If it is a test file like the following, you can safely remove the mock
jest.mock('@contexts', () => ({
useChainContext: () => ({
findAddress: jest.fn(() => ({
moniker: 'moniker',
imageUrl: null,
})),
}),
}));
If it is a custom tx like the following:
import React from 'react';
import Trans from 'next-translate/Trans';
import { Typography } from '@material-ui/core';
import { Name } from '@components';
import { MsgLinkChainAccount } from '@models';
import { useChainContext } from '@contexts';
const LinkChainAccount = (props: {
message: MsgLinkChainAccount;
}) => {
const { findAddress } = useChainContext();
const { message } = props;
const signer = findAddress(message.signer);
const signerMoniker = signer ? signer?.moniker : message
.signer;
return (
<Typography>
<Trans
i18nKey="message_contents:txLinkChainAccount"
components={[
(
<Name
address={message.signer}
name={signerMoniker}
/>
),
(
<b />
),
]}
values={{
name: message.chainConfig.name,
}}
/>
</Typography>
);
};
export default LinkChainAccount;
Replace import { useChainContext } from '@contexts';
with import { useProfileRecoil } from '@recoil/profiles';
and delete const { findAddress } = useChainContext();
.
Replace const signer = findAddress(message.signer);
with const signer = useProfileRecoil(message.signer);
.
Replace const signerMoniker = signer ? signer?.moniker : message.signer;
with const signerMoniker = signer ? signer?.name : message.signer;
The final results should be something like the following:
import React from 'react';
import Trans from 'next-translate/Trans';
import { Typography } from '@material-ui/core';
import { Name } from '@components';
import { MsgLinkChainAccount } from '@models';
import { useProfileRecoil } from '@recoil/profiles';
const LinkChainAccount = (props: {
message: MsgLinkChainAccount;
}) => {
const { message } = props;
const signer = useProfileRecoil(message.signer);
const signerMoniker = signer ? signer?.name : message.signer;
return (
<Typography>
<Trans
i18nKey="message_contents:txLinkChainAccount"
components={[
(
<Name
address={message.signer}
name={signerMoniker}
/>
),
(
<b />
),
]}
values={{
name: message.chainConfig.name,
}}
/>
</Typography>
);
};
export default LinkChainAccount;
Update custom messages (extras)
If you have a list of users please look at src/components/msg/bank/multisend/index.tsx
and see how useProfilesRecoil
is used.
All recoil related functions are located inside src/recoil
Clean up
Review that React Context is no longer being used. Feel free to open up an issue if you have questions.