Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add bearby wallet integration #264

Closed
wants to merge 1 commit into from
Closed

Add bearby wallet integration #264

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 21 additions & 0 deletions cypress/support/component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
/* eslint-disable @typescript-eslint/no-namespace */
// ***********************************************************
// This example support/component.ts is processed and
// loaded automatically before your test files.
//
// This is a great place to put global configuration and
// behavior that modifies Cypress.
//
// You can change the location of this file or turn off
// automatically serving support files with the
// 'supportFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/configuration
// ***********************************************************

// Import commands.js using ES2015 syntax:
import './commands';

// Alternatively you can use CommonJS syntax:
// require('./commands')
16,998 changes: 12,927 additions & 4,071 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@
"dependencies": {
"@inrupt/jest-jsdom-polyfills": "^2.5.0",
"@massalabs/massa-web3": "^2.2.6",
"@hicaru/bearby-react": "^0.2.9",
"@massalabs/react-ui-kit": "^0.0.4-dev",
"@massalabs/wallet-provider": "^1.5.1",
"@rainbow-me/rainbowkit": "^1.0.7",
Expand Down
35 changes: 35 additions & 0 deletions src/assets/BearbySvg.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
/* eslint-disable max-len */
export function BearbySvg() {
return (
<svg
width="32"
height="32"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g id="513 1">
<path
id="Vector"
fillRule="evenodd"
clipRule="evenodd"
d="M11.2085 10.0953C12.0939 9.58088 12.2563 8.19581 11.5711 7.00162C10.886 5.80744 6.98342 2.11877 6.71984 2.27189C6.45626 2.425 7.67951 7.6703 8.36468 8.86448C9.04986 10.0587 10.323 10.6097 11.2085 10.0953ZM16.1941 18.6318C16.9027 18.2202 17.7533 18.0599 18.57 18.0101C19.0868 17.9787 19.6045 17.8291 20.0835 17.5509C21.7331 16.5925 22.2982 14.4699 21.3458 12.81C20.3935 11.15 18.2841 10.5813 16.6346 11.5397C16.3013 11.7332 15.8677 11.7093 15.5565 11.4817C14.4881 10.7 13.0197 10.5753 11.802 11.2828C10.5962 11.9833 9.96978 13.3058 10.092 14.6151C10.1303 15.026 9.91798 15.4418 9.56281 15.6482C7.91323 16.6066 7.34801 18.7291 8.30042 20.3891C9.25278 22.0491 11.3621 22.6178 13.0117 21.6594C13.4311 21.4158 13.7803 21.0969 14.0524 20.7295C14.6414 19.9342 15.3405 19.1278 16.1941 18.6318ZM15.401 5.91905C16.1087 7.15266 16.063 8.51255 15.2989 8.95645C14.5347 9.40045 13.3415 8.76033 12.6337 7.52677C12.3967 7.11366 12.3211 6.55387 12.236 5.925C12.0673 4.67612 11.8616 3.15504 10.2821 1.97029C11.4997 1.26292 14.6932 4.68551 15.401 5.91905ZM8.20517 13.0778C7.42887 13.5288 6.22587 12.8944 5.51806 11.6608C4.81034 10.4273 3.47624 5.92434 4.71312 5.20575C4.93226 7.18087 6.14647 8.11598 7.1434 8.8838C7.64534 9.27033 8.0922 9.61448 8.32925 10.0276C9.03696 11.2612 8.98142 12.6268 8.20517 13.0778ZM19.5306 6.51773C19.9182 7.59637 19.6351 8.73652 18.8983 9.06422C18.1615 9.39197 17.25 8.7832 16.8624 7.70456C16.7326 7.3433 16.7679 6.86841 16.8075 6.33492C16.8862 5.27536 16.982 3.98482 15.8359 2.89546C17.0099 2.37326 19.143 5.43905 19.5306 6.51773ZM6.35731 16.3501C5.70636 16.8287 4.58312 16.5057 3.84861 15.6286C3.1141 14.7515 1.54288 11.3592 2.58016 10.5965C2.94413 12.1403 4.10306 12.7019 5.05456 13.1629C5.53367 13.395 5.96014 13.6016 6.20614 13.8953C6.94062 14.7724 7.00836 15.8715 6.35731 16.3501Z"
fill="url(#paint0_linear_5899_5715)"
/>
</g>
<defs>
<linearGradient
id="paint0_linear_5899_5715"
x1="6.65993"
y1="2.30669"
x2="16.669"
y2="19.5346"
gradientUnits="userSpaceOnUse"
>
<stop offset="0.427083" stopColor="#E8006F" />
<stop offset="0.739583" stopColor="#AC59FF" />
</linearGradient>
</defs>
</svg>
);
}
25 changes: 16 additions & 9 deletions src/components/ConnectWalletPopup/CardVariations/MassaSelect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,35 +1,42 @@
import { Dropdown, MassaLogo } from '@massalabs/react-ui-kit';
import { IAccount } from '@massalabs/wallet-provider';
import { BsDiamondHalf } from 'react-icons/bs';

import { useAccountStore } from '@/store/store';
import { BearbySvg } from '@/assets/BearbySvg';
import { useAccountStore, useWalletStore } from '@/store/store';

interface WalletIcon {
[key: string]: JSX.Element;
}

export function SelectMassaWalletAccount() {
const [accounts, connectedAccount, setConnectedAccount] = useAccountStore(
(state) => [
const [accounts, connectedAccount, setConnectedAccount, isFetching] =
useAccountStore((state) => [
state.accounts,
state.connectedAccount,
state.setConnectedAccount,
],
);
state.isFetching,
]);

const [isMassaWallet] = useWalletStore((state) => [state.isMassaWallet]);

const selectedAccountKey: number = accounts.findIndex(
(account) => account.name() === connectedAccount?.name(),
);

const iconsAccounts = {
const iconsWallets: WalletIcon = {
MASSASTATION: <MassaLogo />,
OTHER: <BsDiamondHalf size={32} />,
BEARBY: <BearbySvg />,
};

return (
<div className="min-w-[50%]">
<Dropdown
readOnly={!isMassaWallet || isFetching}
select={selectedAccountKey}
options={accounts.map((account: IAccount) => {
return {
item: account.name(),
icon: iconsAccounts['MASSASTATION'],
icon: iconsWallets[account.name().toUpperCase()],
onClick: () => setConnectedAccount(account),
};
})}
Expand Down
170 changes: 155 additions & 15 deletions src/components/ConnectWalletPopup/ConnectWalletCards.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,13 @@
import { useEffect } from 'react';

import { useBearby } from '@hicaru/bearby-react';
import { Dropdown, MassaLogo, Tooltip } from '@massalabs/react-ui-kit';
import { FiChevronLeft } from 'react-icons/fi';
import { useAccount } from 'wagmi';

import { MassaConnectError } from './CardVariations/MassaError';
import { NoWallet } from '../Status/NoWallet/NoWallet';
import { BearbySvg } from '@/assets/BearbySvg';
import {
ResourceSidePanel,
ConnectedCard,
Expand All @@ -13,7 +18,11 @@ import {
NoAccounts,
} from '@/components';
import Intl from '@/i18n/i18n';
import { useAccountStore, useNetworkStore } from '@/store/store';
import {
useAccountStore,
useNetworkStore,
useWalletStore,
} from '@/store/store';

export function ConnectWalletCards() {
const { isConnected } = useAccount();
Expand All @@ -37,6 +46,11 @@ export function ConnectWalletCards() {
!isConnected && isStationInstalled && accounts.length > 0;
const hasNoAccounts = accounts?.length <= 0;

const [currentWallet, isMassaWallet] = useWalletStore((state) => [
state.currentWallet,
state.isMassaWallet,
]);

const gridColsTemplate = bothNotConnected ? 'grid-cols-3' : 'grid-cols-2';

function displayStatus() {
Expand Down Expand Up @@ -67,19 +81,15 @@ export function ConnectWalletCards() {
</WalletCard>
</div>
<div className="col-span-2 col-start-1 row-start-2">
<WalletCard>
<div className="flex justify-between items-center mb-4">
<p className="mas-body">
{Intl.t('connect-wallet.card-destination.to')}
</p>
{displayStatus()}
</div>
{!isStationInstalled || hasNoAccounts ? (
<MassaConnectError />
) : (
<ConnectedCard />
)}
</WalletCard>
{!currentWallet ? (
<AvailableWallets />
) : isMassaWallet ? (
<MassaWallet
{...{ isStationInstalled, hasNoAccounts, displayStatus }}
/>
) : (
<NonMassaWallet />
)}
</div>
{(bothNotConnected ||
isOnlyMetamaskConnected ||
Expand All @@ -92,7 +102,137 @@ export function ConnectWalletCards() {
);
}

// Wallet card wrapper component
export function MassaWallet({ ...props }) {
const { isStationInstalled, hasNoAccounts, displayStatus } = props;

return (
<WalletCard>
<SwitchWallet />
<div className="flex justify-between items-center mb-4">
<p className="mas-body">
{Intl.t('connect-wallet.card-destination.to')}
</p>
{displayStatus()}
</div>
{!isStationInstalled || hasNoAccounts ? (
<MassaConnectError />
) : (
<ConnectedCard />
)}
</WalletCard>
);
}

export function NonMassaWallet() {
const {
connected: bearbyConnected,
base58: walletAddress,
net,
} = useBearby();

function displayStatus() {
if (!bearbyConnected || !net) return <Disconnected />;
return <Connected />;
}

return (
<WalletCard>
<SwitchWallet />
<div className="flex justify-between items-center mb-4">
<div className="flex items-center">
<div className="mas-body">
{Intl.t('connect-wallet.card-destination.to')}
</div>
<Tooltip
customClass="mas-caption w-fit whitespace-nowrap"
content={Intl.t('connect-wallet.card-destination.non-massa-wallet')}
/>
</div>
{displayStatus()}
</div>
{!walletAddress || !bearbyConnected ? (
Intl.t('connect-wallet.station-connect-error.error-station')
) : (
<ConnectedCard />
)}
</WalletCard>
);
}

export function AvailableWallets() {
interface WalletIcon {
[key: string]: JSX.Element;
}

const iconsWallets: WalletIcon = {
MASSASTATION: <MassaLogo size={32} />,
BEARBY: <BearbySvg />,
};

const { connected: bearbyConnected, base58: walletAddress } = useBearby();

const [wallets, setCurrentWallet] = useWalletStore((state) => [
state.wallets,
state.setCurrentWallet,
]);

const hasNoBearby = !bearbyConnected || Boolean(walletAddress);
const hasNoWallets = wallets?.length === 0 && hasNoBearby;

const walletOptions = hasNoWallets
? [{ item: Intl.t('connect-wallet.card-destination.no-walets') }]
: wallets.map((wallet) => {
return {
item: wallet,
icon: iconsWallets[wallet.toUpperCase()],
onClick: () => setCurrentWallet(wallet),
};
});

return (
<WalletCard>
<div className="flex justify-between items-center mb-4">
<p className="mas-body pt-3">
{Intl.t('connect-wallet.card-destination.select-wallet')}
</p>
{hasNoWallets ? <NoWallet /> : null}
</div>
<div className="w-full">
<Dropdown readOnly={hasNoWallets} select={0} options={walletOptions} />
</div>
</WalletCard>
);
}

export function SwitchWallet() {
const [currentWallet, setCurrentWallet] = useWalletStore((state) => [
state.currentWallet,
state.setCurrentWallet,
]);
const [getAccounts, setConnectedAccount] = useAccountStore((state) => [
state.getAccounts,
state.setConnectedAccount,
]);

useEffect(() => {
getAccounts();
}, [currentWallet]);

function resetAccountAndWallet() {
setCurrentWallet(null);
setConnectedAccount(undefined);
}

return (
<div
onClick={resetAccountAndWallet}
className="flex flex-row just items-center hover:cursor-pointer mb-7 gap-2 w-fit"
>
<FiChevronLeft />
<p>{Intl.t('connect-wallet.card-destination.switch')}</p>
</div>
);
}

export function WalletCard({ ...props }) {
const { children } = props;
Expand Down
14 changes: 7 additions & 7 deletions src/components/FAQ/FAQCategories/AddTokensFAQ.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {
TDAI_MASSA_ADDRESS,
WETH_CONTRACT_ADDRESS,
WETH_MASSA_ADDRESS,
supportedtokens,
supportedTokens,
} from '@/const';
import { FAQProps, FAQcategories } from '@/const/faq';
import Intl from '@/i18n/i18n';
Expand Down Expand Up @@ -46,10 +46,10 @@ export function AddTokensFAQ(props: FAQProps) {
</p>
<p> Use these Smart contract addresses to see your balance: </p>
<p>
{supportedtokens.tDai} - {TDAI_MASSA_ADDRESS}
{supportedTokens.tDai} - {TDAI_MASSA_ADDRESS}
</p>
<p>
{supportedtokens.WETH} - {WETH_MASSA_ADDRESS}
{supportedTokens.WETH} - {WETH_MASSA_ADDRESS}
</p>
</div>
<div className="flex flex-col gap-3">
Expand Down Expand Up @@ -96,11 +96,11 @@ export function AddTokensFAQ(props: FAQProps) {
href="https://sepolia.etherscan.io/token/0x53844f9577c2334e541aec7df7174ece5df1fcf0"
target="_blank"
>
{supportedtokens.tDai}
{supportedTokens.tDai}
</a>
, provide this address: {TDAI_CONTRACT_ADDRESS}
</p>
<p> Symbol: {supportedtokens.tDai}</p>
<p> Symbol: {supportedTokens.tDai}</p>
<p> Decimals: 18</p>
</div>
<div className="flex flex-col">
Expand All @@ -111,11 +111,11 @@ export function AddTokensFAQ(props: FAQProps) {
href="https://sepolia.etherscan.io/address/0xf6E9FBff1CF908f6ebC1a274f15F5c0985291424"
target="_blank"
>
{supportedtokens.WETH}
{supportedTokens.WETH}
</a>
, provide this address: {WETH_CONTRACT_ADDRESS}
</p>
<p> Symbol: {supportedtokens.WETH}</p>
<p> Symbol: {supportedTokens.WETH}</p>
<p> Decimals: 18</p>
</div>
</div>
Expand Down
Loading
Loading