feat: add parity signer companion for polkadot vault support (#1417)

interlay · Jul 5, 2023 · c0e2d17 · c0e2d17 · vercel · Jul 5, 2023
1 parent affc56d
commit c0e2d17
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 6 deletions.
diff --git a/src/assets/img/parity-signer-companion-logo.svg b/src/assets/img/parity-signer-companion-logo.svg
diff --git a/src/component-library/WalletIcon/WalletIcon.stories.tsx b/src/component-library/WalletIcon/WalletIcon.stories.tsx
@@ -18,6 +18,10 @@ const Template: Story<WalletIconProps> = (args) => (
       <WalletIcon {...args} name='polkadot-js' />
       <Span size='xs'>Polkadot.js</Span>
     </Flex>
+    <Flex direction='column' gap='spacing1' justifyContent='center' alignItems='center'>
+      <WalletIcon {...args} name='parity-signer-companion' />
+      <Span size='xs'>Parity Signer Companion</Span>
+    </Flex>
   </Flex>
 );
 

diff --git a/src/component-library/WalletIcon/WalletIcon.tsx b/src/component-library/WalletIcon/WalletIcon.tsx
@@ -4,14 +4,15 @@ import { WalletName } from '@/utils/constants/wallets';
 
 import { IconProps } from '../Icon';
 import { FallbackIcon } from './FallbackIcon';
-import { PolkadotJS, SubWallet, Talisman } from './icons';
+import { ParitySignerCompanion,PolkadotJS, SubWallet, Talisman } from './icons';
 
 type WalletComponent = ForwardRefExoticComponent<IconProps & RefAttributes<SVGSVGElement>>;
 
 const wallet: Record<string, WalletComponent> = {
   [WalletName.PolkadotJS]: PolkadotJS,
   [WalletName.SubWallet]: SubWallet,
-  [WalletName.Talisman]: Talisman
+  [WalletName.Talisman]: Talisman,
+  [WalletName.ParitySignerCompanion]: ParitySignerCompanion
 };
 
 type Props = {

diff --git a/src/component-library/WalletIcon/icons/ParitySignerCompanion.tsx b/src/component-library/WalletIcon/icons/ParitySignerCompanion.tsx
@@ -0,0 +1,14 @@
+import { forwardRef } from 'react';
+
+import { Icon, IconProps } from '@/component-library/Icon';
+
+const ParitySignerCompanion = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
+  <Icon {...props} ref={ref} viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'>
+    <title>Parity Signer Companion</title>
+    <path d="M24.617 0 0 15.387l3.235 5.17 6.823-4.22v-3.325h5.343l12.51-7.756L24.617 0Zm4.154 6.648-10.28 6.383h11.514l1.979-1.212-3.213-5.17Zm4.091 6.527-2.621 1.599v2.988h-4.819l-6.687 4.159h10.908l6.247-3.875-3.028-4.871Zm-22.036 4.601L4.1 21.957l3.212 5.145 2.773-1.717v-3.464h5.568l6.687-4.145H10.826Zm25.925 1.648-6.473 4.026v3.22h-5.214l-12.982 8.048 3.3 5.282L40 24.613l-3.25-5.19ZM11.077 26.67l-2.898 1.8 3.05 4.874 10.748-6.674h-10.9Z" fill="#aeaeae"/>
+  </Icon>
+));
+
+ParitySignerCompanion.displayName = 'Parity Signer Companion';
+
+export { ParitySignerCompanion };
diff --git a/src/component-library/WalletIcon/icons/index.ts b/src/component-library/WalletIcon/icons/index.ts
@@ -1,3 +1,4 @@
+export { ParitySignerCompanion } from './ParitySignerCompanion';
 export { PolkadotJS } from './PolkadotJS';
 export { SubWallet } from './SubWallet';
 export { Talisman } from './Talisman';
diff --git a/src/config/wallets.ts b/src/config/wallets.ts
@@ -1,5 +1,6 @@
 import * as React from 'react';
 
+import { ReactComponent as ParitySignerCompanionLogoIcon } from '@/assets/img/parity-signer-companion-logo.svg';
 import { ReactComponent as PolkadotExtensionLogoIcon } from '@/assets/img/polkadot-extension-logo.svg';
 import { ReactComponent as SubWalletLogoIcon } from '@/assets/img/subwallet-logo.svg';
 import { ReactComponent as TalismanWalletLogoIcon } from '@/assets/img/talisman-wallet-logo.svg';
@@ -8,7 +9,8 @@ import { APP_NAME } from '@/config/relay-chains';
 enum WalletSourceName {
   PolkadotExtensionLogoIcon = 'polkadot-js',
   Talisman = 'talisman',
-  SubWallet = 'subwallet-js'
+  SubWallet = 'subwallet-js',
+  ParitySignerCompanion = 'parity-signer-companion'
 }
 
 interface WalletData {
@@ -32,6 +34,11 @@ const WALLETS: { [wallet in WalletSourceName]: WalletData } = {
     name: 'SubWallet',
     LogoIcon: SubWalletLogoIcon,
     url: 'https://subwallet.app/'
+  },
+  [WalletSourceName.ParitySignerCompanion]: {
+    name: 'Parity Signer Companion',
+    LogoIcon: ParitySignerCompanionLogoIcon,
+    url: 'https://github.com/paritytech/parity-signer-companion#installation'
   }
 };
 

diff --git a/src/utils/constants/wallets.ts b/src/utils/constants/wallets.ts
@@ -1,7 +1,8 @@
 enum WalletName {
   PolkadotJS = 'polkadot-js',
   Talisman = 'talisman',
-  SubWallet = 'subwallet-js'
+  SubWallet = 'subwallet-js',
+  ParitySignerCompanion = 'parity-signer-companion'
 }
 
 type WalletData = {
@@ -30,7 +31,13 @@ const SUBWALLET_WALLET = {
   url: 'https://subwallet.app/'
 };
 
-const WALLETS = [POLKADOTJS_WALLET, TALISMAN_WALLET, SUBWALLET_WALLET];
+const PARITY_SIGNER_COMPANION = {
+  title: 'Parity Signer Companion',
+  extensionName: WalletName.ParitySignerCompanion,
+  url: 'https://github.com/paritytech/parity-signer-companion#installation'
+};
+
+const WALLETS = [POLKADOTJS_WALLET, TALISMAN_WALLET, SUBWALLET_WALLET, PARITY_SIGNER_COMPANION];
 
-export { POLKADOTJS_WALLET, SUBWALLET_WALLET, TALISMAN_WALLET, WalletName, WALLETS };
+export { PARITY_SIGNER_COMPANION, POLKADOTJS_WALLET, SUBWALLET_WALLET, TALISMAN_WALLET, WalletName, WALLETS };
 export type { WalletData };