[TOOL-4373] Dashboard: replace /team/~/~ with /team/<team-slug>/~ wherever possible (#6946)

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on enhancing the billing components in the dashboard by adding `teamSlug` as a prop to various components, allowing for better integration of team-specific billing information.

### Detailed summary
- Added `teamSlug` prop to `<CreditsInfoCard />` in `Billing/index.tsx`.
- Updated `<SmartWalletsBillingAlert />` to receive `teamSlug` in `AccountAbstractionPage.tsx`.
- Modified `CreditsInfoCard` to use `teamSlug` prop.
- Enhanced `SmartWalletsBillingAlert` to accept `teamSlug` as a prop.
- Passed `teamSlug` to the `href` in `SmartWalletsBillingAlert`.
- Included `teamSlug` in `CreditsItem` component.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: MananTank

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/connect/account-abstraction/AccountAbstractionPage.tsx

@@ -47,7 +47,9 @@ export function AccountAbstractionLayout(props: {
               </TrackedUnderlineLink>
             </p>
           </div>
-          {props.hasSmartWalletsWithoutBilling && <SmartWalletsBillingAlert />}
+          {props.hasSmartWalletsWithoutBilling && (
+            <SmartWalletsBillingAlert teamSlug={props.teamSlug} />
+          )}
           <GasCreditAlert
             teamSlug={props.teamSlug}
             projectId={props.projectId}

apps/dashboard/src/components/settings/Account/Billing/CreditsItem.tsx

@@ -17,6 +17,7 @@ interface CreditsItemProps {
   onClickApply?: () => void;
   twAccount: Account;
   client: ThirdwebClient;
+  teamSlug: string;
 }
 
 export const CreditsItem: React.FC<CreditsItemProps> = ({
@@ -25,6 +26,7 @@ export const CreditsItem: React.FC<CreditsItemProps> = ({
   onClickApply,
   twAccount,
   client,
+  teamSlug,
 }) => {
   const trackEvent = useTrack();
 
@@ -130,7 +132,7 @@ export const CreditsItem: React.FC<CreditsItemProps> = ({
         <div className="mt-2 flex justify-end border-t px-4 py-4 lg:px-6">
           <Button asChild size="sm" variant="outline">
             <Link
-              href="/team/~/~/settings/credits"
+              href={`/team/${teamSlug}/~/settings/credits`}
               onClick={() => {
                 trackEvent({
                   category: "op-sponsorship",

apps/dashboard/src/components/settings/Account/Billing/PlanCard.tsx

@@ -12,6 +12,7 @@ import { CreditsItem } from "./CreditsItem";
 export const CreditsInfoCard = (props: {
   twAccount: Account;
   client: ThirdwebClient;
+  teamSlug: string;
 }) => {
   const { data: credits } = useAccountCredits();
 
@@ -29,13 +30,15 @@ export const CreditsInfoCard = (props: {
         isOpCreditDefault={true}
         twAccount={props.twAccount}
         client={props.client}
+        teamSlug={props.teamSlug}
       />
       {restCredits?.map((credit) => (
         <CreditsItem
           key={credit.couponId}
           credit={credit}
           twAccount={props.twAccount}
           client={props.client}
+          teamSlug={props.teamSlug}
         />
       ))}
     </section>

apps/dashboard/src/components/settings/Account/Billing/index.tsx

@@ -30,7 +30,11 @@ export const Billing: React.FC<BillingProps> = ({
         <PlanInfoCardClient team={team} subscriptions={subscriptions} />
       </div>
 
-      <CreditsInfoCard twAccount={twAccount} client={client} />
+      <CreditsInfoCard
+        twAccount={twAccount}
+        client={client}
+        teamSlug={team.slug}
+      />
       <Coupons teamId={team.id} isPaymentSetup={validPayment} />
     </div>
   );

apps/dashboard/src/components/settings/ApiKeys/Alerts.tsx

@@ -2,15 +2,17 @@ import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { TrackedUnderlineLink } from "@/components/ui/tracked-link";
 import { CircleAlertIcon } from "lucide-react";
 
-export const SmartWalletsBillingAlert = () => {
+export const SmartWalletsBillingAlert = (props: {
+  teamSlug: string;
+}) => {
   return (
     <Alert variant="warning">
       <CircleAlertIcon className="size-5" />
       <AlertTitle>Account Abstraction on Mainnet</AlertTitle>
       <AlertDescription>
         To enable AA on mainnet chains,{" "}
         <TrackedUnderlineLink
-          href="/team/~/~/settings/billing"
+          href={`/team/${props.teamSlug}/~/settings/billing`}
           category="api_keys"
           label="smart_wallets_missing_billing"
         >