fix: added chain icon in criteria condition

push-protocol · Nov 9, 2023 · d52e687 · d52e687
1 parent 04d637b
commit d52e687
Show file tree

Hide file tree

Showing 6 changed files with 165 additions and 31 deletions.
diff --git a/packages/uiweb/src/lib/components/chat/CreateGroup/AddCriteria.tsx b/packages/uiweb/src/lib/components/chat/CreateGroup/AddCriteria.tsx
@@ -22,6 +22,7 @@ import OptionButtons from '../reusables/OptionButtons';
 
 import EthereumSvg from '../../../icons/ethereum.svg';
 import PolygonSvg from '../../../icons/polygon.svg';
+import ArbitrumSvg from '../../../icons/arbitrum.svg';
 import BSCSvg from '../../../icons/bsc.svg';
 import OptimismSvg from '../../../icons/optimisim.svg';
 import { BLOCKCHAIN_NETWORK, device } from '../../../config';
@@ -233,6 +234,13 @@ const AddCriteria = ({
       icon: OptimismSvg,
       function: () => setSelectedChainValue(3),
     },
+    {
+      id: 4,
+      value: BLOCKCHAIN_NETWORK[env].ARBITRUM,
+      title: 'Arbitrim',
+      icon: ArbitrumSvg,
+      function: () => setSelectedChainValue(4),
+    },
   ];
 
   const onQuantityChange = (e: any) => {

diff --git a/packages/uiweb/src/lib/components/chat/CreateGroup/ConditionsComponent.tsx b/packages/uiweb/src/lib/components/chat/CreateGroup/ConditionsComponent.tsx
@@ -8,12 +8,18 @@ import { ThemeContext } from '../theme/ThemeProvider';
 import Dropdown, { DropdownValueType } from '../reusables/DropDown';
 import { ConditionArray, ConditionData, IChatTheme } from '../exportedTypes';
 import { useClickAway, useTokenSymbolLoader } from '../../../hooks';
-import { CATEGORY, CRITERIA_TYPE, CriteriaType, PushData, TOKEN_NFT_COMPARISION, TokenNftComparision } from '../types';
+import {
+  CATEGORY,
+  CRITERIA_TYPE,
+  CriteriaType,
+  TOKEN_NFT_COMPARISION,
+  TokenNftComparision,
+} from '../types';
 
 import EditSvg from '../../../icons/EditSvg.svg';
 import RemoveSvg from '../../../icons/RemoveSvg.svg';
 import { shortenText } from '../../../helpers';
-import { GUILD_COMPARISON_OPTIONS } from '../constants';
+import { GUILD_COMPARISON_OPTIONS, NETWORK_ICON_DETAILS } from '../constants';
 
 export type CriteraValueType = {
   invertedIcon?: any;
@@ -54,8 +60,12 @@ const MoreOptionsContainer = ({
 
   useClickAway(dropdownRef, () => setSelectedIndex(null));
   return (
-    <Section onClick={() => handleMoreOptionsClick(row, col)}  position='static'>
-      <MoreDarkIcon color={theme.iconColor?.groupSettings} width='24' height='24'/>
+    <Section onClick={() => handleMoreOptionsClick(row, col)} position="static">
+      <MoreDarkIcon
+        color={theme.iconColor?.groupSettings}
+        width="24"
+        height="24"
+      />
       {selectedIndex?.length && selectedIndex[0] === row && (
         <DropdownContainer ref={dropdownRef} theme={theme}>
           <Dropdown
@@ -85,19 +95,18 @@ const CriteriaSection = ({ criteria }: { criteria: ConditionData }) => {
     return false;
   };
 
-  const getGuildRole  = () =>{
-    if(!criteria?.data?.['comparison'])
-    {
+  const getGuildRole = () => {
+    if (!criteria?.data?.['comparison']) {
       return 'SPECIFIC';
     }
-    return (GUILD_COMPARISON_OPTIONS.find(option => option.value === criteria?.data?.['comparison']))?.heading;
-
-  }
-
-  const [tokenSymbol,] = useTokenSymbolLoader(criteria)
+    return GUILD_COMPARISON_OPTIONS.find(
+      (option) => option.value === criteria?.data?.['comparison']
+    )?.heading;
+  };
 
+  const [tokenSymbol] = useTokenSymbolLoader(criteria);
   return (
-    <Section gap="8px">
+    <Section gap="8px" width="100%">
       <Span
         alignSelf="center"
         background={theme.backgroundColor?.criteriaLabelBackground}
@@ -109,13 +118,27 @@ const CriteriaSection = ({ criteria }: { criteria: ConditionData }) => {
         {CRITERIA_TYPE[criteria.category as CriteriaType]}
       </Span>
       {checkIfNftToken() && (
-        <Span fontWeight="700" color={theme.textColor?.modalHeadingText}>
-          <Span fontWeight="500" color={theme.textColor?.modalSubHeadingText}>
-            {getTokenNftComparisionLabel()}{' '}
+        <Section
+          width="100%"
+          justifyContent="space-between"
+          alignItems="center"
+        >
+          <Span fontWeight="700" color={theme.textColor?.modalHeadingText}>
+            <Span fontWeight="500" color={theme.textColor?.modalSubHeadingText}>
+              {getTokenNftComparisionLabel()}{' '}
+            </Span>
+            {criteria?.data?.['amount']} {tokenSymbol}
           </Span>
-          {/* need to fetch token symbol */}
-          {criteria?.data?.['amount']} {tokenSymbol}
-        </Span>
+          <ChainIconSVG padding="0 6px 0 0" >
+            {
+              NETWORK_ICON_DETAILS[
+                criteria?.data?.['contract'].split(
+                  ':'
+                )[1] as keyof typeof NETWORK_ICON_DETAILS
+              ].icon
+            }
+          </ChainIconSVG>
+        </Section>
       )}
       {criteria.category === CATEGORY.INVITE && (
         <Span fontWeight="500" color={theme.textColor?.modalSubHeadingText}>
@@ -128,17 +151,17 @@ const CriteriaSection = ({ criteria }: { criteria: ConditionData }) => {
           fontSize="14px"
           color={theme.textColor?.modalSubHeadingText}
         >
-          {shortenText(criteria.data?.['url'],30)}
+          {shortenText(criteria.data?.['url'], 30)}
         </Span>
       )}
-         {criteria.category === CATEGORY.ROLES && (
-        <Span fontWeight="700" color={theme.textColor?.modalHeadingText}> 
-        {criteria?.data?.['id']} {' '}
-        <Span fontWeight="500" color={theme.textColor?.modalSubHeadingText}>
-         with {' '}
+      {criteria.category === CATEGORY.ROLES && (
+        <Span fontWeight="700" color={theme.textColor?.modalHeadingText}>
+          {criteria?.data?.['id']}{' '}
+          <Span fontWeight="500" color={theme.textColor?.modalSubHeadingText}>
+            with{' '}
+          </Span>
+          {getGuildRole()} role
         </Span>
-        {getGuildRole()} role
-      </Span>
       )}
     </Section>
   );
@@ -198,7 +221,7 @@ const ConditionsComponent = ({
     <Section flexDirection="column" width="100%" height="100%">
       {conditionData &&
         conditionData.slice(1).map((criteria, row) => (
-          <Section flexDirection="column"  >
+          <Section flexDirection="column">
             {criteria.length <= 2 &&
               criteria.length >= 1 &&
               criteria.map((singleCriteria, col) => (
@@ -259,8 +282,7 @@ const ConditionsComponent = ({
                     </>
                   ))}
                 </Section>
-                <Section 
-                >
+                <Section>
                   {criteria.map((singleCriteria) => (
                     <>
                       {criteria.length > 2 &&
@@ -326,3 +348,15 @@ const OperatorSpan = styled(Span)<{ theme: IChatTheme }>`
 const CriteriaGroup = styled(Section)<{ theme: IChatTheme }>`
   border: ${(props) => props.theme.border?.modalInnerComponents};
 `;
+
+const ChainIconSVG = styled(Section)`
+  width: 20px;
+  height: 20px;
+
+  svg,
+  svg image,
+  img {
+    width: 100%;
+    height: 100%;
+  }
+`;
diff --git a/packages/uiweb/src/lib/components/chat/constants/chainDetails.tsx b/packages/uiweb/src/lib/components/chat/constants/chainDetails.tsx
@@ -0,0 +1,70 @@
+
+import Tooltip from "../../tooltip";
+
+import { EthereumSvg } from '../../../icons/EthereumSvg';
+import { PolygonSvg } from "../../../icons/PolygonSvg";
+import { BSCSvg } from "../../../icons/BSCSvg";
+import { OptimismSvg } from "../../../icons/OptimismSvg";
+import { PolygonzkevmSvg } from "../../../icons/PolygonzkevmSvg";
+import { ArbitrumSvg } from "../../../icons/ArbitrumSvg"
+import React from "react";
+
+const createSVGIcon = (element:any, chainName: string) => {
+  return (
+    <Tooltip tooltipContent={`${chainName}`}>
+      {element}
+    </Tooltip>
+  );
+};
+
+export const NETWORK_ICON_DETAILS =  {
+  5: {
+    label: 'ETHEREUM GOERLI',
+    icon: createSVGIcon(<EthereumSvg/>, 'Ethereum Goerli'),
+  },
+  1: {
+    label: 'ETHEREUM MAINNET',
+    icon: createSVGIcon(<EthereumSvg/>, 'Ethereum Mainnet'),
+  },
+  80001: {
+    label: 'POLYGON MUMBAI',
+    icon: createSVGIcon(<PolygonSvg/>, 'Polygon Mumbai'),
+  },
+  137: {
+    label: 'POLYGON MAINNET',
+    icon: createSVGIcon(<PolygonSvg/>, 'Polygon Mainnet'),
+  },
+  97: {
+    label: 'BSC TESTNET',
+    icon: createSVGIcon(<BSCSvg/>, 'Bsc Testnet'),
+  },
+  56: {
+    label: 'BSC MAINNET',
+    icon: createSVGIcon(<BSCSvg/>, 'Bsc Mainnet'),
+  },
+  420: {
+    label: 'OPTIMISM TESTNET',
+    icon: createSVGIcon(<OptimismSvg/>, 'Optimism Testnet'),
+  },
+  10: {
+    label: 'OPTIMISM MAINNET',
+    icon: createSVGIcon(<OptimismSvg/>, 'Optimism Mainnet'),
+  },
+  1442: {
+    label: 'POLYGON ZK EVM TESTNET',
+    icon: createSVGIcon(<PolygonzkevmSvg/>, 'Polygon ZK EVM Testnet'),
+  },
+  1101: {
+    label: 'POLYGON ZK EVM MAINNET',
+    icon: createSVGIcon(<PolygonzkevmSvg/>, 'Polygon ZK EVM Mainnet'),
+  },
+
+  42161: {
+    label: 'ARBITRUMONE MAINNET',
+    icon: createSVGIcon(<ArbitrumSvg/>, 'Arbitrum Mainnet'),
+  },
+  421613: {
+    label: 'ARBITRUM TESTNET',
+    icon: createSVGIcon(<ArbitrumSvg/>, 'Arbitrum Testnet'),
+  },
+};
diff --git a/packages/uiweb/src/lib/components/chat/constants/index.ts b/packages/uiweb/src/lib/components/chat/constants/index.ts
@@ -53,4 +53,6 @@ export const ACCESS_TYPE_TITLE = {
     heading: 'Conditions to Chat',
     subHeading: 'Add a condition to join or leave it open for everyone',
   },
-};
+};
+
+export * from './chainDetails';
diff --git a/packages/uiweb/src/lib/config/constants.ts b/packages/uiweb/src/lib/config/constants.ts
@@ -42,19 +42,23 @@ export const CoreContractChainId = {
   local: 5,
 };
 
+
+
 const TESTNET_NETWORK = {
   ETHEREUM: 'eip155:5',
   POLYGON: 'eip155:80001',
   BSC: 'eip155:97',
   OPTIMISM: 'eip155:420',
   POLYGON_ZK_EVM: 'eip155:1442',
+  ARBITRUM:'eip155:421613'
 };
 const MAINET_NETWORK = {
   ETHEREUM: 'eip155:1',
   POLYGON: 'eip155:137',
   BSC: 'eip155:56',
   OPTIMISM: 'eip155:10',
   POLYGON_ZK_EVM: 'eip155:1101',
+  ARBITRUM:'eip155:42161'
 };
 
 export const BLOCKCHAIN_NETWORK = {

diff --git a/packages/uiweb/src/lib/icons/arbitrum.svg b/packages/uiweb/src/lib/icons/arbitrum.svg