add PluginWallet component

src/components/PluginWallet/PluginWallet.stories.tsx

@@ -0,0 +1,31 @@
+import { PluginWallet } from './PluginWallet';
+import WalletActive from '../../assets/plugins/wallet/walletActive.svg';
+import WalletInactive from '../../assets/plugins/wallet/walletInactive.svg';
+
+export default { title: 'Components/PluginWallet', component: PluginWallet };
+
+export const _PluginWalletActive = {
+  render: () => (
+    <PluginWallet
+      isActive={true}
+      title={'Massawallet'}
+      iconActive={<WalletActive />}
+      iconInactive={<WalletInactive />}
+      onClickActive={() => console.log('intall')}
+      onClickInactive={() => console.log('launch')}
+    />
+  ),
+};
+
+export const _PluginWalletIncative = {
+  render: () => (
+    <PluginWallet
+      isActive={false}
+      title={'Massawallet'}
+      iconActive={<WalletActive />}
+      iconInactive={<WalletInactive />}
+      onClickActive={() => console.log('intall')}
+      onClickInactive={() => console.log('launch')}
+    />
+  ),
+};

src/components/PluginWallet/PluginWallet.test.tsx

@@ -0,0 +1,23 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import { PluginWallet } from './PluginWallet';
+
+describe('Components | PluginWallet', () => {
+  test('it should render', () => {
+    render(
+      <PluginWallet
+        isActive={true}
+        title={'Massawallet'}
+        iconActive={<></>}
+        iconInactive={<></>}
+        onClickActive={() => console.log('intall')}
+        onClickInactive={() => console.log('launch')}
+      />,
+    );
+
+    let pluginWallet = screen.getByTestId('pluginWallet');
+
+    expect(pluginWallet).toBeInTheDocument();
+  });
+});

src/components/PluginWallet/PluginWallet.tsx

@@ -0,0 +1,53 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import React from 'react';
+
+import { Button } from '../Button';
+import { FiArrowUpRight } from 'react-icons/fi';
+
+export interface PluginWalletProps {
+  isActive: boolean;
+  title: string;
+  iconActive: JSX.Element;
+  iconInactive: JSX.Element;
+  onClickActive: () => void;
+  onClickInactive: () => void;
+}
+
+export function PluginWallet(props: PluginWalletProps) {
+  const {
+    isActive,
+    title,
+    iconActive,
+    iconInactive,
+    onClickActive,
+    onClickInactive,
+  } = props;
+
+  const argsButtons = {
+    onClick: isActive ? onClickInactive : onClickActive,
+    preIcon: isActive ? <FiArrowUpRight /> : null,
+  };
+
+  return (
+    <div data-testid="pluginWallet" className="w-full sm:w-80 flex flex-col">
+      {isActive ? iconActive : iconInactive}
+      <div className="w-full py-6 text-f-primary bg-secondary flex flex-col items-center">
+        <div
+          className={`-2/3 px-4 py-2 text-center ${
+            isActive ? 'mas-title' : 'mas-buttons'
+          }`}
+        >
+          {isActive ? title : `${title} is not installed in your station`}
+        </div>
+        <div className="px-4 py-2">
+          {isActive ? (
+            <Button {...argsButtons}>Launch</Button>
+          ) : (
+            <Button {...argsButtons}>Install</Button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/PluginWallet/index.ts

@@ -0,0 +1 @@
+export * from './PluginWallet';