Chore/polygon connect footer branding

packages/connect/src/components/Connect/Connect.tsx

@@ -50,7 +50,7 @@ import {
   XWaasConnectButton
 } from '../ConnectButton/index.js'
 import type { SequenceConnectProviderProps } from '../SequenceConnectProvider/index.js'
-import { PoweredBySequence } from '../SequenceLogo/index.js'
+import { PoweredByPolygon } from '../PolygonBrand/index.js'
 
 import { Banner } from './Banner.js'
 import { ConnectedWallets } from './ConnectedWallets.js'
@@ -901,7 +901,7 @@ export const Connect = (props: ConnectProps) => {
           </Button>
         </div>
         <div className="mt-6">
-          <PoweredBySequence />
+          <PoweredByPolygon />
         </div>
       </div>
     )
@@ -1120,7 +1120,7 @@ export const Connect = (props: ConnectProps) => {
                   <WalletConnectorsSection />
                 )}
                 <div className="mt-6">
-                  <PoweredBySequence />
+                  <PoweredByPolygon />
                 </div>
               </>
             )}

packages/connect/src/components/PolygonBrand/PolygonLogo.tsx

@@ -0,0 +1,14 @@
+export const PolygonLogo = () => {
+  return (
+    <svg width="100%" viewBox="0 0 60 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g fill="#808080" transform="translate(-62 -2.152)">
+        <path d="M71.338 2.152 67.683 4.25v6.548l-2.017 1.169-2.03-1.17V8.46l2.03-1.158 1.305.756V6.166l-1.317-.746L62 7.54v4.197l3.667 2.11 3.654-2.11V5.191l2.03-1.169 2.027 1.17v2.327l-2.028 1.18-1.316-.763v1.881l1.304.752 3.69-2.098v-4.22z" />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M92.805 11.215h1.639V2.239h-1.639zm-10.533-6.38q1.165 0 1.93.934t.764 2.317-.765 2.317q-.765.933-1.93.934-.825 0-1.431-.51-.595-.52-.874-1.407v4.22h-1.639V4.957h1.639v1.795q.28-.886.874-1.395a2.13 2.13 0 0 1 1.432-.521m-.596 5.01a1.48 1.48 0 0 0 1.129-.498q.46-.509.46-1.261c0-.501-.153-.906-.46-1.238a1.47 1.47 0 0 0-1.129-.51q-.74 0-1.226.498-.485.498-.485 1.249t.485 1.261q.485.498 1.226.498m3.725-1.759q0 1.383.958 2.317.96.933 2.392.934 1.432 0 2.391-.934t.959-2.317-.959-2.317-2.391-.934-2.392.934-.958 2.317m2.172 1.261q-.474-.509-.473-1.261c0-.501.157-.906.473-1.238q.474-.51 1.178-.51.705 0 1.177.498.474.498.474 1.249t-.474 1.261a1.56 1.56 0 0 1-1.177.498 1.56 1.56 0 0 1-1.178-.498zm22.008 1.056q-.959-.934-.959-2.317t.959-2.317q.958-.934 2.391-.934 1.432 0 2.391.934t.959 2.317-.959 2.317q-.959.933-2.391.934-1.432 0-2.391-.934m.739-2.317q0 .752.473 1.261.474.498 1.178.498t1.178-.498q.473-.509.473-1.261t-.473-1.249a1.56 1.56 0 0 0-1.178-.497q-.704 0-1.178.51-.473.496-.473 1.237zm9.363-3.251q1.044 0 1.674.728.643.727.643 1.855v3.796h-1.639V7.709q.001-.607-.388-.995a1.32 1.32 0 0 0-.971-.389q-.656 0-1.068.389-.412.388-.412.995v3.505h-1.639V4.956h1.639v1.601q.243-.8.813-1.26.583-.461 1.348-.461zM98.38 9.546l1.674-4.584h1.663l-3.446 8.685h-1.663l.874-2.208-2.561-6.477h1.772zm7.997-4.59v1.568c-.342-1.023-1.185-1.568-2.306-1.568-1.694 0-2.695 1.478-2.695 3.032s.994 3.154 2.695 3.154c1.121 0 1.964-.808 2.306-1.832v1.2q0 .765-.498 1.262a1.65 1.65 0 0 1-1.214.498q-.97 0-1.444-.97l-1.469.775q.413.764 1.178 1.226.766.46 1.735.46 1.432.001 2.392-.934.958-.934.958-2.317V4.956zm-.473 4.222q-.475.472-1.189.472c-.477 0-.85-.157-1.166-.472a1.63 1.63 0 0 1-.473-1.189q0-.703.473-1.177a1.59 1.59 0 0 1 1.166-.472c.461 0 .874.157 1.189.472q.473.461.473 1.177 0 .717-.473 1.189"
+        />
+      </g>
+    </svg>
+  )
+}

