add filter for Yul contracts and display proper contract language

types/api/contract.ts

@@ -37,6 +37,7 @@ export interface SmartContract {
   };
   verified_twin_address_hash: string | null;
   minimal_proxy_address_hash: string | null;
+  language: string | null;
 }
 
 export type SmartContractDecodedConstructorArg = [

types/api/contracts.ts

@@ -22,7 +22,7 @@ export interface VerifiedContractsResponse {
 
 export interface VerifiedContractsFilters {
   q: string | undefined;
-  filter: 'vyper' | 'solidity' | undefined;
+  filter: 'vyper' | 'solidity' | 'yul' | undefined;
 }
 
 export type VerifiedContractsCounters = {

ui/address/contract/ContractSourceCode.tsx

@@ -74,7 +74,7 @@ const ContractSourceCode = ({ address, implementationAddress }: Props) => {
   const heading = (
     <Skeleton isLoaded={ !isLoading } fontWeight={ 500 }>
       <span>Contract source code</span>
-      <Text whiteSpace="pre" as="span" variant="secondary"> ({ activeContract?.is_vyper_contract ? 'Vyper' : 'Solidity' })</Text>
+      <Text whiteSpace="pre" as="span" variant="secondary" textTransform="capitalize"> ({ activeContract?.language })</Text>
     </Skeleton>
   );
 

ui/pages/VerifiedContracts.tsx

@@ -61,14 +61,10 @@ const VerifiedContracts = () => {
       return;
     }
 
-    if ((value === 'vyper' || value === 'solidity')) {
-      onFilterChange({ q: debouncedSearchTerm, filter: value });
-      setType(value);
-      return;
-    }
+    const filter = value === 'all' ? undefined : value as VerifiedContractsFilters['filter'];
 
-    onFilterChange({ q: debouncedSearchTerm, filter: undefined });
-    setType(undefined);
+    onFilterChange({ q: debouncedSearchTerm, filter });
+    setType(filter);
   }, [ debouncedSearchTerm, onFilterChange ]);
 
   const handleSortToggle = React.useCallback((field: SortField) => {

ui/verifiedContracts/VerifiedContractsFilter.tsx

@@ -35,6 +35,7 @@ const VerifiedContractsFilter = ({ onChange, defaultValue, isActive }: Props) =>
           <MenuItemOption value="all">All</MenuItemOption>
           <MenuItemOption value="solidity">Solidity</MenuItemOption>
           <MenuItemOption value="vyper">Vyper</MenuItemOption>
+          <MenuItemOption value="yul">Yul</MenuItemOption>
         </MenuOptionGroup>
       </MenuList>
     </Menu>