نحوه اتصال کیف پول به dApp با Next.js در Polkadot

export default function Home() {
  return (
    <>
      <h2>Hey Polki, Welcome to Polkadot </h2>
      <button>Connect wallet</button>
    </>
  )
}

import { useState } from 'react';
import dynamic from 'next/dynamic'

const web3Accounts = dynamic(() => import('@polkadot/extension-dapp'), { ssr: false });
const web3Enable = dynamic(() => import('@polkadot/extension-dapp'), { ssr: false });

import { InjectedAccountWithMeta } from '@polkadot/extension-inject/types'; 

...

const [account, setAccount] = useState<InjectedAccountWithMeta[]>([]);
const [selectedAccount, setSelectedAccount] = useState<InjectedAccountWithMeta>();

import { useState } from 'react';
import { InjectedAccountWithMeta } from '@polkadot/extension-inject/types';
import dynamic from 'next/dynamic'

const web3Accounts = dynamic(() => import('@polkadot/extension-dapp'), { ssr: false });
const web3Enable = dynamic(() => import('@polkadot/extension-dapp'), { ssr: false });



export default function Home() {
  const [account, setAccount] = useState<InjectedAccountWithMeta[]>([]);
  const [selectedAccount, setSelectedAccount] = useState<InjectedAccountWithMeta>();
  return (
    <>
      <h2>Hey Polki, Welcome to Polkadot </h2>
      <button>Connect wallet</button>
    </>
  )
}

async function connectWallet(){
    const { web3Enable,web3Accounts } = await import("@polkadot/extension-dapp");
    const extensions = web3Enable("Polki");

    if(!extensions) {
      throw Error("No Extension Found");
    }

    const allAccounts = await web3Accounts();

    console.log(allAccounts);

    if(allAccounts.length === 1){
      setSelectedAccount(allAccounts[0]);
    }
  }

      {
        account.length === 0 ? <button onClick={connectWallet}>Connect Wallet</button> : null
      }

      {
        selectedAccount ? selectedAccount.address : null
      }

import { useState } from 'react';
import { InjectedAccountWithMeta } from '@polkadot/extension-inject/types';
import dynamic from 'next/dynamic'

const web3Accounts = dynamic(() => import('@polkadot/extension-dapp'), { ssr: false });
const web3Enable = dynamic(() => import('@polkadot/extension-dapp'), { ssr: false });



export default function Home() {
  const [account, setAccount] = useState<InjectedAccountWithMeta[]>([]);
  const [selectedAccount, setSelectedAccount] = useState<InjectedAccountWithMeta>();

  async function connectWallet(){
    const { web3Enable,web3Accounts } = await import("@polkadot/extension-dapp");
    const extensions = web3Enable("Polki");

    if(!extensions) {
      throw Error("No Extension Found");
    }

    const allAccounts = await web3Accounts();

    console.log(allAccounts);

    if(allAccounts.length === 1){
      setSelectedAccount(allAccounts[0]);
    }
  }
  return (
    <>
      <h2>Hey Polki, Welcome to Polkadot </h2>
      {
        account.length === 0 ? <button onClick={connectWallet}>Connect Wallet</button> : null
      }

      {
        selectedAccount ? selectedAccount.address : null
      }
    </>
  )
}