feat: activate okcoin fiat onramp integration

closes #2105
2026-04-28 20:55:30 +08:00 · 2022-01-20 14:01:26 +01:00
parent 61d4851907
commit 881e88de1f
9 changed files with 104 additions and 93 deletions
--- a/config/wallet-config.json
+++ b/config/wallet-config.json
@@ -1,6 +1,6 @@
 {
  "activeFiatProviders": {
    "transak": { "name": "transak", "enabled": true },
-    "okcoin": { "name": "okcoin", "enabled": false }
+    "okcoin": { "name": "okcoin", "enabled": true }
  }
 }
--- a/package.json
+++ b/package.json
@@ -250,6 +250,7 @@
    "hosted-git-info": "4.0.2",
    "immer": "9.0.6",
    "mixme": "0.5.2",
+    "node-fetch": "2.6.7",
    "normalize-url": "4.5.1",
    "trim-newlines": "3.0.1",
    "schema-inspector": "2.0.1",
--- a/src/app/features/fiat-onramp-providers/okcoin-helper.ts
+++ b/src/app/features/fiat-onramp-providers/okcoin-helper.ts
@@ -1,7 +1,5 @@
-const isProduction = process.env.WALLET_ENVIRONMENT === 'production';
-
-const subdomain = isProduction ? 'www' : 'beta';
-
 export function makeOkcoinUrl(address: string) {
-  return `https://${subdomain}.okcoin.org/bridgeBeta/thirdBridge?isThirdBridge=1&partnerId=10002&crypto=STX&address=w${address}&thirdPartyName=Hiro&fiatAmount=100&currency=USD`;
+  const successBackLink = encodeURI(`https://explorer.stacks.co/address/${address}?chain=mainnet`);
+  const thirdPartyLink = encodeURI('https://hiro.so');
+  return `https://www.okcoin.com/bridge/thirdBridge?isThirdBridge=1&partnerId=10002&crypto=STX&address=${address}&thirdPartyName=Hiro&fiatAmount=100&currency=USD&successBackLink=${successBackLink}&thirdPartyLink=${thirdPartyLink}`;
 }
--- a/src/app/pages/buy/buy.layout.tsx
+++ b/src/app/pages/buy/buy.layout.tsx
@@ -1,69 +1,19 @@
-import { Button, Flex, Stack } from '@stacks/ui';
+import { useRouteHeader } from '@app/common/hooks/use-route-header';
+import { Header } from '@app/components/header';
+import { Flex, Stack } from '@stacks/ui';

 import AddFunds from '@assets/images/add-funds.svg';
-import { useRouteHeader } from '@app/common/hooks/use-route-header';
 import { openInNewTab } from '@app/common/utils/open-in-new-tab';
-import { Header } from '@app/components/header';
-import { Caption, Text, Title } from '@app/components/typography';
+import { Text, Title } from '@app/components/typography';
 import { Link } from '@app/components/link';