packages/connect/src/components/PolygonBrand/PoweredByPolygon.tsx

@@ -0,0 +1,23 @@
+import { Text } from '@0xsequence/design-system'
+
+import { PolygonLogo } from './PolygonLogo.js'
+
+export const PoweredByPolygon = () => {
+  return (
+    <div
+      className="powered-by-polygon-footer flex relative gap-1 flex-row items-center justify-center select-none cursor-pointer"
+      onClick={() => {
+        if (typeof window !== 'undefined') {
+          window.open('https://polygon.technology')
+        }
+      }}
+    >
+      <Text variant="xsmall" color="muted" fontWeight="bold">
+        Powered by
+      </Text>
+      <div className="h-auto flex-none" style={{ width: 56, marginTop: 2 }}>
+        <PolygonLogo />
+      </div>
+    </div>
+  )
+}

packages/connect/src/components/PolygonBrand/index.ts

@@ -0,0 +1,2 @@
+export { PoweredByPolygon } from './PoweredByPolygon.js'
+export { PolygonLogo } from './PolygonLogo.js'

packages/connect/src/components/SequenceConnectInlineProvider/SequenceConnectInlineProvider.tsx

@@ -38,7 +38,7 @@ import { EpicAuthProvider } from '../EpicAuthProvider/index.js'
 import { JsonTreeViewer } from '../JsonTreeViewer.js'
 import { NetworkBadge } from '../NetworkBadge/index.js'
 import { PageHeading } from '../PageHeading/index.js'
-import { PoweredBySequence } from '../SequenceLogo/index.js'
+import { PoweredByPolygon } from '../PolygonBrand/index.js'
 import { ShadowRoot } from '../ShadowRoot/index.js'
 import { SocialLink } from '../SocialLink/SocialLink.js'
 import { TxnDetails } from '../TxnDetails/index.js'
@@ -379,7 +379,7 @@ export const SequenceConnectInlineProvider = (props: SequenceConnectInlineProvid
                                 </div>
 
                                 <div className="mt-4">
-                                  <PoweredBySequence />
+                                  <PoweredByPolygon />
                                 </div>
                               </div>
                             </Modal>

packages/connect/src/components/SequenceConnectProvider/SequenceConnectProvider.tsx

@@ -36,7 +36,7 @@ import { EpicAuthProvider } from '../EpicAuthProvider/index.js'
 import { JsonTreeViewer } from '../JsonTreeViewer.js'
 import { NetworkBadge } from '../NetworkBadge/index.js'
 import { PageHeading } from '../PageHeading/index.js'
-import { PoweredBySequence } from '../SequenceLogo/index.js'
+import { PoweredByPolygon } from '../PolygonBrand/index.js'
 import { ShadowRoot } from '../ShadowRoot/index.js'
 import { SocialLink } from '../SocialLink/SocialLink.js'
 import { TxnDetails } from '../TxnDetails/index.js'
@@ -375,7 +375,7 @@ export const SequenceConnectProvider = (props: SequenceConnectProviderProps) =>
                                 </div>
 
                                 <div className="mt-4">
-                                  <PoweredBySequence />
+                                  <PoweredByPolygon />
                                 </div>
                               </div>
                             </Modal>

packages/connect/src/styles.ts

@@ -819,9 +819,6 @@ export const styles = String.raw`
   .w-\[56px\] {
     width: 56px;
   }
-  .w-\[80px\] {
-    width: 80px;
-  }
   .w-\[100px\] {
     width: 100px;
   }
@@ -897,6 +894,9 @@ export const styles = String.raw`
   .flex-1 {
     flex: 1;
   }
+  .flex-none {
+    flex: none;
+  }
   .flex-shrink {
     flex-shrink: 1;
   }