Skip to main content

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.