fix: Flex to Space

ant-design · Dec 6, 2024 · 03176e2 · 03176e2
1 parent 50511eb
commit 03176e2
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 35 deletions.
diff --git a/docs/guide/demos/best-practice/components/pay-button.tsx b/docs/guide/demos/best-practice/components/pay-button.tsx
@@ -2,7 +2,7 @@
 import React from 'react';
 import { ConnectButton, Connector } from '@ant-design/web3';
 import { MetaMask, WagmiWeb3ConfigProvider } from '@ant-design/web3-wagmi';
-import { Button, Flex } from 'antd';
+import { Button, Space } from 'antd';
 import { createConfig, http } from 'wagmi';
 import { arbitrum, mainnet, optimism, polygon } from 'wagmi/chains';
 import { injected } from 'wagmi/connectors';
@@ -17,28 +17,28 @@ type PayButtonsProps = {
   onRejectSwitchChain?: (id: number) => void;
 };
 
-const config = createConfig({
-  chains: [mainnet, polygon, arbitrum, optimism],
-  transports: {
-    [mainnet.id]: http(),
-    [polygon.id]: http(),
-    [arbitrum.id]: http(),
-    [optimism.id]: http(),
-  },
-  connectors: [
-    injected({
-      target: 'metaMask',
-    }),
-  ],
-});
-
 export const EvmPayButtons: React.FC<PayButtonsProps> = ({
   setTokenEcosystem,
   tokenEcosystem,
   signCallback,
   payCallback,
   onRejectSwitchChain,
 }) => {
+  const config = createConfig({
+    chains: [mainnet, polygon, arbitrum, optimism],
+    transports: {
+      [mainnet.id]: http(),
+      [polygon.id]: http(),
+      [arbitrum.id]: http(),
+      [optimism.id]: http(),
+    },
+    connectors: [
+      injected({
+        target: 'metaMask',
+      }),
+    ],
+  });
+
   return (
     <div>
       <WagmiWeb3ConfigProvider
@@ -49,7 +49,21 @@ export const EvmPayButtons: React.FC<PayButtonsProps> = ({
         wallets={[MetaMask()]}
         chains={[mainnet, polygon, arbitrum, optimism]}
       >
-        <Flex justify="space-between" style={{ width: 400, marginTop: 20 }}>
+        <Space size="middle">
+          <Connector
+            modalProps={{
+              footer: (
+                <>
+                  Powered by{' '}
+                  <a href="https://web3.ant.design/" target="_blank" rel="noreferrer">
+                    Ant Design Web3
+                  </a>
+                </>
+              ),
+            }}
+          >
+            <ConnectButton chainSelect={false} />
+          </Connector>
           <Connector
             modalProps={{
               footer: (
@@ -64,7 +78,7 @@ export const EvmPayButtons: React.FC<PayButtonsProps> = ({
           >
             <ConnectButton chainSelect={false} />
           </Connector>
-          <EvmSignTransaction
+          {/* <EvmSignTransaction
             setTokenEcosystem={setTokenEcosystem}
             tokenEcosystem={tokenEcosystem}
             signTransaction={(signTransfer, address) => {
@@ -84,8 +98,8 @@ export const EvmPayButtons: React.FC<PayButtonsProps> = ({
                 Pay
               </Button>
             )}
-          />
-        </Flex>
+          /> */}
+        </Space>
       </WagmiWeb3ConfigProvider>
     </div>
   );

diff --git a/docs/guide/demos/best-practice/components/select.tsx b/docs/guide/demos/best-practice/components/select.tsx
@@ -13,7 +13,7 @@ const ChainSelect: React.FC<ChainSelectGroupProps> = (props) => {
   const chainList = TOKEN_PAY_ADDRESS.chains;
 
   return (
-    <Space size={16}>
+    <Space size="middle">
       <Radio.Group
         onChange={(e) => {
           props.onChange(e.target.value);

diff --git a/docs/guide/demos/best-practice/usdt.tsx b/docs/guide/demos/best-practice/usdt.tsx
@@ -23,20 +23,22 @@ const PaymentInUSDT: React.FC = () => {
 
   return (
     <Card title="Payment in USDT">
-      <Title level={3}>Select Chain</Title>
-      <ChainSelect ecosystem={tokenEcosystem} onChange={setTokenEcosystem} />
-      <EvmPayButtons
-        setTokenEcosystem={setTokenEcosystem}
-        tokenEcosystem={tokenEcosystem}
-        signCallback={onSubmitCashier}
-        payCallback={runPay}
-        onRejectSwitchChain={(id) => {
-          const oldTokenEcosystem = TOKEN_PAY_ADDRESS.chains.find(
-            (item) => item.id === id,
-          )?.ecosystem;
-          setTokenEcosystem(oldTokenEcosystem || '');
-        }}
-      />
+      <Space direction="vertical" size="middle">
+        <Title level={3}>Select Chain</Title>
+        <ChainSelect ecosystem={tokenEcosystem} onChange={setTokenEcosystem} />
+        <EvmPayButtons
+          setTokenEcosystem={setTokenEcosystem}
+          tokenEcosystem={tokenEcosystem}
+          signCallback={onSubmitCashier}
+          payCallback={runPay}
+          onRejectSwitchChain={(id) => {
+            const oldTokenEcosystem = TOKEN_PAY_ADDRESS.chains.find(
+              (item) => item.id === id,
+            )?.ecosystem;
+            setTokenEcosystem(oldTokenEcosystem || '');
+          }}
+        />
+      </Space>
     </Card>
   );
 };