-import { SpaceBetween } from '@app/components/space-between';
-import { ActiveFiatProviderType } from '@app/query/hiro-config/hiro-config.query';
-
-const providersInfo = {
-  transak: {
-    title: 'Transak',
-    body: 'Non-US residents can purchase STX with credit card, debit card, or bank transfer via Transak.',
-    cta: 'Buy on Transak',
-  },
-  okcoin: {
-    title: 'Okcoin',
-    body: 'US users can purchase STX quickly with USD',
-    cta: 'Buy on Okcoin',
-  },
-};
-
-interface ProvidersUrl {
-  transak: string;
-  okcoin: string;
-}
-
-interface ProviderLayoutProps {
-  provider: string;
-  providerUrl: string;
-}
-
-const ProviderLayout = ({ provider, providerUrl }: ProviderLayoutProps) => {
-  const { title, cta, body } = providersInfo[provider as keyof ProvidersUrl];
-  return (
-    <Stack
-      overflow="hidden"
-      alignItems="flex-start"
-      spacing="base-tight"
-      padding="24px"
-      mt={5}
-      className="buy-box"
-    >
-      <SpaceBetween flexGrow={1}>
-        <Stack spacing="base-tight">
-          <Title marginBottom="10">{title}</Title>
-          <Caption>{body}</Caption>
-        </Stack>
-      </SpaceBetween>
-      <Button width="100%" mt={5} onClick={() => openInNewTab(providerUrl)} borderRadius="10px">
-        {cta}
-      </Button>
-    </Stack>
-  );
-};

 interface BuyLayoutProps {
  onCloseAction: () => void;
-  providersUrl: ProvidersUrl;
-  activeProviders: Record<string, ActiveFiatProviderType>;
+  onrampProviders: JSX.Element;
 }

 export const BuyLayout = (props: BuyLayoutProps) => {
-  const { providersUrl, activeProviders, onCloseAction } = props;
+  const { onCloseAction, onrampProviders } = props;

  useRouteHeader(<Header hideActions title=" " onClose={onCloseAction} />);

@@ -88,13 +38,7 @@ export const BuyLayout = (props: BuyLayoutProps) => {
          Learn more ↗
        </Link>
      </Stack>
-      {Object.keys(activeProviders).map(provider => (
-        <ProviderLayout
-          key={provider}
-          provider={provider}
-          providerUrl={providersUrl[provider as keyof ProvidersUrl]}
-        />
-      ))}
+      {onrampProviders}
    </Flex>
  );
 };
--- a/src/app/pages/buy/buy.tsx
+++ b/src/app/pages/buy/buy.tsx
@@ -1,33 +1,20 @@
 import { useNavigate } from 'react-router-dom';

 import { useCurrentAccount } from '@app/store/accounts/account.hooks';
-import { makeTransakUrl } from '@app/features/fiat-onramp-providers/transak-helper';
-import { makeOkcoinUrl } from '@app/features/fiat-onramp-providers/okcoin-helper';
-import {
-  useActiveFiatProviders,
-  useHasFiatProviders,
-} from '@app/query/hiro-config/hiro-config.query';
 import { RouteUrls } from '@shared/route-urls';

 import { BuyLayout } from './buy.layout';
+import { OnrampProviders } from './components/onramp-provider';

 export const BuyPage = () => {
  const navigate = useNavigate();
  const currentAccount = useCurrentAccount();
-  const activeProviders = useActiveFiatProviders();
-  const hasProviders = useHasFiatProviders();
-  if (!hasProviders || !currentAccount) return null;
-
-  const providersUrl = {
-    transak: makeTransakUrl(currentAccount.address),
-    okcoin: makeOkcoinUrl(currentAccount.address),
-  };
+  if (!currentAccount) return null;

  return (
    <BuyLayout
      onCloseAction={() => navigate(RouteUrls.Home)}
-      providersUrl={providersUrl}
-      activeProviders={activeProviders}
+      onrampProviders={<OnrampProviders address={currentAccount.address} />}
    />
  );
 };
