feat(SPV-802): adjust pike config to new variables (#79)

src/api/types/serverConfig.ts

@@ -1,5 +1,6 @@
 export type ExperimentalConfig = {
-  pike_enabled: boolean;
+  pike_contacts_enabled: boolean;
+  pike_payment_enabled: boolean;
 };
 
 export type ServerConfig = {

src/components/TransferForm/TransferForm.tsx

@@ -18,7 +18,7 @@ import { ContactStatus } from '@/api';
 import { StatusBadge } from '../ContactsList/ContactsTable.tsx/StatusBadge';
 import styled from '@emotion/styled';
 import { PaymailAutocomplete } from '../Input/PaymailAutocomplete';
-import { usePikeEnabled } from '@/hooks/useFeatureFlags';
+import { usePikeContactsEnabled } from '@/hooks/useFeatureFlags';
 
 type TransferFormProps = {
   showContactsButton?: boolean;
@@ -32,7 +32,7 @@ export const TransferForm: FC<TransferFormProps> = ({ showContactsButton }) => {
   const [loading, setLoading] = useState<boolean>(false);
   const [transactionData, setTransactionData] = useState<TransactionData | null>(null);
   const [errors, setErrors] = useState<string>('');
-  const pikeEnabled = usePikeEnabled();
+  const pikeContactsEnabled = usePikeContactsEnabled();
 
   const sendButtonDisabled = !paymail || !amount;
   const cancelButtonDisabled = !paymail && !amount;
@@ -130,7 +130,7 @@ export const TransferForm: FC<TransferFormProps> = ({ showContactsButton }) => {
                 showContactsButton={showContactsButton}
               />
               <StyledStatusWrapper>
-                {pikeEnabled && paymailStatus != null && (
+                {pikeContactsEnabled && paymailStatus != null && (
                   <>
                     This is <StatusBadge status={paymailStatus} style={{ display: 'inline-block' }} />{' '}
                     {paymailStatus !== 'unknown' ? 'contact' : 'paymail'}

src/hooks/useFeatureFlags.ts

@@ -4,6 +4,11 @@ export const useExperimentalFeatures = () => {
   return useServerConfig().experimental_features;
 };
 
-export const usePikeEnabled = () => {
-  return useExperimentalFeatures().pike_enabled;
+export const usePikePaymentEnabled = () => {
+  return useExperimentalFeatures().pike_payment_enabled;
+};
+
+
+export const usePikeContactsEnabled = () => {
+  return useExperimentalFeatures().pike_contacts_enabled;
 };

src/providers/contacts/provider.tsx

@@ -1,7 +1,7 @@
 import { searchContacts } from '@/api/requests/contact';
 import { Contact } from '@/api/types/contact';
 import { PaginationParams } from '@/api/types';
-import { usePikeEnabled } from '@/hooks/useFeatureFlags';
+import { usePikeContactsEnabled } from '@/hooks/useFeatureFlags';
 import { FC, PropsWithChildren, createContext, useCallback, useEffect, useMemo, useState } from 'react';
 import { useAuthorization } from '../authorization';
 
@@ -18,11 +18,11 @@ export const ContactsProvider: FC<PropsWithChildren> = ({ children }) => {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(false);
   const [contacts, setContacts] = useState<Contact[] | null>(null);
-  const enabled = usePikeEnabled();
+  const pikeContactsEnabled = usePikeContactsEnabled()
   const { authorization } = useAuthorization();
 
   const load = useCallback(async () => {
-    if (!enabled || !authorization) {
+    if (!pikeContactsEnabled || !authorization) {
       return;
     }
     setLoading(true);
@@ -41,7 +41,7 @@ export const ContactsProvider: FC<PropsWithChildren> = ({ children }) => {
     } finally {
       setLoading(false);
     }
-  }, [authorization, enabled]);
+  }, [authorization, pikeContactsEnabled]);
 
   const refresh = useCallback(() => {
     load();

src/views/Dashboard/Dashboard.tsx

@@ -4,13 +4,13 @@ import { AccountSummary } from '@/components/AccountSummary';
 import { TransferForm } from '@/components/TransferForm';
 import { TransactionHistory } from '@/components/TransactionHistory';
 import { useWebsocket } from '@/hooks';
-import { usePikeEnabled } from '@/hooks/useFeatureFlags';
+import { usePikeContactsEnabled } from '@/hooks/useFeatureFlags';
 
 export const Dashboard = () => {
   const lgMatch = useMediaMatch('lg');
   useWebsocket();
 
-  const pikeEnabled = usePikeEnabled();
+  const pikeContactsEnabled = usePikeContactsEnabled();
 
   return (
     <>
@@ -20,7 +20,7 @@ export const Dashboard = () => {
         </Column>
         <Column percentageWidth={lgMatch ? 30 : 100}>
           <AccountSummary />
-          <TransferForm showContactsButton={pikeEnabled} />
+          <TransferForm showContactsButton={pikeContactsEnabled} />
         </Column>
       </Row>
     </>