feat: add provider names to swap#769
Conversation
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. 🗂️ Base branches to auto review (3)
Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the WalkthroughThis PR performs a comprehensive update including 60+ dependency bumps across the monorepo, network infrastructure changes (removing Canto, ZChains, ProofOfPlayApex; adding Nibiru/NibiruTestnet), UI enhancements for swap provider information display, extended Changelly provider with RBTC/floating-rate support, and various endpoint migrations to community-managed infrastructure. Changes
Sequence Diagram(s)sequenceDiagram
participant User as User/UI
participant ListItem as BestOfferListItem Component
participant Config as PROVIDER_INFO Config
participant Icon as Provider Icon
User->>ListItem: Render with trade data
ListItem->>Config: Look up provider: PROVIDER_INFO[props.provider]
Config-->>ListItem: Return {name: ProviderNameProper, icon: any}
ListItem->>Icon: Render icon image
ListItem->>ListItem: Display provider name (ProviderNameProper)
ListItem-->>User: Show provider icon + localized name
Note over ListItem,Config: Falls back to "Unknown Provider" if provider not in PROVIDER_INFO
sequenceDiagram
participant Client as Changelly Client
participant Provider as Changelly Provider
participant API as Changelly API
alt RBTC Protocol (Floating Rate)
Client->>Provider: getMinMaxAmount({protocol: "RBTC", amount: "..."})
Provider->>API: getExchangeAmount (with amountFrom)
API-->>Provider: Exchange rate response
else Fixed Rate Protocol
Client->>Provider: getMinMaxAmount({protocol: normal})
Provider->>API: getFixRate
API-->>Provider: Fixed rate response
end
Provider-->>Client: MinMaxResponse
Note over Provider,API: Request routing changed based on protocol type
Estimated code review effort🎯 4 (Complex) | ⏱️ ~50 minutes
Possibly related PRs
Suggested reviewers
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
💼 Build Files |
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (3)
packages/swap/src/types/index.ts (1)
147-156: Consider adding an explicit type annotation for compile-time completeness.While the current mapping includes all providers, adding an explicit type would ensure compile-time verification that all
ProviderNamevalues are mapped toProviderNamePropervalues. This prevents future additions toProviderNamefrom being missed.Apply this diff to add type safety:
-export const providerNameProper = { +export const providerNameProper: Record<ProviderName, ProviderNameProper> = { [ProviderName.changelly]: ProviderNameProper.changelly, [ProviderName.oneInch]: ProviderNameProper.oneInch, [ProviderName.oneInchFusion]: ProviderNameProper.oneInchFusion, [ProviderName.paraswap]: ProviderNameProper.paraswap, [ProviderName.zerox]: ProviderNameProper.zerox, [ProviderName.rango]: ProviderNameProper.rango, [ProviderName.jupiter]: ProviderNameProper.jupiter, [ProviderName.okx]: ProviderNameProper.okx, };This ensures that if a new provider is added to
ProviderName, TypeScript will enforce adding it toproviderNameProper.packages/extension/src/ui/action/views/swap/views/swap-best-offer/components/swap-best-offer-block/components/best-offer-list-item.vue (2)
4-10: Add defensive check for invalid provider values.The current logic only handles falsy
providervalues but doesn't guard against invalid provider names that aren't in theproviderNamePropermap.Apply this diff for more robust fallback handling:
<p> {{ - props.provider - ? providerNameProper[props.provider] - : 'Unknown Provider' + (props.provider && providerNameProper[props.provider]) || 'Unknown Provider' }} </p>This ensures "Unknown Provider" is displayed when:
provideris falsy (empty string, null, undefined)provideris not a key inproviderNameProper(returns undefined)
31-68: Consider using<script setup>withdefineProps<T>()for cleaner type inference.The current approach uses runtime prop validation with
PropTypecasting. For better type inference and cleaner code, consider using the TypeScript-baseddefineProps<T>()syntax.You could refactor to:
interface Props { select?: () => void; provider?: ProviderName; swapNumber?: number; amount?: string; isLoading?: boolean; isChecked?: boolean; } const props = withDefaults(defineProps<Props>(), { select: () => () => null, provider: undefined, swapNumber: 0, amount: '', isLoading: false, isChecked: false, });This provides better IDE support and type safety.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
packages/extension/package.json(1 hunks)packages/extension/src/ui/action/views/swap/views/swap-best-offer/components/swap-best-offer-block/components/best-offer-list-item.vue(2 hunks)packages/extension/src/ui/action/views/swap/views/swap-best-offer/components/swap-best-offer-block/components/best-offer-list.vue(1 hunks)packages/extension/src/ui/action/views/swap/views/swap-best-offer/components/swap-best-offer-block/index.vue(3 hunks)packages/swap/src/types/index.ts(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: buildAll
- GitHub Check: test
- GitHub Check: test
🔇 Additional comments (2)
packages/extension/src/ui/action/views/swap/views/swap-best-offer/components/swap-best-offer-block/components/best-offer-list.vue (1)
8-8: LGTM!The provider prop is correctly bound from
trade.providerto pass the provider name to the child component.packages/extension/package.json (1)
7-7: Prebuild removal is safe and poses no risk to Kadena integration.The verification confirms that removing
prebuildandkadena:prebuildsteps has no negative impact:
- No references to prebuild exist anywhere in the source code
- Kadena is fully integrated as a complete provider with all necessary code present and properly scoped
- All package.json scripts are clean with no prebuild dependencies
- The type declaration reference in tsconfig (
./node_modules/.kadena/pactjs-generated) is managed by the@kadena/pactjs-clidependency itself, not by a prebuild stepDevelopment and production builds should function correctly across all browsers without the prebuild steps.
...p/views/swap-best-offer/components/swap-best-offer-block/components/best-offer-list-item.vue
Show resolved
Hide resolved
...on/src/ui/action/views/swap/views/swap-best-offer/components/swap-best-offer-block/index.vue
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (3)
packages/extension/src/ui/action/views/swap/views/swap-best-offer/components/swap-best-offer-block/index.vue (2)
3-7: Add null safety when accessing provider details.The code directly accesses
providersDetails[props.pickedTrade.provider].logoand.namewithout verifying the provider exists in the mapping. This will throw a runtime error if an unmapped provider is encountered.The previous review comment suggesting fallback handling remains unaddressed. Apply defensive access:
<h3> Best offer including network fee powered by - <img :src="providersDetails[props.pickedTrade.provider].logo" /> - {{ providersDetails[props.pickedTrade.provider].name }} + <img v-if="providersDetails[props.pickedTrade.provider]" :src="providersDetails[props.pickedTrade.provider].logo" /> + {{ providersDetails[props.pickedTrade.provider]?.name || 'Unknown Provider' }} </h3>
48-55: Add null safety for provider info section.Same issue as the heading—direct property access without checking if the provider key exists in
providersDetails.Apply defensive access:
<p> Provider: - <img + <img + v-if="providersDetails[props.pickedTrade.provider]" height="15px" :src="providersDetails[props.pickedTrade.provider].logo" /> - {{ providersDetails[props.pickedTrade.provider].name }} + {{ providersDetails[props.pickedTrade.provider]?.name || 'Unknown Provider' }} </p>packages/extension/src/ui/action/views/swap/views/swap-best-offer/components/swap-best-offer-block/components/best-offer-list-item.vue (1)
42-47: Fix type mismatch between prop type and default value.The
providerprop is typed asProviderName(enum) but defaults to''(empty string), creating a type inconsistency.The previous review comment remains unaddressed. Choose one of these solutions:
Option 1: Make prop optional with undefined default
provider: { type: String as PropType<ProviderName>, - default: () => { - return ''; - }, + required: false, + default: undefined, },Option 2: Make prop required (preferred if provider is always passed)
provider: { type: String as PropType<ProviderName>, - default: () => { - return ''; - }, + required: true, },
🧹 Nitpick comments (1)
packages/extension/src/libs/utils/providersDetails.ts (1)
11-20: Add explicit typing to the exported mapping.The exported object lacks explicit typing, which reduces type safety and IDE support. Adding a type annotation will catch any mismatches between
ProviderNamekeys and the expected structure.Apply this diff:
-export default { +const providersDetails: Record<ProviderName, { name: string; logo: string }> = { [ProviderName.changelly]: { name: ProviderNameProper.changelly, logo: changellyLogo }, [ProviderName.oneInch]: { name: ProviderNameProper.oneInch, logo: oneInch }, [ProviderName.oneInchFusion]: { name: ProviderNameProper.oneInchFusion, logo: oneInch }, [ProviderName.paraswap]: { name: ProviderNameProper.paraswap, logo: paraswap }, [ProviderName.zerox]: { name: ProviderNameProper.zerox, logo: zerox }, [ProviderName.rango]: { name: ProviderNameProper.rango, logo: rango }, [ProviderName.jupiter]: { name: ProviderNameProper.jupiter, logo: jupiter }, [ProviderName.okx]: { name: ProviderNameProper.okx, logo: okx } -} +}; + +export default providersDetails;
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (7)
packages/extension/src/ui/action/assets/swap/0x-logo.pngis excluded by!**/*.pngpackages/extension/src/ui/action/assets/swap/1inch-logo.pngis excluded by!**/*.pngpackages/extension/src/ui/action/assets/swap/changelly-logo.pngis excluded by!**/*.pngpackages/extension/src/ui/action/assets/swap/jupiter-logo.pngis excluded by!**/*.pngpackages/extension/src/ui/action/assets/swap/okx-logo.pngis excluded by!**/*.pngpackages/extension/src/ui/action/assets/swap/paraswap-logo.pngis excluded by!**/*.pngpackages/extension/src/ui/action/assets/swap/rango-logo.pngis excluded by!**/*.png
📒 Files selected for processing (4)
packages/extension/src/libs/utils/providersDetails.ts(1 hunks)packages/extension/src/ui/action/views/swap/views/swap-best-offer/components/swap-best-offer-block/components/best-offer-list-item.vue(3 hunks)packages/extension/src/ui/action/views/swap/views/swap-best-offer/components/swap-best-offer-block/index.vue(4 hunks)packages/swap/src/types/index.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- packages/swap/src/types/index.ts
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: buildAll
- GitHub Check: test
- GitHub Check: test
🔇 Additional comments (1)
packages/extension/src/libs/utils/providersDetails.ts (1)
11-20: All ProviderName enum values are correctly mapped.The verification confirms that
providersDetails.tsimportsProviderNamefrom@enkryptcom/swap/src/typesand maps all 8 enum values (changelly, oneInch, oneInchFusion, paraswap, zerox, rango, jupiter, okx) without any missing entries. No runtime errors will occur from incomplete mappings.
...p/views/swap-best-offer/components/swap-best-offer-block/components/best-offer-list-item.vue
Show resolved
Hide resolved
...p/views/swap-best-offer/components/swap-best-offer-block/components/best-offer-list-item.vue
Show resolved
Hide resolved
- Enhanced formatting and indentation in `eth-verify-transaction.vue` for better code clarity. - Streamlined the structure of `App.vue` by reducing unnecessary divs and improving component usage. - Updated `lock-screen/index.vue` to improve layout and readability. - Refined `restricted/index.vue` to enhance the user experience with clearer conditional rendering. - Improved `swap/index.vue` by organizing component props and events for better readability. - Enhanced `best-offer-list-item.vue` and `index.vue` for better structure and clarity. - Added geo-restriction checks in `onboard/App.vue` to improve user flow. - Standardized code style in `base58.ts`, `cross-browser.ts`, and various interface files for consistency. - Ensured all interface methods end with a semicolon for uniformity.
…rove eth_accounts method flow
Feat/restricted popup
Summary by CodeRabbit
New Features
Improvements
Removals
Chores
✏️ Tip: You can customize this high-level summary in your review settings.