fixing warnings

apps/remix-ide/src/app/plugins/remixGuide.tsx

@@ -123,7 +123,7 @@ export class RemixGuidePlugin extends ViewPlugin {
                   expandViewEl={
                     cell.expandViewElement
                   }
-                  id={cell.title}
+                  key={cell.title}
                   handleExpand={() => {
                     this.showVideo = true
                     this.videoID = cell.expandViewElement.videoID

apps/remix-ide/src/app/plugins/templates-selection/templates-selection-plugin.tsx

@@ -154,6 +154,7 @@ export class TemplatesSelectionPlugin extends ViewPlugin {
           templates(window._intl).map(template => {
             return <RemixUIGridSection
               plugin={this}
+              key={template.name}
               title={template.name}
               hScrollable={false}
             >
@@ -161,7 +162,7 @@ export class TemplatesSelectionPlugin extends ViewPlugin {
                 return <RemixUIGridCell
                   plugin={this}
                   title={item.displayName}
-                  id={item.name}
+                  key={item.name}
                   searchKeywords={[item.displayName, item.description, template.name]}
                   tagList={item.tagList}
                   classList='TSCellStyle'

apps/remix-ide/src/app/providers/environment-explorer.tsx

@@ -110,7 +110,7 @@ export class EnvironmentExplorer extends ViewPlugin {
               classList='EECellStyle'
               searchKeywords={['Injected', provider.name, provider.displayName, provider.title, provider.description]}
               pinned={this.pinnedProviders.includes(provider.name)}
-              id={provider.name}
+              key={provider.name}
               pinStateCallback={async (pinned: boolean) => {
                 if (pinned) {
                   this.emit('providerPinned', provider.name, provider)
@@ -144,7 +144,7 @@ export class EnvironmentExplorer extends ViewPlugin {
               classList='EECellStyle'
               searchKeywords={['Remix VMs', provider.name, provider.displayName, provider.title, provider.description]}
               pinned={this.pinnedProviders.includes(provider.name)}
-              id={provider.name}
+              key={provider.name}
               pinStateCallback={async (pinned: boolean) => {
                 if (pinned) {
                   this.emit('providerPinned', provider.name, provider)
@@ -177,7 +177,7 @@ export class EnvironmentExplorer extends ViewPlugin {
               classList='EECellStyle'
               searchKeywords={['Externals', provider.name, provider.displayName, provider.title, provider.description]}
               pinned={this.pinnedProviders.includes(provider.name)}
-              id={provider.name}
+              key={provider.name}
               pinStateCallback={async (pinned: boolean) => {
                 if (pinned) {
                   this.emit('providerPinned', provider.name, provider)

libs/remix-ui/grid-view/src/lib/remix-ui-grid-cell.tsx

@@ -25,7 +25,6 @@ interface RemixUIGridCellProps {
   children?: ReactNode
   expandViewEl?: any
   handleExpand?: any
-  id: string
   searchKeywords?: string[]
 }
 
@@ -76,7 +75,7 @@ export const RemixUIGridCell = (props: RemixUIGridCellProps) => {
         <div className='d-flex flex-grid'>
           <div className={ `${pinned ? "" : "border-dark "}` + "d-flex mx-0 p-2 bg-light border border-secondary remixui_grid_cell_container " + props.classList || ''} data-id={"remixUIGS" + props.title}>
             <div className="d-flex remixui_grid_cell w-100 flex-column">
-              { !props.hideTitle && <div className='d-flex flex-row pb-1 align-items-end' style={{ minWidth: '8rem', height: '1rem' }}>
+              { !props.hideTitle && <div className='d-flex flex-row pb-1 mb-1 align-items-end' style={{ minWidth: '8rem', height: '1rem' }}>
                 { props.logo && <img className='remixui_grid_view_logo mr-1' src={props.logo} style={{ width: '1rem', height: '1rem' }}/> }
                 { props.logos && props.logos.map((logo) => <img className='remixui_grid_view_logo mr-1' src={logo} style={{ width: '1rem', height: '1rem' }}/>)}
                 { props.title &&
@@ -98,7 +97,7 @@ export const RemixUIGridCell = (props: RemixUIGridCellProps) => {
           { filterCon.showPin && <button
             className={`${pinned ? 'fa-circle-check text-dark' : 'fa-circle text-secondary'}` + ` fa-regular border-0 mb-0 remixui_grid_cell_pin`}
             style={{ fontSize: 'large' }}
-            data-id={`${pinned ? `${props.id}-pinned` : `${props.id}-unpinned`}`}
+            data-id={`${pinned ? `${props.title}-pinned` : `${props.title}-unpinned`}`}
             onClick={async () => {
               if (!props.pinStateCallback) setPinned(!pinned)
               if (await props.pinStateCallback(!pinned)) setPinned(!pinned)