Fix scrollview in pairing modal

Part of [laconicd testnet validator enrollment](https://www.notion.so/laconicd-testnet-validator-enrollment-6fc1d3cafcc64fef8c5ed3affa27c675)

Co-authored-by: Shreerang Kale <shreerangkale@gmail.com>
Reviewed-on: cerc-io/laconic-wallet-web#8

src/components/Accounts.tsx

@@ -60,7 +60,6 @@ const Accounts = () => {
           networksData,
           selectedNetwork!,
           accounts,
-          currentIndex,
         );
 
         if (!updatedNamespaces) {

src/components/PairingModal.tsx

@@ -19,7 +19,7 @@ const PairingModal = ({
   setModalVisible,
   setToastVisible,
 }: PairingModalProps) => {
-  const { accounts, currentIndex } = useAccounts();
+  const { accounts } = useAccounts();
   const { selectedNetwork, networksData } = useNetworks();
   const [isLoading, setIsLoading] = useState(false);
   const [chainError, setChainError] = useState('');
@@ -101,7 +101,6 @@ const PairingModal = ({
           networksData,
           selectedNetwork!,
           accounts,
-          currentIndex,
         );
         setSupportedNamespaces(nameSpaces);
       } catch (err) {
@@ -127,7 +126,6 @@ const PairingModal = ({
     networksData,
     selectedNetwork,
     accounts,
-    currentIndex,
     setCurrentProposal,
     setModalVisible,
     web3wallet
@@ -208,7 +206,7 @@ const PairingModal = ({
                 <>
                   {icon.endsWith('.svg') ? (
                     <View style={styles.dappLogo}>
-                      <Text>SvgURI requstIcon</Text>
+                      <Text>SvgURI requestIcon</Text>
                     </View>
                   ) : (
                     <Image style={styles.dappLogo} source={{ uri: icon }} />
@@ -231,25 +229,27 @@ const PairingModal = ({
         <Modal visible={visible} animationType="slide" transparent>
           <View style={styles.modalOuterContainer}>
             <View style={styles.modalContentContainer}>
-              <ScrollView showsVerticalScrollIndicator={true}>
+              <View style={styles.container}>
+                {icon && (
+                  <>
+                    {icon.endsWith('.svg') ? (
+                      <View style={styles.dappLogo}>
+                        <Text>SvgURI requestIcon</Text>
+                      </View>
+                    ) : (
+                      <Image style={styles.dappLogo} source={{ uri: icon }} />
+                    )}
+                  </>
+                )}
+
+                <Text variant="titleMedium">{dappName}</Text>
+                <Text variant="bodyMedium">{url}</Text>
+                <View style={styles.marginVertical8} />
+                <Text variant="titleMedium">Connect to this site?</Text>
+              </View>
+
+              <ScrollView showsVerticalScrollIndicator={true} style={styles.scrollViewContainer}>
                 <View style={styles.container}>
-                  {icon && (
-                    <>
-                      {icon.endsWith('.svg') ? (
-                        <View style={styles.dappLogo}>
-                          <Text>SvgURI requstIcon</Text>
-                        </View>
-                      ) : (
-                        <Image style={styles.dappLogo} source={{ uri: icon }} />
-                      )}
-                    </>
-                  )}
-
-                  <Text variant="titleMedium">{dappName}</Text>
-                  <Text variant="bodyMedium">{url}</Text>
-                  <View style={styles.marginVertical8} />
-                  <Text variant="titleMedium">Connect to this site?</Text>
-
                   {walletConnectData.walletConnectMethods.length > 0 && (
                     <View>
                       <Text variant="titleMedium">Chains:</Text>

src/styles/stylesheet.js

@@ -166,6 +166,7 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     marginBottom: 10,
     paddingHorizontal: 20,
+    minHeight: 100,
   },
   modalContentContainer: {
     display: 'flex',
@@ -301,7 +302,11 @@ const styles = StyleSheet.create({
   networksButton: {
     marginTop: 12,
     marginBottom: 20,
-  }
+  },
+  scrollViewContainer: {
+    height: 60,
+    marginTop: 20,
+  },
 });
 
 export default styles;

src/utils/constants.ts

@@ -1,5 +1,3 @@
-import { DENOM } from '@cerc-io/registry-sdk'
-
 import { COSMOS_TESTNET_CHAINS } from './wallet-connect/COSMOSData';
 import { EIP155_CHAINS } from './wallet-connect/EIP155Data';
 
@@ -12,7 +10,7 @@ export const DEFAULT_NETWORKS = [
     namespace: COSMOS,
     rpcUrl: process.env.REACT_APP_LACONICD_RPC_URL!,
     blockExplorerUrl: '',
-    nativeDenom: DENOM,
+    nativeDenom: 'alnt',
     addressPrefix: 'laconic',
     coinType: '118',
     gasPrice: '1',

src/utils/wallet-connect/helpers.ts

@@ -40,7 +40,6 @@ export const getNamespaces = async (
   networksData: NetworksDataState[],
   selectedNetwork: NetworksDataState,
   accounts: Account[],
-  currentIndex: number,
 ) => {
   const namespaceChainId = `${selectedNetwork.namespace}:${selectedNetwork.chainId}`;
 
@@ -101,23 +100,6 @@ export const getNamespaces = async (
     const requiredAddressesArray = await Promise.all(requiredAddressesPromise);
     const requiredAddresses = requiredAddressesArray.flat();
 
-    let sortedAccounts = requiredAddresses;
-
-    // If selected network is included in chains requested from dApp,
-    // Put selected account as first account
-    if (walletConnectChains.includes(namespaceChainId)) {
-      const currentAddresses = requiredAddresses.filter(address =>
-        address.includes(namespaceChainId),
-      );
-      sortedAccounts = [
-        currentAddresses[currentIndex],
-        ...currentAddresses.filter((address, index) => index !== currentIndex),
-        ...requiredAddresses.filter(
-          address => !currentAddresses.includes(address),
-        ),
-      ];
-    }
-
     // construct namespace object
     const newNamespaces = {
       eip155: {
@@ -133,7 +115,7 @@ export const getNamespaces = async (
           ...(optionalNamespaces.eip155?.events ?? []),
           ...(requiredNamespaces.eip155?.events ?? []),
         ],
-        accounts: sortedAccounts.filter(account => account.includes(EIP155)),
+        accounts: requiredAddresses.filter(account => account.includes(EIP155)),
       },
       cosmos: {
         chains: walletConnectChains.filter(chain => chain.includes(COSMOS)),
@@ -147,18 +129,12 @@ export const getNamespaces = async (
           ...(optionalNamespaces.cosmos?.events ?? []),
           ...(requiredNamespaces.cosmos?.events ?? []),
         ],
-        accounts: sortedAccounts.filter(account => account.includes(COSMOS)),
+        accounts: requiredAddresses.filter(account => account.includes(COSMOS)),
       },
     };
 
     return newNamespaces;
   } else {
-    // Set selected account as the first account in supported namespaces
-    const sortedAccounts = [
-      accounts[currentIndex],
-      ...accounts.filter((account, index) => index !== currentIndex),
-    ];
-
     switch (selectedNetwork.namespace) {
       case EIP155:
         return {
@@ -175,7 +151,7 @@ export const getNamespaces = async (
               ...(optionalNamespaces.eip155?.events ?? []),
               ...(requiredNamespaces.eip155?.events ?? []),
             ],
-            accounts: sortedAccounts.map(ethAccount => {
+            accounts: accounts.map(ethAccount => {
               return `${namespaceChainId}:${ethAccount.address}`;
             }),
           },
@@ -200,7 +176,7 @@ export const getNamespaces = async (
               ...(optionalNamespaces.cosmos?.events ?? []),
               ...(requiredNamespaces.cosmos?.events ?? []),
             ],
-            accounts: sortedAccounts.map(cosmosAccount => {
+            accounts: accounts.map(cosmosAccount => {
               return `${namespaceChainId}:${cosmosAccount.address}`;
             }),
           },