add PluginWallet component (#204)

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={null}
+        iconInactive={null}
+        onClickActive={() => console.log('intall')}
+        onClickInactive={() => console.log('launch')}
+      />,
+    );
+
+    let pluginWallet = screen.getByTestId('pluginWallet');
+
+    expect(pluginWallet).toBeInTheDocument();
+  });
+});

src/components/PluginWallet/PluginWallet.tsx

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

src/components/PluginWallet/index.ts

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