--- a/src/app/pages/buy/components/onramp-provider-layout.tsx
+++ b/src/app/pages/buy/components/onramp-provider-layout.tsx
@@ -0,0 +1,52 @@
+import { Button, Stack } from '@stacks/ui';
+
+import { openInNewTab } from '@app/common/utils/open-in-new-tab';
+import { Caption, Title } from '@app/components/typography';
+import { SpaceBetween } from '@app/components/space-between';
+
+const providersInfo = {
+  transak: {
+    title: 'Transak',
+    body: 'Non-US residents can purchase STX with credit card, debit card, or bank transfer via Transak.',
+    cta: 'Buy on Transak',
+  },
+  okcoin: {
+    title: 'Okcoin',
+    body: 'US users can purchase STX quickly with USD',
+    cta: 'Buy on Okcoin',
+  },
+};
+
+export interface ProvidersUrl {
+  transak: string;
+  okcoin: string;
+}
+
+interface OnrampProviderLayoutProps {
+  provider: string;
+  providerUrl: string;
+}
+
+export const OnrampProviderLayout = ({ provider, providerUrl }: OnrampProviderLayoutProps) => {
+  const { title, cta, body } = providersInfo[provider as keyof ProvidersUrl];
+  return (
+    <Stack
+      overflow="hidden"
+      alignItems="flex-start"
+      spacing="base-tight"
+      padding="24px"
+      mt={5}
+      className="buy-box"
+    >
+      <SpaceBetween flexGrow={1}>
+        <Stack spacing="base-tight">
+          <Title marginBottom="10">{title}</Title>
+          <Caption>{body}</Caption>
+        </Stack>
+      </SpaceBetween>
+      <Button width="100%" mt={5} onClick={() => openInNewTab(providerUrl)} borderRadius="10px">
+        {cta}
+      </Button>
+    </Stack>
+  );
+};
--- a/src/app/pages/buy/components/onramp-provider.tsx
+++ b/src/app/pages/buy/components/onramp-provider.tsx
@@ -0,0 +1,34 @@
+import { makeOkcoinUrl } from '@app/features/fiat-onramp-providers/okcoin-helper';
+import { makeTransakUrl } from '@app/features/fiat-onramp-providers/transak-helper';
+import {
+  useActiveFiatProviders,
+  useHasFiatProviders,
+} from '@app/query/hiro-config/hiro-config.query';
+import { OnrampProviderLayout, ProvidersUrl } from './onramp-provider-layout';
+interface OnrampProvidersProps {
+  address: string;
+}
+
+export const OnrampProviders = (props: OnrampProvidersProps) => {
+  const { address } = props;
+  const activeProviders = useActiveFiatProviders();
+  const hasProviders = useHasFiatProviders();
+  if (!hasProviders) return null;
+
+  const providersUrl = {
+    transak: makeTransakUrl(address),
+    okcoin: makeOkcoinUrl(address),
+  };
+
+  return (
+    <>
+      {Object.keys(activeProviders).map(provider => (
+        <OnrampProviderLayout
+          key={provider}
+          provider={provider}
+          providerUrl={providersUrl[provider as keyof ProvidersUrl]}
+        />
+      ))}
+    </>
+  );
+};
--- a/src/app/query/hiro-config/hiro-config.query.ts
+++ b/src/app/query/hiro-config/hiro-config.query.ts
@@ -10,7 +10,7 @@ export interface HiroMessage {
  learnMoreUrl?: string;
 }

-export interface ActiveFiatProviderType {
+interface ActiveFiatProviderType {
  name: string;
  enabled: boolean;
 }
@@ -20,7 +20,7 @@ interface HiroConfig {
  activeFiatProviders: Record<string, ActiveFiatProviderType>;
 }

-const GITHUB_PRIMARY_BRANCH = 'main';
+const GITHUB_PRIMARY_BRANCH = 'dev';
 const githubWalletConfigRawUrl = `https://raw.githubusercontent.com/${GITHUB_ORG}/${GITHUB_REPO}/${GITHUB_PRIMARY_BRANCH}/config/wallet-config.json`;

 async function fetchHiroMessages(): Promise<HiroConfig> {
--- a/yarn.lock
+++ b/yarn.lock
@@ -12666,12 +12666,7 @@ no-case@^3.0.4:
    lower-case "^2.0.2"
    tslib "^2.0.3"

-node-fetch@2.6.1:
-  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052"
-  integrity sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==
-
-node-fetch@^2.6.1:
+node-fetch@2.6.1, node-fetch@2.6.7, node-fetch@^2.6.1:
  version "2.6.7"
  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.7.tgz#24de9fba827e3b4ae44dc8b20256a379160052ad"
  integrity sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==